시멘틱 태그를 왜 써야해?
- semantic tag는 의미론적 태그라는 의미이다.
- 마치 집 내부를 공간의 쓰임새별로 현관, 거실, 안방 등으로 나누는 것처럼 각각의 코드블럭이 어떤 쓰임새를 가지는지 의미를 주는 것이다.
- 이를통해 코드의 의미를 보다 직관적으로 파악하고 접근할 수 있다면, 코드를 작성하거나 수정할 때 훨씬 쾌적하고 수월할 것이다.
- 무엇보다도 나를 위해서 시멘틱 태그를 잘 활용하여 직관적인 구조를 만들어야 한다.
주요 시멘틱 태그들의 의미
태그명 의미 header 웹페이지의 간판 nav 메뉴 바 aside 관계성이 적은 정보들(광고배너 등) main 주요 컨텐츠 article 개별 item section 유사 item들의 모음 footer 하단 바
시멘틱 태그 사용예시
- Only structure
<body> <header>header</header> <nav>nav</nav> <main> <aside>aside</aside> <section> <div>section</div> <article>article1</article> <article>article2</article> </section> </main> <footer>footer</footer> </body>
- Add style
<body> <header style=" padding: 1em; background: pink; text-align: center; font-weight: bold; font-size: 1.5em; color: white;"> header </header> <nav style=" padding: 0.5em; background: orange; text-align: center; font-weight: bold; font-size: 1.5em; color: white;"> nav </nav> <main style="display: flex; height: 40vh; color: white"> <aside style=" background: tan; flex-basis: 20%; text-align: center; font-weight: bold; font-size: 1.5em; padding-top: 18vh;"> aside </aside> <section style=" background: peru; flex-basis: 80%; text-align: center; align-content: space-around;"> <div style="padding: 0.2em 0 0 0;text-align: center; font-weight: bold; font-size: 1.5em"> section </div> <article style="background: burlywood; padding: 2em; margin: 2em"> article1 </article> <article style="background: burlywood; padding: 2em; margin: 2em"> article2 </article> </section> </main> <footer style=" background: pink; padding: 1em; text-align: center; font-weight: bold; font-size: 1.5em; color: white;"> footer </footer> </body>
참고자료
밥을 먹는것처럼 코딩하자