1. HTML 파일의 구조
HTML 파일의 구조에 항상 아래와 같습니다.
<!DOCTYPE>
<html>
<head>
</head>
<body>
</body>
</html>위 코드를 한번 살펴보도록 합시다.
1 - 1. <!DOCTYPE>
HTML 파일의 제일 첫 째줄에 위치하는 선언문 입니다.
<!DOCTYPE html><!DOCTYPE>는 HTML 태그는 아닙니다.
해당 html 파일이 어떤 버전의 html을 사용했는지 브라우저에 알려주는 역할을 합니다.
<!DOCTYPE html> 선언을 해주면 html5 버전을 사용한다는 의미입니다.
html5는 가장 최신 버전 입니다.
1 - 2. <html>
<!DOCTYPE>를 제외한 모든 요소들을 감싸는 tag입니다.
브라우저가 <html>을 만남으로써 html의 시작을 감지하고 요소를 그릴 준비를 합니다.
1 - 3. <head>
<html> tag 다음으로 오는 것이 <head> tag입니다.
<head> tag는 쉽게 말해 브라우저에 정보를 제공하는 tag 입니다.
화면에 보이지 않지만 브라우저가 알아야할 모든 정보를 <head> 안에 입력합니다.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
</head>위와 같이 문자 셋을 지정해 주거나(<meta charset="utf-8">)
모바일 기기를 고려한 정보를 주기도 합니다(<meta name="viewport" content="width=device-width">)
그리고 웹 페이지의 이름에 대한 정보도 줍니다(<title>repl.it</title>).
1 - 4. <body>
<body> tag는 항상 <head> tag밑에 위치합니다.
<head>tag는 화면에 보이지않는 정보였다면 <body> tag는 화면에 보여지는 tag입니다.
<body>
<h1>시간이란...</h1>
<p>내일 죽을 것처럼 오늘을 살고<br>
영원히 살 것처럼 내일을 꿈꾸어라</p>
<img src="images/first.jpg">
</body>위와 같이 작성하면 브라우저로 저 내용이 나옵니다.
앞으로 배울 거의 모든 tag들은 다 <body> tag안에 들어갈 tag들입니다.
다음장부터 알아보도록 하겠습니다!
'HTML,CSS' 카테고리의 다른 글
| 6. Font Style (0) | 2021.01.11 |
|---|---|
| 5. CSS(Cascading Style Sheets) (0) | 2021.01.11 |
| 4. HTML Attribute(속성) (0) | 2021.01.11 |
| 3. 여러 tag를 알아보자 1장 (h1 ~ h6, span, p, a, div) (0) | 2021.01.11 |
| 1. HTML(Hypertext Markup Language)의 정의와 기능 (0) | 2021.01.11 |