반응형
3. HTML의 요소(3)
4) 구조를 나타내는 요소
✔ 컨테이너 - <div>, <span>
<div>
<div>요소는 플로우 콘텐츠를 위한 통용 컨테이너이다.
- CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 아무 영향이 없음
- 의미가 없은 "순수" 컨테이너 : 의미를 가진 다른 요소가 없을 때 사용
- 다른 요소 여럿을 묶어 class나 id 속성으로 꾸미기 쉽도록 도움
- 문서의 특정 구역이 다른 언어임을 표시하는 용도로 사용
<span>
<span>요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너이다.
- 스타일을 적용하거나 lang등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용
- <div>와 매우 유사하지만 인라인 요소
- 아무 것도 나타내지 않음
✔ 시멘틱 웹(Semantic Web)
- Semantic : 의미의, 의미론적인
- 요소의 의미를 고려하여, 구조를 설계하고 코드를 작성함 : 협업 시 용이함!
의미론적인 마크업을 사용하면 다음과 같은 이점이 있다 :
- 검색 엔진은 의미론적 마크업을 분석하여 페이지와 검새 랭킹에 영향을 줄 수 있는 중요 키워드로 간주함
- 시각 장애가 있는 사용자가 스크린 리더로 페이지를 탐색할 때 의미론적 마크업은 푯말로 사용 가능함
- 의미가 없는 끊임없는 <div> 등을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉬움
- 개발자에게 태그 안에 채워질 데이터 유형을 제안함
- 의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(naming)를 반영함
✔ <header>, <footer>
1. header
<header>요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다.
- 제목, 로고, 검색 폼, 작성자 이름 등의 요소를 포함할 수 있음
- 다른 <header>또는 <footer>를 자손으로 둘 수 없음
2. footer
<footer>요소는 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타낸다.
- 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담음
- 다른 <header>또는 <footer>를 자손으로 둘 수 없음
✔ <nav>
<nav>요소는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타낸다.
- 메뉴, 목차, 색인 등에 자주 쓰임
- 주요 탐색 링크 블록을 위한 요소로, 모든 링크가 <nav>요소 안에 있을 필요는 없음
✔ <aside> : 별도 구획 요소
<aside>요소는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다.
- <nav>와 달리 링크를 넣지 않기 때문에 없어도 됨
- 주로 사이드바 혹은 콜아웃 박스로 표현함
✔ <main>
<main>요소는 문서의 주요 콘텐츠를 나타낸다.
- 문서의 핵심 주제, 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어짐
- 문서 당 하나의 main만 존재만 가능한다 : 여러 콘텐츠들을 모두 아우르는 컨테이너이기 때문
- IE에서 지원하지 않음
✔ <article>
<article>요소는 독립적으로 구분해 배포하거나 재사용할 수 있는 구획이다.
- 문서, 페이지, 애플리케이션 또는 사이트 안에서 독립적으로 존재할 수 있음
- 게시판, 블로그 글, 매거진, 뉴스 기사 등이 있음
- 주로 식별할 수 있는 제목 요소와 함께 사용함
✔ <section>
<section>요소는 HTML 문서의 독립적인 구획을 나타낸다.
- 더 적합한 의미를 가진 요소가 없을 때 사용
- 주로 제목을 포함하지만 항상 그런 것은 아님
<section>과 <article>은 서로의 태그 안에 사용할 수 있다.
반응형
