[HTML 강의] 14강 - 클래스 속성 (Class)

[HTML 강의] 14강 - 클래스 속성 (Class)

반응형

안녕하세요! 그레이해커 월횽입니다. 오늘은 HTML 클래스(Class) 속성에 대해 알아보겠습니다.

클래스란 무엇인가요?

클래스(Class)란 HTML 요소에 공통된 이름을 부여하여 그룹화하고, CSS 스타일이나 JavaScript 기능을 쉽게 적용할 수 있도록 하는 속성입니다.

즉, 여러 요소를 하나의 클래스로 묶으면 한 번에 스타일을 적용하거나, 특정 그룹만 선택해서 조작할 수 있습니다.

기본 클래스 사용 예제

아래는 클래스 없이 작성한 <div> 요소입니다:

<div>내용1</div>
<div>내용2</div>
<div>내용3</div>
<div>내용4</div>

728x90

이제 각 요소에 class 속성을 추가해 보겠습니다:

<div class="ban1">내용1</div>
<div class="ban2">내용2</div>
<div class="ban3">내용3</div>
<div class="ban4">내용4</div>

위와 같이 각 div 태그에 class 속성을 부여하면, 나중에 CSS에서 다음과 같은 방식으로 스타일을 적용할 수 있습니다:

.ban1 { color: red; }
.ban2 { color: blue; }
.ban3 { color: green; }
.ban4 { color: purple; }

클래스 사용 팁

• 클래스 이름은 영문자, 숫자, 하이픈(-), 언더스코어(_) 조합을 사용하세요.
• 클래스 이름으로 숫자만 단독 사용하거나 한글만 사용하는 것은 권장하지 않습니다.
• 한 요소에 여러 클래스를 공백으로 구분하여 부여할 수 있습니다.

<div class="box highlight">내용</div>

SMALL

위 예시는 box와 highlight 두 가지 클래스를 동시에 적용한 것입니다.

오늘은 HTML에서 클래스(class) 속성이 무엇인지, 어떻게 사용하고 CSS와 연결하는지 예제를 통해 배워보았습니다.

클래스는 HTML 문서를 효율적으로 스타일링하고, 관리하기 위해 꼭 필요한 기능입니다. 직접 따라 해보며 클래스를 다양하게 활용해보세요!

이전 강의 보기: [HTML 강의] 13강 - HTML 인라인 엘리먼트(span 태그 사용법)
다음 강의 보기: [HTML 강의] 15강 - 아이디 속성 (ID Property)