HTML Class

Class

Class는 HTML 요소에 스타일이나 식별자를 적용하기 위해 사용되는 속성이다.

스타일링 클래스

요소에 스타일을 적용하기 위해 사용되는 클래스로, CSS 스타일 시트에서 선택하여 해당 요소에 스타일 규칙을 적용할 수 있다.

<!--.red-text 클래스로 텍스트를 빨간색으로 스타일링-->
<p class="red-text">Red Text</p>

• .text-red: 텍스트를 빨간색으로 스타일링
• .bg-blue: 배경을 파란색으로 스타일링
• .font-bold: 텍스트를 굵게 스타일링
• .text-primary: 텍스트를 주요 색상으로 스타일링
• .rounded: 요소를 둥근 모서리로 스타일링
• .shadow: 요소에 그림자 효과를 추가

식별자 클래스

요소를 식별하기 위해 사용되는 클래스로 JavaScript나 CSS에서 요소를 선택하여 조작하거나 스타일을 적용할 때 사용한다.

<!--.main-content 클래스로 메인 콘텐츠 영역을 식별-->
<section class="main-content">
  <!-- 메인 콘텐츠 영역 -->
</section>

• .header: 페이지 상단에 위치한 헤더를 식별
• .sidebar: 사이드바 영역을 식별
• .footer: 페이지 하단에 위치한 푸터를 식별
• .btn: 버튼을 식별
• .container: 컨테이너 요소를 식별
• .header: 헤더 영역을 식별
• .footer: 푸터 영역을 식별
• .nav: 내비게이션 요소를 식별
• .card: 카드 형식의 요소를 식별

"form-" 접두사가 붙은 식별자 클래스

"form-" 접두사가 붙은 식별자들은 폼 요소를 스타일링하거나 폼의 구조를 지정하기 위해 사용된다.

• .form-group: 폼 그룹 식별
• .form-control: 폼 컨트롤 요소 식별
• .form-label: 폼 레이블 식별
• .form-check: 폼 체크박스/라디오 버튼 요소 식별
• .form-check-label: 폼 체크박스/라디오 버튼의 레이블 식별
• .form-text: 폼 요소의 보조 텍스트 식별
• .form-select: 폼 셀렉트 요소(드롭다운 목록) 식별
• .form-floating: 부동 레이블을 가진 폼 요소 식별

👉🏻폼 컨트롤은 텍스트 입력, 버튼, 드롭다운 등과 같은 사용자 입력을 처리하는 요소이다.

👉🏻폼 레이블은 폼 컨트롤과 연결되어 사용자에게 입력 필드의 설명이나 레이블을 제공한다.

상태 클래스

요소의 상태를 나타내기 위해 사용되는 클래스로, JavaScript를 사용하여 동적으로 상태를 변경하거나 스타일을 조작할 때 사용한다.

<!--active 클래스로 현재 활성화된 요소 표시-->
<button class="active">활성화</button>

• .active: 현재 활성화된 항목을 나타냄
• .disabled: 비활성화된 상태를 나타냄
• .hover: 마우스가 요소 위에 올라간 상태를 나타냄
• .error: 오류 상태를 표시
• .success: 성공 상태를 표시
• .hidden: 요소를 숨기는 클래스

그룹화 클래스

여러 요소를 그룹으로 묶어 스타일이나 동작을 적용하기 위해 사용되는 클래스이다.

<!--.nav-item 클래스로 내비게이션 메뉴 항목 그룹화-->
<ul>
  <li class="nav-item">메뉴 항목 1</li>
  <li class="nav-item">메뉴 항목 2</li>
  <li class="nav-item">메뉴 항목 3</li>
</ul>

• .list-item: 목록 항목을 그룹화
• .card: 카드 형태의 요소를 그룹화
• .menu-item: 메뉴 항목을 그룹화
• .row": 요소를 행으로 그룹화(주로 그리드 시스템에서 사용)
• .list-group: 목록 요소를 그룹화
• .btn-group: 버튼 요소를 그룹화
• .form-row: 폼 요소를 행으로 그룹화