KH_HTML_2_기본 문서 만들기
PUBLISHING
목록 보기숨기기2/6
HTML이란?
웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 마크업 언어이다.
HTML 문서의 기본 구조
1. <!doctype html> -> 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻.
2. <html> ~ </html> -> 웹 문서의 시작과 끝을 나타내는 태그이다. 웹 브라우저가 html태그를 만나면 /html 태그까지 소스를 읽어 화면에 표시하게 된다.
3. <head> ~ </head> -> 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분이다.
4. <body> ~ </body> -> 실제로 웹 브라우저 화면에 나타나는 내용이다. 앞으로 우리가 공부할 HTML 태그는 대부분 body태그 안에 들어있다.
HTML 문서의 기본 구조
<!DOCTYPE html> 또는 <!doctype html>
웹 브라우저에게 '이제부터 처리할 문서는 HTML문서이다' 라고 알려주는 것
웹 문서 시작을 알리는 html태그
실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그
lang 속성을 사용해 문서에서 사용할 언어 지정
문서 정보를 지정하는 head 부분과 문서 내용을 입력하는 body부분을 포함한다.
브라우저에게 정보를 주는 head 태그
문서 관련 정보 입력, 웹 브라우저 화면에는 보이지 않음.
문서에서 사용할 외부 파일 링크
문자 세트 등 문서 정보가 들어 있는 <meta> 태그
한글로 된 내용을 표시하기 위해서 UTF-8 문자 세트를 사용한다.
title 태그는 문서의 제목을 나타낸다.
제목은 Document
웹 문서 구조를 만드는 시맨틱 태그
시맨틱 태그를 사용하는 이유
화면 낭독기 같은 보조 기기에서 사이트의 구조를 이해할 수 있다.
문서 구조가 정확히 나눠지므로 pc나 모바일 등 다양한 화면에서 웹 문서를 표현하기가 수빈다.
웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.
헤더 영역을 나타내는 <header> 태그
- 헤더 영역
- 사이트 전체의 헤더 or 특정 영역의 헤더
- 검색 창이나 사이트 메뉴 삽입
내비게이션 영역을 나타내는 <nav> 태그
- 내비게이션 영역
- 웹 문서 위치에 영향을 받지 않음
- 문서 안에 여러 개 만들 수 있음(id로 구분)
핵심 콘텐츠를 담는 <main> 태그
- 웹 문서에서 핵심이 되는 내용
- 웹 문서마다 다르게 보여주는 내용으로 구성
- 웹 문서에서 한 번만 사용
독립적인 콘텐츠를 담는 <article> 태그
- 독립된 웹 콘텐츠 항목(따로 떼어도 콘텐츠가 되는 내용)
- <section> 태그를 포함할 수 있음
콘텐츠 영역을 나타내는 <section> 태그
- 콘텐츠 영역
- 몇 개의 콘텐츠를 묶는 용도로 사용
- css 적용을 위해 묶는 용도로 쓰면 안 된다.
사이드 바 영역을 나타내는 <aside>
- 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바 표시
- 필수 요소가 아니므로 필요할 경우에만 사용
푸터 영역을 나타내는 <footer>
- 사이트 제작 정보나 저작권 정보, 연락처 등
- 다른 시맨틱 태그를 사용해 다양한 정보 포함
여러 소스를 묶는 <div>
- 소스를 묶는 용도
- 영역을 구별하거나 스타일 적용하기 위해
댓글
댓글을 불러오는 중…