Chapter 9. Minimizing Markup

태그 최소화 하기

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로 감싸서 스타일을 적용할 필요가 없다.