클래스 선택자 (.className)

[ CSS 목차 보기 ]

(1) 특정 class 값을 가지는 요소들을 모두 선택한다. (2) 클래스 선택자는 점(.)을 기호로 사용한다. (3) 요소들에 중복으로 사용할 수 있다는 점에 ID 선택자와 차이점이 있다. 참고로 요소란 태그(Tag)와 같은 의미로 생각하면 된다. 둘의 차이점이 궁금하면 다음 포스트를 참고하자. [참고1. 요소와 태그의 개념과 차이점]

[CSS 파트]
.클래스명 {
   프로퍼티: 값;
}

[HTML 파트]
<tag class="클래스명"></tag>

• 클래스 선택자를 사용하는 이유 제대로 이해하기
  클래스 선택자를 이용하면 코드를 DRY하게 유지할 수 있다. DRY는 Don’t Repeat Yourself의 줄임말로, 같은 코드를 반복해서 적지 말라는 뜻이다. 반복적으로 사용되는 CSS 코드를 각각의 요소 스타일에 하드 코딩하지 말고 (일일이 적지 않고), 하나의 클래스 선택자에 스타일을 지정한 뒤, 필요한 요소에 class 속성만 지정하여 코드를 재활용하면 된다 (Figure 1).

[1] 예제: 클래스 선택자의 기본 개념

• 예제 목표
  클래스 선택자를 이용하여 CSS 코드를 어떻게 DRY하게 적을 수 있는지 확인한다. 아래 2개의 예제(1.1 WET한 코드 / 1.2 DRY한 코드)에서는 특정 글자들의 색깔을 붉은색으로 바꾼다. [1.1] WET한 코드는 중복으로 코드가 적혀있는 예제이고, [1.2] DRY한 코드는 공통의 코드를 하나의 클래스 선택자로 묶어낸 예제이다.

[1.1] WET한 코드

• 예제 목표
  WET한 코드(바람직하지 않은 코드)를 보여주기 위해, 색깔을 바꾸고자 하는 글자들을 span요소로 둘러 싼다. 그리고 이 span 요소들을 꾸미기 위해 CSS파트에서는 공통적인 스타일을 일일이 지정해주었다. 예시를 위해 일부러 비효율적인 코드를 작성하였다.
• HTML
  <div id=”wrapper”></div> <!– 예제 요소들을 둘러싼 래퍼 요소이다. ^{[참고2. 래퍼의 개념과 기본 설정]} –>
  <span id=”my-id1″></span> <!– 글자의 색깔을 바꾸기 위해 span으로 둘러싼다. –>
  <span id=”my-id2″></span> <!– 글자의 색깔을 바꾸기 위해 span으로 둘러싼다. –>
  <span id=”my-id3″></span> <!– 글자의 색깔을 바꾸기 위해 span으로 둘러싼다. –>
  <span id=”my-id4″></span> <!– 글자의 색깔을 바꾸기 위해 span으로 둘러싼다. –>
• #my-id1의 CSS, #my-id2의 CSS, #my-id3의 CSS, #my-id4의 CSS
  color: red; // 글자 색깔을 빨간색으로 바꾼다.
• #wrapper의 CSS
  기본적인 래퍼 설정이다. 래퍼는 위치와 여백을 조정하여 가독성과 심미성을 향상시키기 위해 사용한다.^{[참고2. 래퍼의 개념과 기본 설정]}

• 구현 결과
  span으로 지정된 글자들이 모두 붉은색으로 바뀐 것을 확인할 수 있다. 여기서 주목할 점은 CSS #my-id1, #my-id2, #my-id3, #my-id4에 똑같은 스타일을 반복적으로 작성했다는 점이다. 아주 비효율적인 WET한 코드이다.
• 질문
  혹시 다음과 같은 생각을 가지고 있는 독자들이 있을 수도 있다. “CSS파트에서 #my-id2, 3, 4를 지우고, 모든 span 요소들의 id 속성을 my-id1으로 통일하면, 스타일 코드의 중복성을 없앨 수 있지 않아요?” 아주 바람직한 접근법이지만, HTML에서 id 속성값은 유일한 값을 가져야 하므로, 여러 요소들에 중복을 사용할 수 없다.^{[참고3. ID 선택자]} 따라서 이 때 사용하는 것이 class 속성이다. class 속성은 중복으로 사용할 수 있다는 점에서 id 속성과 차이점이 있다. 다음 [1.2] DRY한 코드에서 어떻게 사용할 수 있는지를 보자.

