HTML 기본 문법
Intro
이 글은 HTML의 기본 문법에 대해서 다룹니다.
HTML의 구성 요소
- 태그(tag):
- 속성:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<p>나의 첫번째 웹 페이지!</p>
</body>
</html>
문법
- 콘텐츠가 있는 문법: 시작태그와 종료태그 사이에 작성된 모든 것들. (태그와 태그 사이에 사용된 것 = 콘텐츠)
ex. head, body, p 태그 등등… - 콘텐츠가 없는 문법: 시작태그와 종료태그가 없는 것들.
ex. 메타태그 등
html5에서는 ‘/’를 강제하지 않음
시작태그와 종료태그를 통틀어 ‘요소’라고 한다.
주석
<!---abc---!>
민감한 정보는 주석으로도 남기면 안된다. 페이지 소스보기를 통해서 html주석을 볼 수 있기 때문이다.
구조
html 문서는 일정한 기본 구조 안에서 작성된다.
<!DOCTYPE html>
html은 ‘DOCTYPE’이라는 dtd를 가장 맨 처음에 선언해야 한다.
<html>
</html>
html태그는 html문서의 시작을 의미한다.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-compaible" content="IE=edge">
<meta name="viewport" content="midth=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<p>나의 첫 번째 웹페이지</p>
</body>
</html>
head 태그는 메타데이터를 정리하는 영역.
웹브라우저엔 직접 노출되진 않지만 참조 경로 등을 작성.
ex. meta 태그
모든 html 문서는 반드시 하나 이상의 title 태그를 가지고 있어야 함.
html문서마다 title태그의 제목이 고유해야 한다.
body태그는 그 안에 작성된 내용이 웹페이지에 노출된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-compaible" content="IE=edge">
<meta name="viewport" content="midth=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<p>나의 첫 번째 웹페이지</p>
</body>
</html>
결과적으로 모든 요소들을 포함하면 이렇게 html문서의 기본 틀을 만들어 볼 수 있다.
HTML의 특징
html에서는 들여쓰기가 굉장히 큰 비중을 차지.
부모-자식-형제 태그가 존재하는데
상위태그는 부모, 하위태그는 자식, 등위태그는 형제.
ex. html태그는 head태그의 부모태그. meta태그는 head태그의 자식태그. meta태그는 title태그의 형제태그
들여쓰기를 통해 태그 간의 관계를 바로 파악하게 한다.
블록요소
태그를 사용했을 때 줄바꿈이 되어서 출력되는 태그
ex. p태그
인라인(inline)요소
태그를 사용했을 때 줄바꿈이 되지 않고 한 줄에 출력되는 태그
ex. span태그