[ 코딩 20 ] html 시멘틱 태그 알아보기

 

[ 코딩 20 ] html 시멘틱 태그 알아보기

 

 

 

 

시멘틱 태그는 영역별로 의미를 부여하여 공간을 분리해주는 역할을 한다. 

 

 

header, nav, section, article, aside, footer가 기본적으로 많이 사용된다.

 

 

시멘틱 태그를 사용 안해도 웹페이지를 구현하는데는 지장이 없다. 

 

 

하지만, 시멘틱 태그를 사용하면 작업한 코드를 더 쉽게 확인 할 수 있으며, 

css(=디자인) 작업시 편리하다.

 

 

무엇보다 직장에서는 혼자 일하는 게 아니기 때문에, 

코드를 보기 쉽게 정리하는 게 좋다. 

 

 

 

 

 

 

 

그럼 시멘틱 태그는 어떻게 사용하는 걸까?

 

 

 

 

 

<header>맨 위쪽 공간에 들어갈 내용과 태그 전체를 묶어준다 </header>

 

 

위 이미지를 보면 헤더가 로고와 로그인, 장바구니 전체를 감싸고 있는 걸 볼 수 있다. 

 

 

이처럼 header는 맨 위쪽 공간을 묶어주는 용도로 쓰인다는 걸 알 수 있다. 

우리가 인터넷 쇼핑몰에서 흔히 보이는 로고, 로그인, 장바구니, 회원가입, 메뉴 등이 

헤더 영역이라고 보면 된다. 

 

 

 

 

 

 

 

<nav>네비게이션으로 메뉴 내용과 태그를 묶어준다</nav>

 

 

위 이미지에 들어가 있는 내용은 여성의류쇼핑몰에 있는 메인메뉴의 구성이다. 

이처럼 nav 태그는 메뉴를 묶어주는 공간 태그이며,

헤더 안에 포함되어 상단메뉴를 묶어주기도 한다 (메인메뉴를 헤더에 포함하여 묶어도 됨)

 - 상단 메뉴는 보통 로그인,장바구니 등 맨 위쪽에 적히는 메뉴를 말한다. 

 

 

 

 

 

 

<section>컨텐츠의 주요 내용을 묶어주는 역할을 한다.</section>

 

 

<article>글자와 이미지가 들어가 있는 부분을 묶어주는 역할을 한다. </article>

 

 

위 이미지의 내용을 읽어보면, 

section 안에 article이 들어가 있는 걸 볼 수 있다. 

 

 

화장품을 예로 들어보자면, 

메인페이지에서 베스트상품 / 신상품 / 공지사항처럼 큰 단위는 section으로 묶어주고,

 

 

베스트상품 안에 > 주름 싹~ 아이크림 / 기미야 물러가라! 크림 / 수분 촉촉! 로션 처럼 

이미지와 글씨로된 구성 상품을 article로 묶어주면 된다. 

 

 

 

 

 

 

<aside>보통 홈페이지에서 오른쪽에 붙어 있는 퀵메뉴로 많이 사용된다. </aside>

 

 

 

 

 

 

<footer>맨 아래쪽에 내용을 묶어준다</footer>

 

 

웹페지를 방문하게 되면 맨 아래쪽에 빼곡하게 쓰여져있는 글씨들을 볼 수 있다. 

 

 

회사에 대한 정보가 적혀있는데, 그 부분의 내용을 묶어주는 역할을 한다고 보면 된다. 

 

 

그 외에도 더 많은 종류가 있겠지만, 

나도 아직 배워가는 단계로 가장 많이 사용해봤던 다섯가지의 시멘트 태그를 포스팅해보았다.