CSS 선택자는 웹 개발자가 웹 페이지의 특정 요소 또는 요소 집합에 스타일을 적용할 수 있도록 해주는 강력한 도구입니다.
선택자를 다루다 보면 특정 속성을 가진 요소만 골라서 스타일을 지정하고 싶은 경우가 생깁니다. 바로 이럴 때 CSS 속성 선택자가 유용합니다. 속성 선택자를 활용하면 특정 속성을 지닌 요소에만 원하는 스타일을 정확하게 적용할 수 있습니다.
이 글에서는 CSS 속성 선택자를 활용해 요소에 스타일을 입히는 방법을 예제와 함께 자세히 살펴보겠습니다. 끝까지 읽고 나면 속성 선택자를 능숙하게 다룰 수 있게 될 것입니다.
HTML 속성(Attribute)이란?
HTML에서 속성(attribute)은 요소의 추가적인 특성이나 성질을 정의하는 데 사용됩니다. 예를 들어 height 속성은 이미지의 높이를 지정하고, title 속성은 웹 요소의 제목을 설정합니다.
속성은 이름/값(name/value) 쌍 구조로 선언합니다. 즉, HTML 파일에서 속성은 name="value" 형태로 표현됩니다. HTML 속성에 대해 더 깊이 알고 싶다면 별도의 HTML 속성 가이드 문서를 참고하시기 바랍니다.
CSS 속성 선택자란?
사이트를 디자인할 때 요소가 특정 속성 값을 가지고 있는지 여부에 따라 스타일을 적용하고 싶은 경우가 있습니다. 이때 CSS 속성 선택자를 사용합니다.
속성 선택자를 사용하는 방법은 크게 두 단계로 나눌 수 있습니다.
- 대괄호([]) 안에 속성 이름을 넣습니다.
- 해당 이름의 속성을 가진 요소에 적용할 스타일을 지정합니다.
지금부터 몇 가지 예제를 통해 CSS 속성 선택자가 실제로 어떻게 동작하는지 하나씩 살펴보겠습니다.
CSS [attribute]
속성 선택자의 가장 기본적인 형태는 [attribute]입니다. 간단히 말해, 대괄호 안에 속성 이름을 넣으면 됩니다.
예를 들어, title 속성을 가진 모든 요소의 글꼴 크기를 16px로 설정하고 싶다고 가정해 보겠습니다. 다음 코드를 사용하면 됩니다.
[title] {
font-size: 16px;
}
위 CSS 규칙은 title 속성을 가진 요소에만 적용됩니다. title 속성이 지정된 모든 요소는 그 속성 값이 무엇이든 상관없이 위 규칙에 따라 글꼴 크기가 16px로 변경됩니다.
속성 선택자를 더 정밀하게 만들고 싶다면 아래 항목 중 하나 또는 둘 다를 함께 지정할 수 있습니다.
- 규칙을 적용할 특정 요소 타입
- 속성의 ID 값(예: 텍스트의 "title", 링크의 "href", 모든 요소의 "class")
예를 들어, title 속성을 가진 모든 문단(p) 요소의 글꼴 크기를 16px로 설정하고 싶다면 다음과 같이 작성할 수 있습니다.
p[title] {
font-size: 16px;
}
선택자 맨 앞의 p는 브라우저에게 해당 글꼴 스타일을 <p> 태그에만 적용하라고 지시합니다. 그리고 [title] 부분은 title 속성이 지정된 <p> 태그에만 스타일을 적용하라고 알려줍니다.
따라서 브라우저는 이 코드를 읽고 title 속성을 가진 모든 문단의 글꼴 크기를 16px로 변환합니다. 이 코드는 페이지의 다른 텍스트에는 영향을 주지 않습니다.
CSS [attribute="value"]
[attribute="value"] 속성 선택자를 사용하면 속성 값이 선택자에 지정된 값과 정확히 일치하는 요소에만 스타일을 적용할 수 있습니다.
예를 들어, Career Karma 홈페이지로 연결되는 모든 링크의 배경색을 주황색으로 설정하고 싶다고 가정해 보겠습니다. 다음 CSS 코드로 이를 구현할 수 있습니다.
a[href="careerkarma.com"] {
background-color: orange;
}
이 규칙은 페이지의 모든 <a> 요소 중 href 속성 값이 careerkarma.com인 것들을 선택한 뒤, 해당 요소들의 배경색을 주황색으로 설정합니다.
CSS [attribute~="value"]
[attribute~="value"] 선택자를 사용하면 속성 값에 특정 단어가 포함된 요소를 선택할 수 있습니다.
예를 들어, title 속성 값에 "blue"라는 단어가 포함된 모든 p 요소에 스타일을 적용하고 싶다고 가정해 보겠습니다. 이 스타일은 해당 요소들의 텍스트 색상을 파란색으로 변경해야 합니다.
다음 규칙으로 이 작업을 수행할 수 있습니다.
p[title~="blue"] {
color: blue;
}
이 규칙은 "blue"라는 단어가 포함된 title을 가진 모든 <p> 태그를 찾아, 그 안의 텍스트 색상을 파란색으로 설정합니다. 따라서 title이 blue color나 color blue인 <p> 태그에는 이 스타일이 적용됩니다. 하지만 title이 blueColor인 <p> 태그에는 적용되지 않는데, 이는 "blue"라는 단어가 독립적으로 존재하지 않기 때문입니다.
이는 *= 선택자와 차이가 있습니다. *= 선택자는 속성 내에서 특정 단어뿐 아니라 문자열의 일부인 특정 값도 찾을 수 있습니다.
CSS [attribute|="value"]
[attribute|="value"] 선택자를 사용하면 지정된 값(예: "top")으로 시작하는 속성을 가진 요소를 선택할 수 있습니다. 여기에는 지정된 값으로 시작하면서 하이픈(-)과 추가 텍스트가 붙은 속성(예: "top-style" 등 "top-"으로 시작하는 값)을 가진 요소도 포함됩니다. 참고로 이 선택자는 세로 막대(|) 기호를 사용한다는 점에 유의하세요.
예를 들어, class 속성이 top으로 시작하는 모든 <div> 요소(하이픈으로 구분된 다른 값이 뒤따르는 경우 포함)에 10px의 위쪽 패딩을 지정하고 싶다고 가정해 보겠습니다. 다음 코드를 사용하면 됩니다.
div[class|="top"] {
padding-top: 10px;
}
이 규칙은 class 이름이 top으로 시작하는 모든 <div> 요소, 즉 top-으로 시작하는 클래스 이름을 가진 요소들에도 위쪽 10px 패딩을 적용합니다.
주의할 점은 지정하는 값이 반드시 단독 단어이거나 단어 뒤에 하이픈이 붙은 형태여야 한다는 것입니다. 즉, 위 스타일은 class 이름이 top style이나 top-style인 <div> 요소에는 적용되지만, topstyle인 <div> 요소에는 적용되지 않습니다.
CSS [attribute^="value"]
[attribute^="value"] 선택자는 속성 값이 특정 값으로 시작하는 요소를 선택할 때 사용합니다. 앞서 살펴본 [attribute|="value"] 선택자와 달리, 지정하는 값이 반드시 온전한 단어일 필요는 없습니다.
예를 들어, class 속성이 paddingBottom으로 시작하는 모든 <div> 요소에 10px의 아래쪽 패딩을 적용하고 싶다고 가정해 보겠습니다. 다음 코드를 사용하면 됩니다.
div[class^="paddingBottom"] {
padding-bottom: 10px;
}
브라우저는 class 이름이 "paddingBottom"으로 시작하는 모든 <div> 태그에 우리가 정의한 padding-bottom 스타일을 적용합니다. 따라서 "paddingBottomStyle"이라는 클래스가 있다면 이 스타일이 적용됩니다. "paddingBottom", "paddingBottom-element" 같은 클래스에도 마찬가지로 적용됩니다. 반면 "new-paddingBottom"처럼 "paddingBottom"으로 시작하지 않는 클래스에는 적용되지 않습니다.
CSS [attribute$="value"]
$= 연산자는 속성 값이 특정 값으로 끝나는 모든 요소를 선택할 때 사용합니다. 예를 들어, href 속성 값이 .app으로 끝나는 모든 하이퍼링크 텍스트의 색상을 회색으로 변경하고 싶다고 가정해 보겠습니다. 다음 코드를 사용하면 됩니다.
a[href$=".app"] {
color: gray;
}
이 선택자는 페이지의 모든 <a> 요소 중 href 값이 .app으로 끝나는 것들에 적용됩니다.
CSS [attribute*="value"]
*= 연산자를 사용하면 속성 값에 특정 값이 포함된 모든 요소를 선택할 수 있습니다. ~= 연산자와 달리, 이 속성 선택자는 클래스 내에서 단일 단어가 아닌 특정 값(문자열 일부)도 찾을 수 있습니다.
예를 들어, class 속성에 allPadding이 포함된 모든 <div> 태그 주변에 50px의 패딩을 적용하고 싶다고 가정해 보겠습니다. 다음 규칙을 사용하면 됩니다.
div[class*="allPadding"] {
padding: 50px;
}
이 규칙은 class 속성에 allPadding이라는 문자열이 포함된 모든 HTML 요소에 50px 패딩을 설정합니다. 따라서 new allPadding, surround allPadding red, allPaddingblue, allPadding-true 같은 클래스 이름을 가진 요소들이 모두 이 스타일의 대상이 됩니다.
결론
CSS 속성 선택자를 사용하면 개발자는 요소의 속성 값을 기준으로 요소를 선택하고, 해당 요소에 특정 스타일을 적용할 수 있습니다.
이 글에서는 예제와 함께 속성 선택자의 기본 개념과 CSS 속성 선택자의 모든 종류를 사용하는 방법을 살펴보았습니다. 이제 여러분도 프로처럼 CSS 속성 선택자를 활용해 더욱 정교하고 유연한 스타일링을 구현할 준비가 되었습니다.