웹 페이지에 CSS로 스타일을 적용하다 보면 페이지의 특정 부분만 골라서 스타일링하고 싶은 경우가 자주 생깁니다. 이때 하나 이상의 요소를 선택하는 방법 중 하나가 바로 ID와 클래스(Class) 속성을 활용하는 것입니다.
이 튜토리얼을 따라 하면서 인터랙티브 Codepen도 함께 만져보며 실습해 보세요!
ID 속성과 CSS 선택기
먼저 간단한 문단을 만들어 보겠습니다. <p> 태그를 사용합니다:
<p> Color this paragraph! </p>
ID는 단 하나의 요소를 고유하게 식별하기 위해 붙이는 유일한 식별자입니다. 관례상 id="NAME" 형태로 작성합니다.
문단에 색을 입히고 싶으니, 고유한 이름으로 지정해 보겠습니다.
<p id="paragraph-colored"> Color this paragraph! </p>
ID 식별자를 지정했다면, 같은 ID를 다른 요소에는 절대 사용하지 않아야 합니다. 브라우저는 오류를 내지 않지만, ID의 존재 의미가 사라지고 CSS도 의도한 대로 동작하지 않게 됩니다.
ID가 준비되었으니 이제 CSS에서 해시(#) 기호로 선택할 수 있습니다. p 태그를 보라색으로 바꿔 볼까요?
#paragraph-colored {
color: purple;
}정말 간단하죠? 😄
부트캠프 참여자의 81%는 수료 후 기술 분야 취업 전망에 대한 자신감이 높아졌다고 답했습니다. 지금 나에게 맞는 부트캠프를 찾아보세요.
부트캠프 수료생은 평균 6개월 이내에 커리어 전환을 마치고 첫 직장을 찾았습니다.
클래스 속성과 CSS 선택기
문단이 보라색으로 잘 칠해졌습니다. 이제 p 태그 아래에 아보카도 이미지가 여러 개 있다고 가정해 보겠습니다:
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado">
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado">
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado">
이 아보카도 개발자들을 어떻게 한꺼번에 식별하고 선택할 수 있을까요? ID는 사용할 수 없습니다. ID는 단 하나의 항목을 고유하게 식별하는 용도이기 때문입니다. 바로 이럴 때 클래스(class) 속성이 등장합니다.
클래스 속성은 class="CLASS_NAME" 형식으로 작성합니다. 하나의 클래스에 여러 멤버가 소속될 수 있으므로, 모든 아보카도 개발자 이미지에 다음과 같이 같은 클래스를 부여할 수 있습니다:
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado" class="avocado-devs">
훌륭합니다! 아보카도 이미지들에 "avocado-devs" 클래스가 할당되었습니다. 이제 점(.)으로 표현되는 CSS 클래스 선택기를 사용할 차례입니다. 아보카도 개발자들에게 filter 속성을 추가해 보겠습니다. 밤늦게까지 작업 중이라고 가정하고 색상을 100% 반전시켜 보죠.
.avocado-devs {
filter: invert(100)
}클래스를 사용하면 일종의 그룹을 만드는 셈이고, CSS 클래스 선택기를 통해 해당 그룹의 요소들에 원하는 스타일을 한 번에 적용할 수 있습니다.
일반 태그 선택기와 클래스 선택기 함께 사용하기
CSS에서 클래스를 선택할 때는 점(.) 선택기와 함께 일반 태그 선택기를 조합해서 사용하는 것이 좋습니다. 그 이유는 무엇일까요? 선택자가 구체적(specific)일수록 CSS가 훨씬 더 정확하게 적용되기 때문입니다.
CSS에서 일반 태그 선택기는 말 그대로 태그 이름을 그대로 참조합니다. 예를 들어 다음은 모두 유효한 태그 선택기입니다:
/* H1 */
h1{}
/* Paragraphs */
p{ }
따라서 이미지 선택기에 img 일반 태그를 포함해 리팩터링할 수 있습니다:
img.avocado-devs {
filter: invert(100)
}기능은 달라지지 않았지만, 코드가 커질수록 이러한 구체성(specificity)은 매우 중요해집니다. 코드 가독성도 좋아집니다. 다른 개발자들이 avocado-devs 클래스가 이미지를 가리킨다는 것을 바로 알 수 있기 때문입니다.
이렇게 하면 특정 클래스명을 가진 이미지에만 필터가 적용됩니다. 만약 적절한 클래스 없이 새로운 아보카도 개발자 이미지를 추가하면 스타일이 적용되지 않습니다. 웹 개발자 입장에서는 이런 조건부 동작이 대개 원하는 바이기도 합니다.