HTML의 큰 구조는 아래와 같이 html태그안에 head와 body로 이루어져있다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html><!DOCTYPE html> 브라우저에게 해당 문서가 html코드를 포함하고 있음을 알려준다.
<html lang="en">사이트에서 사용되는 언어가 무엇인지 알려줌. 이 경우엔 영어가 사용됨을 알려주고 있다.
<head></head> 웹사이트의 환경을 설정한다. 외부적으로 보이지 않는다.
<body></body>사용자가 볼 수 있는 내용(content)을 포함한다.
<meta>문서에 추가적인 정보를 주는 태그이다.
<meta charset="UTF-8">브라우저에게 텍스트를 어떻게 그려야할지 알려준다.
한글이나 다른 특수문자가 있는 언어를 입력할 때, 해당 언어를 브라우저가 이해를 못할 때가 있는데 그때 <meta charset="UTF-8"> 태그가 없으면 글자가 깨져보임
non-semantic tag
문서에 의미를 부여하지 않는 태그. 태그 자체 만으로는 의미를 알 수 없다.
ex.<div></div> <span></span>...
semantic tag
문서에 의미를 부여하는 태그. 태그만으로도 충분히 의미를 알 수 있다.
ex.크게 <header></header> head아님 <main></main> <footer></footer> 가 있다. (id속성을 설정하고) <div></div>로 대체 할 수 있다. 다만,태그만으로는 의미를 알 수 없게 됨
MDN의 HTML semantics참고
- id
-
고유식별자(Unique Identifier)이기 때문에 body안에 어떤 태그에도 넣을 수 있는 속성
- id가 고유해야 하는 이유는 css는 html에서 무언가를 가져와서 디자인 할 때 식별 하기 위함이다.
-
요소(element) 하나 당 하나의 id만 가질 수 있다.
- form 과 input
-
웹 사이트에서 아이디나 비밀번호, 이름, 이메일 등을 입력하고 제출하는 것까지 도와주는 태그이다.
-
더 다양한 유형은 input 참고.
- label 과 input
-
양식의 이름을 써준다.
-
label은 input과 함께여야 한다.
-
label에는 속성 for을, input에는 속성 id를 넣어줘야하며 for 과 id에는 공백 없이 동일한 값이 들어가야한다.
→ label을 클릭하면 input을 움직이게 할 수 있다.(for 과 같은 값을 가진 id를 들고있으므로)
- 그 외 속성 몇 가지
-
type - 양식의 속성을 써준다.
- ex. type="submit" 의 경우, 제출 할 수 있는 버튼을 만들어준다.
-
placeholder - 양식 안에 옅게 뭘 입력해야하는지 표시한다
-
required - 필수 양식으로 설정한다. 미입력시 브라우저에서 안내창을 띄워준다.
-
value - 양식 안에 글자를 미리 입력해놓거나 버튼의 경우 글자를 바꿀 수 있다.
