본문으로 건너뛰기
실습하기

클래스(Class)

스타일을 재사용하는 방법​

CSS 클래스(Class)는 HTML 요소에 스타일을 적용하거나 JavaScript로 요소를 선택할 때 사용하는 식별자(Selector)입니다.

주로 여러 HTML 요소에 동일한 CSS 스타일을 적용할 때 사용합니다.


클래스(Class) 주요 특징

  • 클래스는 CSS에서 .으로 시작하는 이름으로 정의되며, 여러 요소에 동일한 클래스 이름을 지정하여 스타일 공유

  • 하나의 HTML 요소에 여러 클래스 적용 가능

  • 클래스 이름은 공백 없이 영문자, 숫자, 하이픈(-), 밑줄(_)로 정의


예를 들어 아래 CSS는 배경색을 노란색, 글자 색상을 파란색으로 만드는 CSS 클래스입니다.

highlighted CSS 클래스
.highlighted {
  background-color: yellow;
  color: blue;
}

이 클래스는 HTML 문서에 아래와 같이 적용해 h1, h2, p 태그에 동일한 스타일을 적용할 수 있습니다.

CSS 클래스 적용
<h1 class="highlighted">Highlighted H1</h1>
<h2 class="highlighted">Highlighted H2</h2>
<p class="highlighted">Highlighted Paragraph 1</p>
<p class="highlighted">Highlighted Paragraph 2</p>

코드의 별표로 강조된 부분을 따라 입력해 보세요.

모든 카드의 배경색(background-color)이 코랄(coral, 산호색)으로 적용됩니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!