HTML 문서는 기본적인 구조를 가지고 있습니다.
예제를 통해 알아보겠습니다.
<!DOCTYPE html>
<!-- html 문서라는 것을 브라우저에게 알려준다 -->
<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>
<!-- 실제 웹문서의 동작과 내용을 기재한다 -->
<h1> 안녕하세요. 웹 문서 입니다. </h1>
</body>
</html>HTML 은 크게 3가지 태그 <> 로 구분됩니다.
태그 란 <> 기호를 가진 html 의 최소 단위로 html 요소라고도 불리웁니다.
브라우저에서는 태그 안의 값만 실행되거나 표시되게 됩니다.
1. <html> </html> 웹 문서의 처음과 끝을 나타냅니다.
웹 문서의 시작과 끝이기에 해당 태그 사이에 웹문서의 정보와 실제 브라우저에 보여질 구조 및 내용을 코딩하면 됩니다. 위 예제에서 <html lang="en"> 은 해당 웹페이지의 기본 언어가 영어라는 뜻 입니다.
lang='kr' 한국어로 설정을 하면, 한글로 검색시 해당 웹페이지가 한글이라는 조건에 맞아 떨어져 검색이 되는 원리입니다.
2. <head></head> 태그 사이에는 해당 웹 문서의 정보를 브라우저에게 알려줍니다.
head 태그 사이에는 이 웹문서는 어떠한 문서라는 것을 웹 브라우저에게 알려주는 역할을 하는 곳 입니다. 위 예제에서는 웹페이지에 한글이 깨지지 않고 표현하기 위해서 "UTF-8" 로 캐릭터 들을 지정하라고 브라우저에 알려주고 있습니다. 그리고, title 태그 를 통해서 웹페이지의 제목을 설정 할 수 있으며, css 및 자바스크립트 파일을 연결 및 메타 태그 등을 설정 할 수도 있습니다.
3. 마지막으로 <body></body> 입니다.
브라우저에 보여질 웹문서의 구조와 내용이 들어갑니다.
다양한 태그를 사용하여 웹 문서에 보여질 내용들을 만들어 가면 됩니다.
추가로, 웹 문서가 시작하는 첫 라인은,
<!DOCTYPE html> 이라는 태그 가 옵니다.
해당 웹문서를 읽어들이는 브라우저에게 해당 문서의 타입이 html 이라는 것을 알려주는 역할을 합니다.
참고로 html 은 html 의 버전을 나타냅니다. 현재는 최신버전인 html5가 적용되어 있다는 의미로 <!DOCTYPE html>이 사용됩니다. 일부 브라우저에서는 html4,3,21 등의 이전 버전을 기재하는 경우도 있습니다.
복잡한 웹페이지 더라도 하기 구성으로 이루어져 있다는 것이 중요합니다.
<html>
<head>
<body>
</body>
</head>
</html>
감사합니다.
'앱 만들기 > HTML5 study' 카테고리의 다른 글
| <br>태그 예제 (4) | 2023.01.25 |
|---|---|
| <p>태그 예제 (8) | 2023.01.24 |
| 비쥬얼스튜디오 코드 웹문서 실행하기 (2) | 2023.01.08 |
| HTML 이란? (2) | 2023.01.03 |
| HTML h 태그 란? (4) | 2022.11.15 |
댓글