태그 최소화 하기

Descendant Selectors

<div id="sidebar">

  <h3>About This Site</h3>

  <p>This is my site.</p>

  <h3>My Links</h3>

  <ul>

    <li><a href="archives.html">Archives</a></li>

    <li><a href="about.html">About Me</a></li>

  </ul>

</div>

#sidebar h3 {

  font-family: Georgia, serif;

  color: #c63;

  border-bottom: 1px solid #ccc;

  }



#sidebar ul {

  list-style-type: none;

  }



#sidebar li {

  font-weight: bold;

  }
  • 하위 태그들의 스타일을 위와 같이 정의하면, 하위 태그들에 굳이 class 속성을 추가하지 않아도 된다.

The Unnecessary <div>

<ul id="nav">

  <li><a href="archives.html">Archives</a></li>

  <li><a href="about.html">About</a></li>

</ul>
  • block 엘리먼트는 굳이 div로 감싸서 스타일을 적용할 필요가 없다.