Class Selector

class를 이용한 선택자는 가장 많이 사용하는 일반적인 패턴이다. class는 중복을 허용하므로 동일한 Style 처리를 하고자 할 경우에 장점을 갖는다. 또한 class는 한 요소에게 두 개 이상의 값을 가지게 할 수 있으므로 요소간의 스타일 처리를 체계적으로 지정할 수 있다. 즉, 요소들의 중복된 디자인 처리를 그룹으로 묶어서 class로 관리할 수 있기에 효율적인 코드 설계가 가능하다.

<h1 class="big-title underline">Class Selector</h1>
<p class="underline">class 애트리뷰트의 값을 사용한 선택자</p>

.big-title {
  font-size: 30px;
}
.underline {
  border-bottom: 1px solid #FF00FF;
}