HTML 문서를 만들기 위해서는 기본적인 골격 태그들을 알고 있어야합니다. HTML 파일의 기본 골격 구조는 아래와 같습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 제목을 입력해주세요. </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>
1. <!doctype html>
해당 파일이 html 파일임을 알려줍니다. html 파일의 가장 위에 작성하며 html의 버전을 알려줍니다.
2. <html lang="en"> </html>
<!doctype html> 아래 작성합니다. 이 태그는 html 코드의 작성의 시작과 끝을 알려줍니다. lang은 language의 약자로 무슨 언어로 작성되었는지를 알려줍니다. lang="en" 형태로 작성하며 en은 english 즉, 영어로 작성되었음을 알려줍니다. 괄호 속 en 대신 ko를 입력하면 한국어로 작성되었다는 뜻입니다.
3. <head> </head>
<html lang="en"> </html> 태그 내부에 작성합니다. 이 태그에 작성되는 내용은 웹 브라우저의 화면에 출력되지 않습니다. 이 태그가 속한 html파일이 만드는 페이지의 정보와 사용한 외부 파일 링크에 대한 내용을 담고 있습니다. 사용할 CSS파일을 링크하는 것도 이 부분입니다.
4. <meta charset="UTF-8">
<head> </head> 태그 내부에 작성하며 사용할 문자 코드를 지정해줍니다. 이 코드를 작성하지 않으신다면 문자의 깨짐이 발생합니다.
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
<head> </head> 태그 내부에 작성하며 휴대폰과 같은 모바일 기기에서도 웹 페이지 화면이 출력되도록 해줍니다. 모바일 기기를 사용하지 않으신다면 생략하셔도 됩니다.
6. <title> </title>
<head> </head> 태그 내부에 작성하며 제목을 지정해줍니다. 웹 브라우저에서 이 태그가 있는 html파일이 만드는 페이지에 들어갔을 때 웹 브라우저 탭에 해당 코드를 통해 지정된 제목을 출력합니다. 즐겨찾기(또는 북마크)를 했을 때 저장되는 이름도 <title> </title> 태그를 통해 지정된 내용입니다. 웹 페이지의 이름이라 생각하시면 쉽습니다.
7. <body> </body>
<html lang="en"> </html> 내부 <head> </head> 아래에 작성하며 <body></body> 태그에 작성되는 내용은 실제 웹 브라우저에 출력되는 내용입니다.
'Programming > HTML5 & CSS3' 카테고리의 다른 글
| [HTML] 텍스트 출력 및 줄바꿈 하는 법 (0) | 2020.12.03 |
|---|---|
| [HTML] 제목 텍스트 태그 사용하는 법 (0) | 2020.12.02 |
| [HTML/CSS] 웹 개발환경 갖추기 (0) | 2020.11.29 |
| [HTML/CSS] HTML5 와 CSS3 (0) | 2020.11.28 |
| [html/css] 티스토리 표 색깔 변경 하는 법 (0) | 2020.10.30 |
