html ?
Hyper Text Markup Language , 웹 문서를 만드는 언어이다.
태그?
웹 브라우저가 어느부분이 제목,텍스트 또는 표인지 구별할 수 있도록 꼬리표를 붙여야한다.
이때 꼬리표를 태그(tag)라고 한다. 이름을 보고 의미를 유추할 수 있어 시맨틱 태그라고도 한다.
HTML 문서 기본구조
<!DOCTYPE html> //현재 문서가 HTML5언어로 작성한 웹문서이다.
<html lang = "ko"> //웹문서의 시작과 끝을 나타내는 태그
<head> // 웹브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분
<meta charset = "UTF-8">
<title> 기본문서 </title>
</head>
<body> //웹 브라웅저 화면에 나타나는 내용
</body>
</html>
시맨틱 태그
시맨틱 태그를 사용하는 이유 : 가독성이 좋아지기 때문이다.
주요 시맨틱 태그
<header>
헤더 영역을 의미한다. 사이트 전체의 헤더도 있지만 특정 영역의 헤더도 있다.
사이트에서 헤더는 주로 맨 위쪽이나 왼쪽에 있으며 , 검색 창 이나 사이트 메뉴를 삽입한다.
<nav>
네비게이션 영역을 나타낸다.
웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다.
<nav>태그는 웹 문서의 위치에 영향을 받지 않으므로 포함해서 사용하거나 독립적으로 사용할 수 있다.
<main>
핵심 콘텐츠를 담는다.
여기에는 메뉴,사이드 바, 로고처럼 페이지마다 똑같이 들어간 정보는 넣을 수 없고, 웹 문서마다 다르게 보여 주는 내용으로 구성한다. <main>태그는 웹 문서에서 한 번만 사용할 수 있다.
<article>
독립적인 콘텐츠를 담는다.
블로그의 포스트나 뉴스 사이트의 기사처럼 독립된 웹 콘텐츠 항목을 넣는다.
<section>
콘텐츠 영역을 나타낸다.
<article>태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고 <article>태그는 블로그의 포스트처럼
독립된 콘텐츠로 사용한다.
<aside>
사이드 바 영역을 나타낸다.
본문 내용 외에 왼쪽이나 오른쪽, 아래쪽에 사이드바를 만든다.
필수요소가 아니므로 필요한 경우에만 사용한다.
<footer>
맨 아래쪽에 있는 푸터영역을 나타낸다.
푸터에는 사이트 제작정보나 저작권 정보, 연락처 등을 넣는다.
<div>
여러 소스를 묶는다.
<header>,<section> 같은 시맨틱 태그가 나오기 전에는 헤더나 내비게이션, 푸터등을 구별할때
<div>태그를 사용했다.
'FE > HTML,CSS' 카테고리의 다른 글
| [HTML] Grouping Content | HTML Living Standard (0) | 2022.03.29 |
|---|---|
| [HTML] HTML태그 (0) | 2022.03.28 |
| [CSS] 기본선택자 정리 (0) | 2022.03.07 |
| [HTML] 입력 양식 작성 (0) | 2022.02.18 |
| [HTML] 웹문서 입력 태그정리 (0) | 2022.02.18 |