CSS 클래스(Class)

CSS 클래스(Class)

- Photo By quaelin -

Class 선택자는 동일한 (X)Html 엘리먼트에 각기 다른 스타일을 적용할때 유용하게 사용됩니다. 동일하게 반복되는 패턴을 가지는 스타일을 주고자할때 Class를 활용하면 코드를 간결화하면서, 유지보수도 효율적으로 할 수 있습니다. 이 Class 선택자는 CSS에 정의해 놓고, HTML문서에서 반복적으로 호출하여 사용될 수 있습니다.

Class 선택자의 사용

Class 선택자는 점(.)을찍고 자신이 원하는 임의의 이름으로 Class명을 지정하고 스타일을 정의하면 됩니다.

.blueboldtext{ 
  font-size: 14pt; 
  color: #403cf2;
  font-weight: bold;
}

실제로 어떻게 사용되는지 예를 들어 보겠습니다. CSS에서 다음과 같이 P 와 redboldtext 라는 클래스에 대한 스타일을 정의합니다.

.redboldtext{ 
  font-size: 14pt; 
  color: #ff3300;
  font-weight: bold;
}


p { 
  font-size: 10pt; 
  color: #333333
}

(X)Html의 body영역에 다음과 같이 작성합니다.

  <p>안녕하세요 킥스의 고도를 기다리며 방문을 환영합니다.</p>

여기서 "킥스"와 "고도를 기다리며" 라는 글자만 글씨크기 14pt에 붉은색 bold체로 바꾸고 싶을때, 정의한 클래스를 다음과 같이 호출하여 주면 됩니다.

  <p>안녕하세요 <span class="redboldtext">킥스</span>의 
  <span class="redboldtext">고도를 기다리며</span> 방문을 환영합니다.</p>

<결과화면>

이와같이 Class 선택자는 한번만 CSS에 정의해 놓으면, (X)Html문서내에서 횟수의 제한없이 반복적으로 호출하여 사용가능합니다. 다음에 설명할 ID선택자와의 중요한 차이점이죠.

고도를 기다리며 zenith5.tistory.com by 킥스

<관련글>

[CSS] - CSS 기초적인 구문 규칙
[CSS] - Inline elements 와 Block level elements
[CSS] - CSS 선언방법

html : hypertext markup language