css_semantic tags

시멘틱 태그(semantic)?

 

의미론적인 태그. 특정한 태그에 의미를 부여해 브라우저와 개발자 모두에게 명확하게 설명이 가능하다.

 

HTML5 이전에는 <div>또는 <span>에 id와 class를 붙여 구역을 나누고 스타일을 지정함 ->복잡하고 지저분함

HTML5에서는 시맨틱태그를 사용하여 코드의 가독성을 높이고 명확히 함

<div class="header">        ->          <header>

 

 

 

 

<자주쓰이는 태그>

 

<article>

중심 내용의 글을 의미

 

<aside>

페이지의 내용 주변에 있는 글 (사이드에 위치한 공간)

 

<header>

상단의 머릿말 부분

 

<nav>

네비게이션 링크

 

<section>

문서의 본문

 

<footer>

최하단(footer 그 자체)

 

 

 

 

 

 

 

https://nonipc.com/entry/%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8semantic-tag-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95