[HTML] 01. HTML 기본구조
HTML은 브라우저에서 실행 가능한 가장 기본적인 파일이다.
HTML은 Mark up 언어를 이용해 구조적으로 태그들을 이용해서 보여주며 HTML 태그에는 상위태그 2가지(head, body)가 있다.
Head에는 상세 설명이 들어가고, body는 사용자에게 보여지는 태그들로 이루어져있다.
HTML 파일안에 들어가야 하는 가장 기본적인 HTML 구조는 하기와 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
</body>
</html>1) !DOCTYPE HTML
- 해당 파일의 다큐먼트의 타입이 HTML이다
- 예전에는 해당 영역에 브라우저가 따라야 하는 중요한 룰과 HTML 버전들도 따로 표기해 두었었다.
- 현재는 모든 브라우저에 HTML5가 지원되기 때문에 관습적으로 HTML로 표기한다.
2) HTML 태그
- HTML 태그에는 head와 body로 나눠지며 doctype의 가장 상단에 표기한다.
3) Head 태그
- head는 사용자에게 보여지는 영역이 아닌 구글에서 검색할 때 나오는 타이틀이나 부가설명, 북마크 및 아이콘 등이 정의돼 있는 영역이다.
- CSS 파일을 연결할 경우 사용하는 영역이기도 하다.
- 즉, 헤드는 사용자에게 보여지는 영역은 없고, 메타데이터만 존재한다고 생각하면 된다.
4) Body 태그
- Body 영역은 사용자에게 보여지는 가장 최상의 컨데이터 영역이다.
조금 더 자세히 살펴보자.
charset="utf-8"
- 8unit transformed format이라는 뜻을 갖는데, 우리 페이지에서 쓰여지는 charater set(문자 형식)은 utf-8에서 쓰여진다는 뜻이다.
- utf-8은 현존하는 모든 사람들이 쓰는 언어를 지원해준다.
meta name="viewport" content="width=device-width
- 지금 device screen의 너비를 다 사용한다고 정의한 것.
title
- 북마크 추가하거나 브라우저 검색할 때 보여지는 title 값
HTML 구조를 잘 파악하려면 어떻게 해야 할까..?
모든 웹사이트를 박스 안경 을 끼고 바라보자..!
하기 사진과 같이 어떤 웹사이트든 하난의 컴포넌트가 아닌 최고로 작은 단위로 쪼개서 작은 단위로 구현을 시작하는게 중요하다. 그렇기 때문에 사이트를 박스별로 나눠 구분하는 연습을 할 때, 웹사이트 개발을 할 때 유용한 무기가 될 수 있다. ⚒
단, 너무 세세하게 박스를 나눌 경우 브라우저 성능이 낮아질 수 있음으로 너무 세밀하게 나누지는 않아야 한다. ex) 태그 하나하나별로 나누지는 X
(출처 : 드림 코딩)
[참고자료]
a) Validator Wc (내가 쓴 태그 값이 유효한 태그값인지 확인하고 싶을 경우)
웹개발 공부 스터디로그