풀스택) 태그의 중요성

🐳 태그의 중요성

 

html요소를 생성할 때, 모든 요소를 div로 만들어 class로 구분할 수 있다. 

오래된 코드를 마주할 때 이런 경우가 많을 것이다. 

 

그러나, html에 태그가 괜히 여러가지 있는게 아니다.

태그가 달라도 div 다를 바가 없는 경우가 많은데, 이럴 때의 태그는 구분을 위함이다. 

 

---

 

📍 V1 : 모든 요소가 div

<!-- v1 -->
<h1 class="title">menu-box(v1)</h1>
<div class="menu-box">
  <div class="menu">
    <div class="menu-item">
      <div class="text">메뉴 아이템 1</div>
    </div>
    <div class="menu-item">
      <div class="text">메뉴 아이템 2</div>
    </div>
    <div class="menu-item">
      <div class="text">메뉴 아이템 3</div>
    </div>
    <div class="menu-item">
      <div class="text">메뉴 아이템 4</div>
    </div>
  </div>
</div>

 

 

 

📍 V2 : 덩어리 기준 전용태그 사용

<!-- v2 -->
<h1 class="title">menu-box(v2)</h1>
<nav class="menu-box">
  <div class="menu">
    <div class="menu-item">
      <div class="text">메뉴 아이템 1</div>
    </div>
    <div class="menu-item">
      <div class="text">메뉴 아이템 2</div>
    </div>
    <div class="menu-item">
      <div class="text">메뉴 아이템 3</div>
    </div>
    <div class="menu-item">
      <div class="text">메뉴 아이템 4</div>
    </div>
  </div>
</nav>

 

 

📍 V3 : 모든 요소에 적절한 태그 사용

<h1 class="title">menu-box(v4)</h1>
<nav class="menu-box">
  <ul class="menu">
    <li class="menu-item">
      <a href="#" class="text">메뉴 아이템 1</a>
    </li>
    <li class="menu-item">
      <a href="#" class="text">메뉴 아이템 2</a>
    </li>
    <li class="menu-item">
      <a href="#" class="text">메뉴 아이템 3</a>
    </li>
    <li class="menu-item">
      <a href="#" class="text">메뉴 아이템 4</a>
    </li>
  </ul>
</nav>

 

 

 

📍 V4 : 모든 요소에 적절한 태그 사용 + class 사용은 덩어리에만

<h1 class="title">menu-box-2</h1>
<nav class="menu-box-2">
  <ul>
    <li>
      <a href="#">메뉴 아이템 1</a>
    </li>
    <li>
      <a href="#">메뉴 아이템 2</a>
    </li>
    <li>
      <a href="#">메뉴 아이템 3</a>
    </li>
    <li>
      <a href="#">메뉴 아이템 4</a>
    </li>
  </ul>
</nav>


<!--
(최종, 쓸데없이 클래스를 많이 사용할 필요가 없다. 자식 및 후손 선택자로 클래스 낭비를 줄일 수 있음)
.menu-box-2 > ul {}
.menu-box-2 > ul > li {}
.menu-box-2 > ul > li > a {}
-->

 

 

---

✨ 결론

결국, 적절한 태그 사용과 과도한 클래스 사용의 자제는 깔끔한 코드와 코드 낭비를 줄여준다.