클래스 이용하기

클래스는 같은 스타일을 적용할 특정 요소들을 지정할 수 있다. 또한 id와는 다르게 여러 번 사용할 수 있다.

<p class="daily-goal">Repeat what i learned about HTML & CSS</p>
<p class="daily-goal">Do the exercises on HTML & CSS</p>

와 같이 class 속성을 정의한 후 CSS파일에서

.daily-goal {
  margin: 12px;
  color: rgb(71, 29, 22);
}

처럼 클래스를 지정하여 사용하면 된다. 이름 앞에 '.' 입력하는거 까먹지말자.

하지만

main p{
    margin: 12px;
    color: rgb(71, 29, 22);
}

.daily-goal {
  margin: 12px;
  color: rgb(71, 29, 22);
}

처럼 결합자와 클래스가 겹칠 때는 우선순위 개념이 적용된다. 우선 순위면에서 클래스가 더 구체적이므로 여기서는 클래스의 규칙이 적용된다.