📚 깔끔한 Styling을 위한 CSS 선택자 사용법
앞선 글을 통해 CSS 선택자에 대해 잠시 언급한 바 있다. CSS 선택자를 올바르게, 그리고 적절하게 사용하면 깔끔한 Styling을 통해 CSS를 작성 가능하다.
그동안 나의 CSS파일은 수많은 내용들로 가득차 있었다. 한 가지 수정사항이 생기면 그저 CSS 선택자를 추가하고, 이로 인해 중복적으로 코드를 작성함으로써 비효율적으로 코드를 작성하고, 선택자 간 충돌로 인해 오류가 생겼던 적도 많다.
이에, CSS 선택자 사용법에 대해 완벽히 숙지하고, 깔끔한 Styling을 하는 방법에 대해 알아보고자 한다.
CSS 선택자 사용법
📌 여러 선택자에 같은 규칙 적용하기 - 선택자 목록
여러 요소에 동일한 스타일을 적용하려면 콤마(,)로 선택자를 연결한다. 이렇게 하면 코드를 효율적으로 관리할 수 있다.
선택자1, 선택자2 {
스타일 선언;
}
📌 조건을 동시에 만족하는 요소 선택하기 - 선택자 붙여쓰기
특정 조건을 동시에 만족하는 요소를 선택하려면 선택자를 붙여 쓴다. 이를 통해 더 구체적인 요소를 타겟팅할 수 있다.
h2#mongolia.large.title {
스타일 선언;
}
📌 자식 결합자(Child Combinator) 사용하기
자식 결합자 '>'는 부모 요소의 직접적인 자식만을 선택하는 데 사용된다. 이를 통해 자식 요소에만 특정 스타일을 적용할 수 있다.
.article > img {
스타일 선언;
}📌 자손 결합자(Descendant Combinator)로 스타일 적용하기
자손 결합자 ' ' (스페이스)는 특정 요소의 모든 자손을 대상으로 한다. 이 방법은 특정 요소 내의 모든 특정 타입의 자손에 스타일을 일괄 적용할 때 유용하다.
.article img {
스타일 선언;
}
📌 가상 클래스로 상태에 따른 스타일 적용하기
가상 클래스는 요소의 특정 상태에 스타일을 적용할 때 사용된다. 대표적으로 :hover(마우스를 올렸을 때), :active(클릭한 상태), :visited(방문한 적이 있는 링크), :focus(포커싱 됐을 때)등이 있다. 이를 통해 사용자의 상호작용에 따른 동적인 스타일 변화를 구현할 수 있다.
a:hover { /*ex> 밑줄이 없는 링크에 마우스를 올렸을 때 밑줄이 생기도록 하려면 :hover를 활용*/
text-decoration: underline;
}
Outro
CSS 선택자의 사용은 웹 페이지 스타일링의 핵심이다. 하지만, 가장 중요한 것은 '균형'이라는 사실을 잊지 말자. 선택자를 배우고 나면 종종 코드를 지나치게 간소화하려는 시도로 인해 선택자를 과도하게 복잡하게 사용하는 경우가 있다.
나 또한 CSS 선택자 사용을 연습하는 과정에서 지나치게 복잡한 선택자 조합의 사용으로 내가 짠 코드에 나조차 헤매는 경험을 했던 기억이 난다. 이러한 경험은 지나치게 복잡하게 선택자를 조합하는 방식은 코드의 가독성을 떨어뜨리고, 추후 수정 시 어려움을 겪을 수 있다는 교훈을 나에게 제공해주었다.
실제로 일부 공식 문서에서는 클래스와 가짜 클래스를 조합하여 최대한 단순하고 명확하게 사용하는 것을 권장한다. 따라서, CSS 선택자의 다양한 기능을 활용해 효과적으로 스타일링하되, 복잡한 선택자의 사용은 피하는 것이 바람직하다고 보여진다.
앞으로도 CSS 선택자를 사용할 때는 항상 '단순함'과 '효율성' 사이의 균형을 고려해야 할 것을 명심해야겠다. 이를 통해 깔끔하고 직관적인 스타일링을 구현해보자.
공식문서: CSS-Tricks
