클래스(Class)

HTML class는 웹페이지의 다양한 HTML 요소들에 공통된 스타일과 동작을 적용하는 식별자입니다.

여러 요소에 동일한 이름의 class를 사용하면, 요소들을 동일한 방식으로 스타일링할 수 있습니다.

예를 들어 웹페이지에서 모든 경고 메시지 텍스트를 빨간색으로 표시하려면, 아래와 같이 경고 메시지에 공통으로 적용할 CSS를 class로 정의할 수 있습니다.

class는 아래와 같이 .을 붙여서 정의할 수 있습니다.

CSS 내 alert class 정의
/* alert class 정의 */
.alert {
  color: red;
}

HTML 내 alert class 적용
<p class="alert">경고 메시지 1</p>
<p class="alert">경고 메시지 2</p>

이렇게 alert class가 적용된 모든 HTML 요소들은 글자색이 빨간색으로 바뀝니다.

하나의 HTML 요소는 여러 class를 가질 수 있습니다.

각 class는 공백으로 구분되며, 여러 class에 속한 스타일과 동작들이 해당 HTML 요소에 복합적으로 적용됩니다.

HTML 내 여러 class 적용
<p class="alert large-text">큰 경고 메시지</p>

이런 식으로 HTML의 class를 활용하면, 웹페이지의 다양한 HTML 요소들에 효과적으로 스타일과 동작을 일관되게 적용할 수 있습니다.

다음 내용이 궁금하다면?

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