#1.2 Requirements
HTML, CSS를 통해 웹사이트를 만든 후 Javascript로 interactive 하게 만들 수 있다.
따라서 웹사이트를 만들기 위해 HTML, CSS에 대한 기본적인 수준의 지식이 필요하다.
HTML - 폼을 어떻게 작성하는지, 인풋, 버튼, body, head
CSS - class와 id의 차이점, selector
강의에서는 위 항목들 대한 이해도가 필요해 코코아톡 클론 코딩이라는 선수 과정을 추천한다.
하지만, 유료과정이라 간단하게 밀리의 서재 - "HTML5 독학백서, 이도해" 로 정리해 보려한다.
읽어보니 초보자도 이해하기 좋은 책인 것 같다.
HTML
- <head> 태그
문서의 정보를 담당
- <body> 태그
문서의 본문을 의미하는 태그로, <head> 태그와 다르게 웹 브라우저 화면에 보이는 부분을 담당.
- <form> 태그
사용자의 입력을 받아 데이터를 웹 사이트 등으로 전송할 때 사용하는 태그
폼을 구성하기 위해서는 <form> 태그의여는 태그와 닫는 태그 사이에 하나 이상의 Input Widget, Button Widget과 Label을 사용한다.
- input widget
폼을 할 때 자주 사용되는 대표적인 input widget의 종류는 다음과 같다 :
'text/ textarea/ radio/ checkbox/ password/ file'
어떤 위젯을 사용할 지 type 속성의 값으로 작성.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<form>
<label for="name">이름</label>
<input type="text" id="name" />
</form>
</body>
</html>
- button widget
버튼 위젯은 다음과 같은 type 속성을 가진다. :
' button/ submit/ reset '
- button 은 특별한 기능을 가지고 있지 않고, 이것이 그냥 버튼임을 나타내는 속성 값.
이 속성 값은 버튼이 클릭 되었을 때의 이벤트 처리를 위해 Javascript와 함께 쓰인다.
- submit 은 입력받은 데이터를 서버로 전송
- reset 은 현재 폼의 위젯을 초기화
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<form action="/test-page" method="post">
<div>
<label for="name">이름</label>
<input type="text" name="name" />
</div>
<div>
<label for="mail">이메일</label>
<input type="text" id="mail" />
</div>
<div>
<label for="codenumber">패스워드</label>
<input type="password" id="codenumber" />
</div>
<div>
<button type="submit">전송</button>
<button type="reset">초기화</button>
<button type="button" onclick="alert('버튼 클릭')">버튼</button>
</div>
</form>
</body>
</html>
내가 그 일을 즐겁게 할 수 있는지 아닌지를 알려면 해보는 수밖에
아래는 chrome의 새 탭 화면 source인데, 세부적인 속성들의 의미는 모르더라도 전반적으로 태그들이 어떻게 사용되는지 알 수 있었다. (Chrome 새 탭 - Ctrl + Shift + I (개발자 도구) - Sources)
<html dir="ltr" lang="ko">
<head>
<meta charset="utf-8">
<title>새 탭</title>
<style>
body {
background: #FFFFFF;
margin: 0;
}
#backgroundImage {
border: none;
height: 100%;
pointer-events: none;
position: fixed;
top: 0;
visibility: hidden;
width: 100%;
}
[show-background-image] #backgroundImage {
visibility: visible;
}
</style>
</head>
<body>
<iframe id="backgroundImage" src=""></iframe>
<ntp-app></ntp-app>
<script type="module" src="new_tab_page.js"></script>
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<link rel="stylesheet" href="shared_vars.css">
</body>
</html>
CSS 관련 내용은 생각보다 글이 길어져 별도로 정리하려 한다.
>>
[노마드코더] 바닐라 JS로 크롬 앱 만들기 #1 INTRODUCTION | CSS3 독학백서, 이도해 (tistory.com)
* 참고도서
HTML5 독학백서, 이도해
'스터디 > web' 카테고리의 다른 글
| [노마드코더] 바닐라 JS로 크롬 앱 만들기 #2.4 Booleans - #2.6 Objects (0) | 2022.11.06 |
|---|---|
| [노마드코더] 바닐라 JS로 크롬 앱 만들기 #2.1 Basic Data Types - #2.3 const and let (0) | 2022.11.06 |
| [노마드코더] 바닐라 JS로 크롬 앱 만들기 #1 INTRODUCTION | #2 Your First JS Project (0) | 2022.10.20 |
| [노마드코더] 바닐라 JS로 크롬 앱 만들기 #1 INTRODUCTION | CSS3 독학백서, 이도해 (0) | 2022.10.10 |
| [노마드코더] 바닐라 JS로 크롬 앱 만들기 (0) | 2022.10.10 |