[1.2] DRY한 코드

• 예제 목표
  [1.1] WET한 코드를 DRY 코드로 바꾼다. CSS 파트에서 공통적인 부분을 클래스 선택자로 묶어내고, span 요소에는 id 속성(attribute)이 아닌 class 속성을 지정해서 스타일 코드를 재활용한다.
• HTML
  <span class=”red”></span> <!– class=”red”로 지정된 요소들의 글자색을 붉은색을 바꾼다 –>
• .red의 CSS
  color: red; // 글자색깔을 붉은색으로 바꾼다.

• 구현 결과
  구현 결과만을 보면 WET하게 작성된 것과 DRY하게 작성된 코드의 결과가 모두 같다. 하지만 CSS 파트를 보면, DRY하게 작성된 경우, .red 선택자 하나만 만들고, HTML 파트에서 적용하고자 하는 요소들에 class=”red” 속성만 추가함으로써 같은 효과를 가져올 수 있다. CSS 코드의 길이가 크게 단축된다. 이것이 클래스 선택자를 사용하는 핵심적인 이유다. 공통적인 부분을 클래스 선택자로 묶어 내는 습관을 들이자.

[2] 예제: id와 class 속성 사용 방법

• 예제 목표
  공통적인 부분을 클래스 선택자로 묶어내는 습관이 구체적으로 무엇을 말하는 건지 알아본다. 이번 섹션의 예제를 통해, 언제 id 속성과 class 속성을 사용해야 하는지를 알게 된다.

[2.1] WET한 코드

• 예제 목표
  아래 코드는 4개의 컬럼(#content1 – 4)를 배치하는 예제이다. WET한 코드를 만들기 위해, CSS 파트에서 각각의 요소마다 같은 스타일을 반복적으로 설정하였다.
• HTML
  <div id=”content1″>Content1</div> <!– 컬럼 1을 구성한다 –>
  <div id=”content2″>Content1</div> <!– 컬럼 2을 구성한다 –>
  <div id=”content3″>Content1</div> <!– 컬럼 3을 구성한다 –>
  <div id=”content4″>Content1</div> <!– 컬럼 4을 구성한다 –>
• #content1-4의 CSS
  width: 25%; // 부모 요소 #wrapper의 width 대비 25%만큼을 width로 설정한다.
  height: 100%; // 부모 요소 #wrapper의 height 대비 100%만큼을 height로 설정한다.
  left: x%; // left 좌표를 부모 요소 #wrapper의 width를 기준으로 x %에 위치시킨다.
  background-color: rgba(r, g, b, a); // 배경색깔을 각각 설정한다.

• 구현 결과
  4개의 컬럼(#content1 – 4)이 25% 너비로 출력 되었음을 확인할 수 있다. 하지만 CSS 파트를 보면, #content1 – 4에서 공통적인 스타일들이 존재한다. 따라서 코드가 굉장히 WET한 것을 확인할 수 있다.

[2.2] DRY한 코드

• 예제 목표
  WET하게 작성된 코드를 클래스 선택자를 이용하여 DRY하게 만들어 보자.
• HTML
  [2.1] 예제와 동일하지만 class=”content”가 추가되었다.
• .content의 CSS
  width: 25%; height: 100%; // 공통적으로 설정된 크기 프로퍼티를 .content에 적는다.
  position: absolute; // 공통적으로 설정된 position 프로퍼티를 .content에 적는다.
• #content1 – 4의 CSS
  공통적인 부분을 .content로 다 옮기고 남은 나머지 부분에 해당한다.

• 구현 결과
  [2.1] 코드와 결과는 동일하지만, CSS 파트를 보면, 중복적인 부분을 .content로 다 빼내고, HTML 파트에서 class=”content”를 추가하여 코드를 재활용하였다. 매우 DRY한 코드가 되었다.

한 태그에 여러 속성 지정하기

• 예제 목표
  요소의 class 속성을 띄어쓰기를 이용하여 여러 클래스명들을 지정하면, 한번에 여러개의 스타일을 지정할 수 있다.

• 구현 결과
  span.red.italic을 보면 글자색 붉은색과 기울기가 적용됨을 확인할 수 있다.

참고
[1] 요소와 태그의 개념과 차이점
[2] 래퍼의 개념과 기본 설정
[3] ID 선택자
[ CSS 목차 보기 ]