HTML 구조
다음은 기본적인 html 코드이다. 뭐가 뭔지 모르겠어도 한번 직접 분석해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
크게 보면 <html>태그 안에 <head>, <body>로 나뉘어져 있다.
대체적으로 태그들이 열고 닫는 형태임을 볼 수 있다. <meta /> 태그 처럼 그냥 혼자로만 닫는 태그(self-closing tag)도 있다.
몇몇 태그에는 부가적으로 속성이 있는걸 볼 수있다. 예를 들어 <html> 태그는 <html lang = "ko"> 이렇게 lang이라고 부가적으로 붙는 게 있다. 이런걸 속성(attribute) 라고 부른다.
코드를 순서대로 분석해보자면
- <!DOCTYPE html> : '이것은 html문서다!' 라고 알려주는 역할이다. 첫 라인에 필수적으로 넣어준다.
- <html lang ="ko"> : html코드의 시작점. lang속성은 검색엔진에게 주된 사용언어를 알려준다. (한국어: ko, 영어: en, 일본어: jp ...)
- <head> : 페이지 환경과 외부적으로 보여지지 않는 것을 설정해준다.
- <meta> : 문서 작성자나 문서 요약과 같이 문서를 설명하는 데이터 (아래 예시 이미지 참고)
- <meta charset="UTF-8" /> : 브라우저에게 text를 어떻게 그려야하는지 알려준다. 가끔 페이지가 '꿿쉛쑚§먋⊙ㅂ뼔▦' 이런 외계어같은 text들로 이루어진 걸 본적이 있을 것이다. 이건 UTF-8로 설정을 안해서 그렇다.
- <title> : 페이지 탭에 보이는 제목이다. (아래 예시 이미지 참고)
- <body> : 사용자가 볼 수 있는 content를 보여준다. 따라서 화면 상에 보여질 내용은 모두 <body> 태그에 있어야 한다.
- <h1>: 'Hello world!'를 화면에 띄운다. (더 자세한건 다음 장에..)
- <head> : 페이지 환경과 외부적으로 보여지지 않는 것을 설정해준다.
위 사진은 네이버 사이트의 head태그 부분이다. 아까 head태그는 사이트의 부가적인 정보라 하였다. 그리고 외부적으로 보여지지 않다고 했다. 저 내용들 자체를 네이버 사이트 자체에서 본 적 있는가?
이미지 맨 위에 동그라미 친 부분(탭 부분)이 head 태그에서 title 태그로 설정한 부분이다.
저 아이콘도 head에서 변경할 수 있다.
이 외에도 많은 태그들이 있다. 다음 장에서는 자주 쓰이는 html tag들을 다뤄볼 것이다.
'HTML & CSS' 카테고리의 다른 글
| CSS - 넘치는 글 scroll로 만들고 커스텀하기 > overflow (+ scroll 숨기기) (0) | 2022.02.18 |
|---|---|
| CSS - body의 height가 이상해요!(+ footer 하단 고정 안됨) (0) | 2022.01.23 |
| 웹 프론트(4) - HTML tag(1) (0) | 2022.01.09 |
| 웹 프론트(2) - 웹사이트를 구조화하는 연습을 하자 (0) | 2022.01.06 |
| 웹프론트(1) - HTML/CSS/JS 의 정의 및 역할 (0) | 2022.01.06 |