[css] 선택자 속기

22 Dec 2023

CSS 선택자를 작성할 때, 반복되는 속성을 간결하게 작성할 수 있는 속기를 활용하여 코드를 더욱 효율적으로 작성할 수 있습니다.

ID 및 Class 선택자

일반적으로 ID나 Class 선택자를 작성할 때, 아래와 같은 방법으로 반복될 수 있습니다.

#header {
  font-size: 16px;
  color: #333;
  background-color: #fff;
}

#content {
  font-size: 16px;
  color: #333;
  background-color: #fff;
}

#footer {
  font-size: 16px;
  color: #333;
  background-color: #fff;
}

이러한 경우, 아래와 같이 선택자 속기를 활용하여 반복을 줄일 수 있습니다.

#header, #content, #footer {
  font-size: 16px;
  color: #333;
  background-color: #fff;
}

상속 시 속기

상속받는 속성을 갖는 요소들에 대해 속기를 활용하여 코드를 작성할 수 있습니다.

예를 들어, 아래와 같은 방식으로 상속을 활용한 선택자를 작성할 수 있습니다.

#content p {
  font-weight: bold;
  font-size: 14px;
  line-height: 1.5;
}

#footer p {
  font-weight: bold;
  font-size: 14px;
  line-height: 1.5;
}

이 경우, 아래처럼 선택자 속기를 활용하여 코드를 효율적으로 만들 수 있습니다.

#content p, #footer p {
  font-weight: bold;
  font-size: 14px;
  line-height: 1.5;
}

마무리

CSS 선택자 속기를 활용하면 코드를 간결하게 작성할 수 있고, 유지 보수가 용이해질 뿐만 아니라, 가독성도 개선됩니다. 선택자 속기를 적극적으로 활용하여 효율적인 CSS 코드를 작성해보세요!

참고 자료: MDN Web Docs