시맨틱 태그(semantic tag)의 중요성..

html5 이전과 다르게 html5에서는 시맨틱 태그를 사용해서 코드의 가독성을 높여 좀 더 읽기 쉽게 해준다.

css코드가 길어지다보니, class 명을 붙이더라도 수많은 div 속에서 html 전체구조가 들어오지 않았다.

    <div class="wrapper">
      <div class="flex__box">
        <div class="flex__child">
          <div class="flex__header">
            <span>E-Commerce</span>
          </div>
          <div class="flex__main">UNIF</div>
          <div class="flex__drawer">
            <div>Design & Development</div>
            <div>
              <div>2015 -> Present</div>
            </div>
          </div>
        </div>

div div div div div... 

나중엔 큰 섹션을 위한 div인지 섹션 속 div인지도 헷갈리기 쉬웠다.

니꼬쌤의 코드를 비교해보니

    <section>
      <div class="client">
        <div class="client__category">
          <span>Event</span>
        </div>
        <span class="client__name">
          잠비나이
        </span>
        <div class="client__btns">
            <span class="client__description">
              Music Band
            </span>
            <span class="client__btn">2015 &rarr; Present</span>
        </div>
      </div>
    </section>
    <footer>
      <span class="flower">🌸</span>
    </footer>
    <aside>
      <ul class="nav">
        <li class="nav__link">
        </li>
      </ul>
      <div class="posts">
        <div class="posts__post">
          <h3>Art News</h3>
          <h6>Someone launched a very interested product</h6>
        </div>
      </div>
    </aside>

section, footer, aside 등 시맨틱 태그를 이용하고있다.

div 연발이 아니라 읽는 사람도 코드가 훨~씬 눈에 잘 들어온다..

결국 시맨틱태그를 잘 활용한 코드가 유지보수성이 좋을 것!

검색, 웹접근성에도 유리하다고 한다.

 

앞으론 시맨틱태그를 더 활용하자.

 

https://www.w3schools.com/tags/default.asp