Chap 03. HTML 기본 문서 만들기
HTML 기본 문서 만들기
1. HTML 이란?
💡 H T M L
Hyper Text Markup Language
Hyper Text
- 문서를 서로 연결해주는 링크, 즉
웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어이다.
Markup
- 텍스트뿐만 아니라 이미지, 영상 등을 표시
- 마크업(표시하다)에 사용하는 꼬리표를 ‘태그(tag)’라고 함
✅ HTML은 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어!!
2. HTML 문서의 기본 구조
!doctype html 또는 !DOCTYPE html
웹 브라우저에게 ‘이제부터 처리할 문서는 HTML 문서야!’라고 알려주는 것
html ~ /html - 웹 문서 시작을 알리는 태그
실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그- lang 속성을 사용해 문서에서 사용할 언어 지정
- 문서 정보를 지정하는 부분과 문서 내용을 입력하는 부분 포함
head ~ /head - 브라우저에게 정보를 주는 태그
문서 관련 정보 입력, 웹 브라우저 화면에는 보이지 않음.- 문서에서 사용할 외부 파일 링크 (ex - css 파일)
body ~ /body - 웹 브라우저에게 내용을 표시하는 태그
실제 브라우저에 표시될 내용 입력- 대부분의 태그가 태그와 태그 사이에서 사용하는 태그들
title ~ /title - 문서 제목을 나타내는 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 문서 만들기</title>
.
.
.
.- 해당 코드에서 title에 '웹 문서 만들기'라고 적어놨기 때문에,
웹 페이지의 이름은 '웹 문서 만들기'라고 뜨게 된다
meta - 문자 세트 등 문서 정보가 들어 있는 태그
- 한글로 된 내용을 표시하기 위해서 UTF-8 문자 세트를 사용
- 이외에도 다양한 문서 정보를 지정
<meta charset="UTF-8">
.
.
.
<meta name="keywords" content="html의 구조"> <!-- 웹 문서의 키워드 -->
<meta name="description" content="html의 구조를 알아봅시다"> <!-- 웹 문서의 설명 -->
.
.3. 💥 태그 작성시 유의 사항
- 태그는 소문자로 쓴다!
- 여는 태그와 닫는 태그를 정확히 입력한다!
- 적당하게 들여쓰기를 한다!
- 일부 태그는 속성과 함께 사용한다!
4. 웹 문서 구조를 만드는 시맨틱 태그
header 태그 - 헤더 영역을 나타냄
- 헤더 영역
- 사이트 전체의 헤더 or 특정 영역의 헤더
검색 창이나 사이트 메뉴 삽입
nav 태그 - 내비게이션 영역을 나타냄
- 내비게이션 영역
- 웹 문서 위치에 영향을 받지 않음
- 문서 안에 여러 개 만들 수 있음 (id로 구분)
- 예 : <현대 로고와 내비게이션을 포함>
main 태그 - 핵심 콘텐츠를 담음
- 웹 문서에서 핵심이 되는 내용
- 웹 문서마다 다르게 보여주는 내용으로 구성
- 웹 문서에서 한 번만 사용
section 태그 - 콘텐츠 영역을 나타내는 태그
- 콘텐츠 영역
- 몇 개의 콘텐츠를 묶는 용도로 사용
- css 적용을 위해 묶는 용도로 쓰지 말 것
article 태그 - 독립적인 콘텐츠를 담는 태그
- 독립된 웹 콘텐츠 항목 (따로 떼어도 콘텐츠가 되는 내용)
- 태그를 포함할 수 있음
aside 태그 - 사이드 바 영역을 나타내는 태그
- 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바 표시
- 필수 요소가 아니므로 필요할 경우에만 사용
footer 태그 - 푸터 영역을 나타내는 태그
- 사이트 제작 정보나 저작권 정보, 연락처 등
- 다른 시맨틱 태그 사용해 다양한 정보 포함
div 태그 - 여러 소스를 묶는 태그
- 소스를 묶는 용도
- 영역을 구별하거나 스타일 적용하기 위해 사용하는 태그
Hi