티스토리 뷰
이전에 배웠던 코드를 분석해 봅시다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>예시 1번</title> </head> <body> <h1>좋아하는 연예인은 누구입니까 ?</h1> <hr> <img src="http://bimage.interpark.com/milti/contents/upload/33093812_20141020170426_L2.jpg" /> <p>fighting! girls day!</p> </body> </html>
이전의 문서를 다시 불러왔습니다. 이제 하나씩 살펴볼까요?
HTML태그 들은 <html>태그 사이에 씁니다. 하지만 태그들을 보시면 <!DOCTYPE html>이라는 <html>태그 밖에 쓰인 태그 같이 생긴 것이 보이시죠 ? (태그는 아닙니다.) 이건 HTML 문서의 맨 처음에 와서 웹 브라우저에게 이 페이지가 어떤 버전의 HTML로 작성되어 있는지를 가르쳐줍니다. 그래서 올바르게 해석할 수 있도록 도와주죠. 앞으로 작성할 문서들은 모두 HTML5를 사용합니다. 그리고 위의 표시는 HTML5로 해석하라고 지시해주는 것이죠.
정리하자면, 문서 맨 위의 <!DOCTYPE html>은 브라우저에게 HTML5로 해석하라고 지시해주는 겁니다.
그리고 <html>이라는 태그가 시작되고 그 안에 <head>와 <body>라는 태그가 쓰였습니다. <head>태그는 문서의 제목과 문서에 대한 다른 정보들이 안에 담깁니다. 보통 메타데이터(데이터를 설명해주는 데이터라고 기억하셔도 됩니다.)라고 표현됩니다.
그리고 <body>태그에는 HTML 문서의 모든 컨텐츠들이 들어갑니다. 예시를 보시면 제목과 경계선, 이미지와 본문내용들이 모두 <body>태그 안에 들어가 있죠.
기억하세요! 모든 태그는 <html>태그 안에 쓰여지고, <html>태그는 메타데이터를 포함하는 <head>태그와 문서의 모든 컨텐츠가 안에 들어있는 <body>태그를 포함합니다.
<head>태그의 안을 한번 살펴볼까요?
<meta> 태그는 메타데이터를 제공하는 태그입니다. 보통은 사용자들 보다 기계들이 읽는데 도움을 줍니다. charset="UTF-8"은 UTF-8방식으로 쓰여진 문서고 이렇게 읽어달라고 말해주는 것입니다. 이 태그를 포함하지 않고 혹시 브라우저가 다른 방식으로 읽게 된다면 한글이 깨져서 보이게 됩니다.
<title>태그는 문서의 타이틀을 나타냅니다. 예시로 든 문서엔 "예시 1번"이라는 타이틀로 설정되어 있고, 위의 네이버 사진엔 "NAVER"이라고 되어 있는게 보이시나요?
정리하자면, <meta charset="UTF-8" />은 UTF-8으로 쓰여졌으니 UTF-8으로 읽도록 지시하는 것이고, <title>태그 사이의 글은 문서의 타이틀로 나타납니다.
<body>태그도 살펴봅시다.
<h1>태그는 제목을 나타냅니다. <h1>부터 <h6>까지 있고, 예시의 태그를 바꿔보시면 점점 크기가 작아 지는 것을 볼 수 있습니다.
<hr>태그는 구분선을 표현합니다.
이 위의 선이 말 그대로 <hr>태그로 나타난 선입니다.
<img>태그는 이미지를 나타냅니다. 지금은 걸스데이를 나타내고 있지만 각자 원하는 이미지로 바꿔볼까요?
구글에서 바꾸길 원하는 사진을 검색해 보세요. 검색창 밑의 이미지라고 적힌 곳에 들어가서 원하는 이미지를 클릭하고 이미지 보기를 클릭하세요. 새 창으로 이미지가 나타납니다.
주소창에 나타난 주소를 이미지 태그의 src 속성 값으로 넣어주세요. " " 사이에 넣으시면 됩니다.
이미지가 바뀌었나요 ?
마지막으로 <p>태그를 살펴보겠습니다. <p>태그는 문단이 들어갑니다. 예시에서는 "파이팅 걸스데이"라는 글이 들어갔군요. 바뀐 이미지에 맞게 내용을 수정해 보세요 !
첫번째 예제가 끝났습니다. 앞으로 더 다양한 태그들을 배우게 될 겁니다. 혹시 태그 외우기가 어렵다고 느껴지시나요 ? 그럼 원래 뜻을 찾아보세요! <h1>에서 h는 heading이라는 뜻이고, <hr>은 horizontal rule을 나타냅니다. <img>는 image를 줄여쓴 것이고 안 쪽의 src 속성은 source를 줄여 쓴 것입니다. <p>태그는 paragraph라는 뜻입니다.
무엇을 줄여 쓴 것인지 찾으면 더 쉽게 외울 수 있습니다!
다음 포스트에도 다른 예시들로 html을 더 공부해보도록 하겠습니다.
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
| <div>태그와 <span>태그에 id와 class 속성 주기 (0) | 2017.12.14 |
|---|---|
| <input>태그, <a>태그, <ul>태그를 활용한 예시 (1) | 2017.12.13 |
| HTML태그 보충 설명 (6) | 2017.12.07 |
| HTML 입문 (0) | 2017.12.06 |
| 파일 확장명을 표시합시다.(윈도우10) (1) | 2017.12.03 |