5. 구조를 나타내는 요소

1. 컨테이너 (div, span)

div

• division
• 특정 구역을 분할하거나 묶을 때 사용
• 내부의 내용이 없다면 눈에 보이지 않음!
• 순수 컨테이너로서 아무것도 표현하지 않는다.
• block level
• 전역 특성만 표현한다.

span

• 구문 컨텐츠를 위한 통용 inline level
• 순수 컨테이너로서 아무것도 표현하지 않는다.
• 공유하는 요소를 묶을 때 사용한다.

2. 시멘틱 웹이란

• Semantic : 의미의, 의미론적인
• 요소의 의미를 고려하여, 구조를 설계하고 코드를 작성한다.

의미론적인 마크업을 사용했을 때의 장점

• 검색 엔진의 SEO
• 시각장애인을 위한 스크린리더 (웹 접근성)
• 의미가 없는 div 를 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 쉽다
• 개발자에게 태그 안에 채워질 데이터 유형을 제안한다.
• 의미있는 이름짓기는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기를 반영한다.
• 무분별한 non-semantic tag(div) 사용 지양하기

3. header, footer

• semantic tag 에 해당

• header : 소개 및 탐색에 도움을 주는 컨텐츠 (제목, 로고, 검색 폼, 작성자 이름)
• header는 웹페이지에서 only 1
• 대부분의 웹페이지는 어느 페이지든 header와 footer 가 동일하다
• header 안에 header 안된다
• article 하나에 제목을 담기 위해 header 를 이용하기도 한다
• footer : 구획의 작성자, 저작권 정보, 관련 문서 등의 내용
• footer 안에 header 넣을 수 없다

4. nav

• 탐색 구획 요소 : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획 (메뉴, 목차, 색인)
• footer 의 메뉴는 페이지 전체 포괄이지만 nav 의 메뉴는 현재 위치의 상위 메뉴와 같이 사용되므로 설계 시, 고려해보기

5. aside

• 별도 구획 요소 : side 바에 많이 쓰인다.
• 추가적인 광고 부분
• aside가 없다해서 main에 문제가 되지 않는 내용을 담는다.

6. main

• body 태그의 하위 태그로서, only 1
• 주요 컨텐츠
• 여러 개를 쓰고 싶다면 1개를 제외한 나머지는 hidden
• 익스플로어 에서는 작동하지 않는다.

7. article

• 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획 (게시판, 블로그 글, 메거진, 뉴스기사)
• 다른 곳으로 옮겨도 단독 컨텐츠가 될 수 있는 부분
• heading tag 사용 많이 한다.

8. section

• 일반 구획 요소 : html 문서의 독립적인 구획을 나타낸다.
• article과 비슷하지만 article이 될 수는 없는 것이 section
• article 안에 section 사용 가능하다

나의 회고 🤫

시멘틱 웹을 들어만 봤지 정확한 뜻을 알지 못했다. 그러다보니 평소 내 코딩스타일은 div 에 class 명을 주거나, 스타일 컴포넌트명으로 해당 구획의 의미를 나타내고는 했는데, 앞으로는 오늘 배운 시멘틱 태그를 사용해서 그 의미를 좀 더 분명하게 나타내야겠다. 어제부터 단순히 사용만 해오던 태그들의 의미를 배우면서 내가 그동안 얼마나 야매로 코딩을 하고 있었는지 절실히 깨닫고 있다 😭