2022. 12. 20. 10:26ㆍ코딩배움일지/Web 구현
HTML은 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어
HTML 문서의 기본 구조
<!DOCTYPE html> 또는 <!doctype html>
웹 브라우저에게 ‘이제부터 처리할 문서는 HTML 문서라고 알려주는 것
웹 문서 시작을 알리는 <html> 태그
실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그
lang 속성을 사용해 문서에서 사용할 언어 지정
문서 정보를 지정하는 <head> 부분과 문서 내용을 입력하는 <body> 부분 포함
브라우저에게 정보를 주는 <head> 태그
문서 관련 정보 입력, 웹 브라우저 화면에는 보이지 않음.
문서에서 사용할 외부 파일 링크
웹 브라우저에 내용을 표시하는 <body> 태그
실제 브라우저에 표시될 내용 입력
대부분의 태그가 <body> 태그와 </body> 태그 사이에서 사용하는 태그들
웹 문서 구조를 만드는 시맨틱 태그
시맨틱(semantic) : 의미론적인, 의미가 통하는
이름만 봐도 의미를 알 수 있는 HTML 태그
왜 사용할까?
화면 낭독기 같은 보조 기기에서 사이트의 구조를 이해
할 수 있다
문서 구조가 정확히 나눠지므로 PC나 모바일 등
다양한 화면에서 웹 문서를 표현하기가 쉽다
웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수
있다
헤더 영역을 나타내는 <header> 태그
- 헤더 영역
- 사이트 전체의 헤더 or 특정 영역의 헤더
- 검색 창이나 사이트 메뉴 삽입
내비게이션 영역을 나타내는 <nav> 태그
- 내비게이션 영역
- 웹 문서 위치에 영향을 받지 않음
- 문서 안에 여러 개 만들 수 있음(id로
구분)
핵심 콘텐츠를 담는 <main> 태그
- 웹 문서에서 핵심이 되는 내용
- 웹 문서마다 다르게 보여주는 내용으로 구성
- 웹 문서에서 한 번만 사용
독립적인 콘텐츠를 담는 <article> 태그
- 독립된 웹 콘텐츠 항목
(따로 떼어도 콘텐츠가 되는 내용)
- <section> 태그를 포함할 수 있음
콘텐츠 영역을 나타내는 <section> 태그
- 콘텐츠 영역
- 몇 개의 콘텐츠를 묶는 용도로 사용
- css 적용을 위해 묶는 용도로 쓰지 말 것
사이드 바 영역을 나타내는 <aside>
- 본문 내용 외에 왼쪽이나 오른쪽,
혹은 아래쪽에 사이드 바 표시
- 필수 요소가 아니므로 필요할 경우에만 사용
푸터 영역을 나타내는 <footer>
- 사이트 제작 정보나 저작권 정보, 연락처 등
- 다른 시맨틱 태그 사용해 다양한 정보 포함
여러 소스를 묶는 <div>
- 소스를 묶는 용도
- 영역을 구별하거나 스타일 적용하기 위해
'코딩배움일지 > Web 구현' 카테고리의 다른 글
| Web 2일차 1-1(입력양식) (0) | 2022.12.21 |
|---|---|
| Web 2일차 1(태그) (0) | 2022.12.21 |
| Web 1일차 1-3() (0) | 2022.12.20 |
| Web 1일차 1-2( (0) | 2022.12.20 |
| Web 1일차 1(웹개발이란?) (0) | 2022.12.20 |