CSS 속성 선택자: 웹 요소들을 더욱 정교하게 제어하는 방법

웹 디자인에서 공통된 스타일을 적용하기 위해 클래스를 따로 추가하는 경우가 흔합니다.
이는 일관된 디자인을 유지하고 코드를 재사용하기 쉽게 만들어줍니다.

예를들면 다음과 같습니다.

<div class="badge badge-green">Green</div>
<div class="badge badge-yellow">Green</div>

HTML

.badge {
  font-weight: 600;
  font-size: 14px;
  padding: 2px 6px;
}

.badge-green {
  color: green;
}

CSS

위의 예시에서 볼 수 있듯이, ‘badge’ 클래스는 일반적으로 배지 디자인을 정의하고, ‘badge-green’과 ‘badge-yellow’ 클래스는 각각 녹색과 노란색 배지의 스타일을 추가합니다. 이렇게 하면 비슷한 요소들에 쉽게 일관된 스타일을 적용할 수 있기에 많은 사람들이 이런 방식으로 코드를 작성하고 하는것을 볼 수 있습니다.

위 예문은 2개의 박스에 색상만 있지만 색상이 다양해지고, 박스의 크기나 다른 효과들이 늘어나거나 한다면 클래스는 점점 여러개로 늘어나게되고 코드는 복잡해지기 시작합니다.
이런 경우 아래와 같은 속성 선택자를 이용하게되면 하나의 클래스만 사용하더라도 다양한 공통 속성을 적용할 수 있습니다.

각 선택자에 대한 설명과 예시를 포함하여 전반적으로 살펴보도록 하겠습니다.

^= (Starts With)

설명: 이 선택자는 특정 문자열을 포함하는 클래스를 선택합니다.

예시:

<div class="btn-primary">Primary Button</div>
<div class="btn-secondary">Secondary Button</div>
<div class="btn-large-primary">Large Primary Button</div>
<div class="not-a-button">Not a Button</div>

HTML

div[class*="primary"] {
    /* primary를 포함하는 클래스를 가진 모든 div 요소를 선택합니다. */
    /* 예를 들어, btn-primary, btn-large-primary 등이 여기에 포함됩니다. */
    /* 이 스타일을 적용하세요 */
    font-weight: bold;
}

CSS

$= (Ends With)

설명: 이 선택자는 특정 접미사를 가진 클래스를 선택합니다.

예시:

<div class="btn-primary">Primary Button</div>
<div class="btn-secondary">Secondary Button</div>
<div class="btn-large-primary">Large Primary Button</div>
<div class="not-a-button">Not a Button</div>

HTML

div[class$="primary"] {
    /* primary로 끝나는 클래스를 가진 모든 div 요소를 선택합니다. */
    /* 예를 들어, btn-primary, btn-large-primary 등이 여기에 포함됩니다. */
    /* 이 스타일을 적용하세요 */
    background-color: yellow;
}

CSS

*= (Contains)

설명: 이 선택자는 특정 문자열을 포함하는 클래스를 선택합니다.

예시:

<div class="btn-primary">Primary Button</div>
<div class="btn-secondary">Secondary Button</div>
<div class="btn-large-primary">Large Primary Button</div>
<div class="not-a-button">Not a Button</div>

HTML

div[class*="primary"] {
    /* primary를 포함하는 클래스를 가진 모든 div 요소를 선택합니다. */
    /* 예를 들어, btn-primary, btn-large-primary 등이 여기에 포함됩니다. */
    /* 이 스타일을 적용하세요 */
    font-weight: bold;
}

CSS

|= (Dash Match)

설명: 이 선택자는 하이픈으로 구분된 값을 가진 클래스를 선택합니다.

예시:

<div lang="en">English Content</div>
<div lang="en-us">English (United States) Content</div>
<div lang="en-uk">English (United Kingdom) Content</div>
<div lang="fr">French Content</div>

HTML

div[lang|="en"] {
    /* lang 속성이 'en'으로 시작하는 모든 div 요소를 선택합니다. */
    /* 예를 들어, lang="en", lang="en-us", lang="en-uk" 등이 여기에 포함됩니다. */
    /* 이 스타일을 적용하세요 */
    color: blue;
}

CSS

CSS 속성 선택자: 웹 요소들을 더욱 정교하게 제어하는 방법

^= (Starts With)

$= (Ends With)

*= (Contains)

|= (Dash Match)

관련