- 분류 전체보기 (61)
Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
Tags
- js
- frontend
- display
- 친해지기
- DOM
- tailwindcss
- 웹폰트
- 코드다이어리
- sass
- 코드일기
- HASH
- CLASS
- Coda
- property
- 정규식표현
- CSS
- 코딩테스트
- regexp
- 코딩일기
- column-gap
- JavaScript
- Flex
- Pseudo
- row-gap
- Grid
- 선택자
- HTML
- 가상클래스
- 코딩문제
- 코딩퀴즈
Archives
- Today
- Total
< Code diaries />
TAG 01 - 영역을 분리하는 태그 본문
HTML(Hyper Text Markup Language)
<body> 안에 마크업 할 수 있는 HTML TAG 종류에 대하여 알아봅시다~!
01. 영역의 의미를 정의하는 태그목록
| Tag | Description | Meaning |
| <header> | 머릿말 태그로, <body>태그의 child element일때에는 문서의 머릿말 역할로써, 로고, 메뉴등을 넣어 문서의 헤더영역을 나타낸다. 하지만, <section> 태그에 넣으면, 그영역의 머릿말로 해석될 수 있으며, <footer> 태그에 넣을 수 없다. 적어도 하나의 헤딩요소 사용을 권장한다. |
|
| <main> | 문서의 메인영역을 나타내는 태그로써, 한 문서에 한번만 사용할 수 있다. 구 브라우저대응을 위해 role = "main" 속성을같이 사용하는 것이 좋다. |
|
| <footer> | 꼬릿말 태그로, <body> 태그의 child element일때에는 문서의 꼬릿말 역할로써, copyright정보 address등을 넣어 저작권자의 정보를 넣어준다. 또한, <nav>태그도 내부에 들어올 수 있다. <section>태그에 넣을경우, 그 영역의 꼬릿말로 해석될 수있으며, <header> 태그에 넣을 수 없다. |
|
| <section> | 의미론적으로 영역을 구분할 때 사용한다. 적어도 하나의 헤딩요소 사용을 권장한다. |
|
| <article> | 제목과 내용이 있는 하나의 기사영역과 같은 의미로 사용되고, 보통 <section>보다 작은 개념이지만, 상황에 따라 내부에 <section>이 들어와도 상관없다. 적어도 하나의 헤딩요소 사용을 권장한다. |
|
| <nav> | 문서의 주요메뉴 링크를 넣는 영역이며, 내부에 보통 목록태그와 같이 사용한다. |
Navigation |
| <aside> | 작성하고 있는 문서의 내용과 상관없는 영역을 묶는다. (배너, 퀵메뉴 등) |
|
| <figure> | 그래프, 표, 이미지등을 묶는 용도로 사용한다. | |
| <figcaption> | <figure>태그의 첫번째, 또는 마지막 child element로만 사용되며, 단독으로 사용할 수 없다. |
|
| <template> | javascript 에서 사용하기위한 태그이다. |
02. 사이트 분석 : 네이버 홈화면의 영역은 어떻게 분리 되었는지 살펴보자(2024년 6월기준)
( www.naver.com )
[ 먼저, header로 나눈 부분 ]
[ footer로 나눈 부분 ]
03. SKsignet - US 반응형 사이트
( www.sksignet.us )
상단부분에 <header>태그를 쓰거나, 명칭하지는 않았지만 메뉴부분에 <nav> 시멘틱 태그를 사용하고, 주요 메뉴를 <ul>태그로 작성한 것을 볼 수 있다.
또한, 본문 전체를 <main>태그로 묶고, 각 영역을 <section> 태그로 관리하고 있다는 것을 알 수 있다.
하단의 저작권자 정보 및 약관이 들어간 부분을 <footer>로 마크업 한 것도 볼 수 있다.
04. 롯데타워 홈페이지
( www.ltw.co.kr )
위의 영역을 <header> 태그로 마크업 하였다.
본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.
힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.
제 피드를 공유하거나 링크를 해주시는것은 감사합니다~
하지만, 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^
감사합니다.
반응형
'Html' 카테고리의 다른 글
| TAG 04 - 표를 만드는 태그 (0) | 2024.06.06 |
|---|---|
| TAG 02 - 제목과 글자를 다루는 태그, 기타 태그 (4) | 2024.06.06 |
| 우리가 공부할 HTML tag list (0) | 2024.06.06 |
| HTML Markup 방법과 DOM 트리구조 (2) | 2024.06.06 |
| HTML - 무엇인지 스치듯이 알아봅시다~! (2) | 2024.06.06 |
'Html' Related Articles
more
