이번 시간에는 HTML 기본 구조에 대해 살표보겠습니다.
HTML은 html, head, body, meta 등 많은 태그들로 구성되어 있습니다. 이러한 태그들은 분류 방법에 따라 다음과 같이 분류 할 수 있습니다.
태그란?
- HTML를 구성하기 위한 요소입니다.
분류 1 : 쌍태그 vs 단일 태그
분류 2 : block 태그 vs inline 태그 vs inline-block 태그
쌍태그 vs 단일 태그
쌍태그 : 괄호처럼 여는 부분과 닫는 부분이 필요한 태그
- 태그 사이에 내용을 포함합니다.
- 괄호의 순서가 꼬이면 계산이 안되는 것처럼, 태그의 열고 닫는 부분이 꼬이면 원하는 배치가 안 될 수있습니다.
- 여는 태그 : <태그명>
- 닫는 태그 : </태그명>
- 종류 : head, body, title, p, div 등
단일 태그 : 닫는 태그가 필요없는 태그
- 종류 : meta, input, img 등
- <태그명> 또는 <태그명/>
block 태그 vs inline 태그 vs inline-block 태그
block 태그
- 앞 태그의 종류와 상관없이 새 라인에서 시작하고, 다음 태그를 새 라인에서 시작하도록 하는 태그
- css나 style 속성을 통하여 가로와 높이를 변경할 수 있는 태그
- 종류 : div, h[1~6], p 태그 등
inline 태그
- 현재 위치에 이어서 작업을 하는 태그
- 태그의 가로와 높이를 변경할 수 없는 태그
- 종류 : span 태그 등
inline-block 태그
- inline 태그와 block태그가 섞인 태그
- 현재 위치에서 이어서 작업을 하며 태그의 가로와 높이를 변경할 수 있는 태그
- 종류 : input 태그 등
이제 본격적으로 각 태그들의 대해 살표보도록 하겠습니다.
<!DOCTYPE>
- 문서 타입을 정의하는 태그입니다.
- 대소문자를 구별하지 않지만 일반적으로 DOCTYPE은 대문자로 사용합니다.
- HTML5의 경우 문서 맨 위에 다음과 같이 입력하면 됩니다.
1 | <!DOCTYPE html> | cs |
<html>
- HTML 문서 전체를 감싸는 태그
1 | <html></html> | cs |
<head>
- HTML 문서의 속성을 지정하기 위한 태그
- 현재 페이지에 대한 정보 및 필요한 파일을 연결하는 작업들을 합니다.
- <head>태그 안에는 <title>, <meta>태그 등을 넣습니다.
1 | <head></head> | cs |
<body>
- HTML 문서의 본문으로 화면에서 보이는 부분을 담당하는 태그로, 다른 태그들을 이용하여 화면을 구성합니다.
1 | <body></body> | cs |
HTML의 기본 구조 예시
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>안녕하세요.</p> </body> </html> | cs |