html 알아보기 - 시멘틱 웹과 div 태그

 

 

시멘틱 웹 이란

시멘틱 웹이란, 각 부분에 메타데이터를 부여하여 웹 페이지에 의미를 부여하는 설계 방식입니다.

쉽게 말하자면, 웹의 각 부분에 별명을 붙이는 방식이라 생각하시면 됩니다.

그렇다면, 시멘틱 웹을 한다면 어떤 점이 좋을까요?

 

 

 

시멘틱 웹의 장점

1. 시스템적 장점

 

스크린 리더

스크린 리더란, 컴퓨터나 모바일 화면의 텍스트를 읽어주는 소프트웨어로, 주로 눈이 불편하신 분들이 사용합니다.

시멘틱 웹은 스크린리더에게 푯말을 제공하여 탐색이 쉽도록 도와줍니다.

 

검색엔진

마찬가지로, 검색엔진 또한 시멘틱 태그를 통해 상호작용할 수 있게 되므로, 효율성이 향상됩니다.

 

 

2. 효율성 향상

시멘틱 웹은 직관적인 별명을 붙여주기 때문에, 개발자는 태그안에 채워질 데이터 유형을 추측할 수 있습니다.

따라서 협업시, 또는 유지 보수 시 효율성이 향상됩니다.

 

 

 

시멘틱 웹 구조

https://www.w3schools.com/html/html_layout.asp 참조

header

가장 윗부분, 웹의 머리를 의미합니다

전체 웹 페이지에서 단 하나만 사용합니다.

 

nav

현재 페이지 위치나 다른 페이지에 대한 숏컷을 제공하는 태그입니다.

주로 header 영역에서 사용합니다.

 

main

웹의 주요 콘텐츠 영역으로, 주요 내용을 감쌉니다.

body 태그에 하나만 존재합니다.

 

aside

별도 구획 요소로, 사이드바를 만들 때 사용합니다.

nav와 비슷하지만, main 영역 내부에서 주로 사용합니다.

 

article과 section

두 태그 모두 일반 구획요소로, 단독 콘텐츠인 경우 article, 아닌 경우 section을 사용합니다.

 

footer

웹의 맨 아랫부분으로, 웹 페이지 정보, 연관된 사이트, 연락처, 저작권 문구 등을 포함합니다.

전체 웹 페이지에서 단 하나만 사용합니다.

 

 

 

 

구획을 지정하는 div 태그

div 태그는 순수 컨테이너 태그로, 아무것도 표현하지 않습니다.

다만, 구획을 나누어 사용하거나, 스타일을 적용하는데 사용합니다.

 

이전의 span 태그와 비슷하지만, block 속성 태그라는 점에서 차이점을 가집니다.