반응형
HTML의 class 속성은 요소에 특정 스타일을 적용하거나 자바스크립트로 요소를 선택할 때 사용되는 매우 중요한 속성입니다. class 속성을 사용하여 여러 요소에 공통된 스타일이나 기능을 부여할 수 있습니다. 이를 통해 코드의 재사용성을 높이고, 유지보수도 용이하게 할 수 있습니다. 다음은 class 속성의 개념과 다양한 예제를 소개합니다.
1. 기본 개념
class 속성은 HTML 요소에 CSS 스타일을 적용할 때 그룹을 지정하는 역할을 합니다. CSS 파일에서 특정 클래스를 정의한 뒤, HTML 요소에 해당 클래스를 적용하면 CSS의 스타일 규칙이 적용됩니다. class 속성에는 여러 클래스를 한 요소에 지정할 수도 있으며, 스페이스로 구분하여 나열합니다.
<div class="container main-section">Content</div>
위의 예에서 container와 main-section이라는 두 개의 클래스를 div 요소에 지정했으며, 두 클래스를 사용해 스타일을 적용하거나 자바스크립트에서 해당 요소를 제어할 수 있습니다.
2. 샘플 코드 및 설명
샘플 1: 기본 스타일링
CSS 스타일을 class로 적용하여 여러 요소에 일관된 디자인을 부여합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Class Example</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p class="highlight">This text is highlighted in red and bold.</p>
<p class="highlight">This is also highlighted in red and bold.</p>
</body>
</html>
- 설명: highlight라는 클래스를 p 태그에 지정하여 동일한 스타일(빨간색, 굵은 텍스트)을 적용했습니다. CSS의 .highlight 클래스 스타일이 해당 요소들에 모두 적용됩니다.
샘플 2: 다중 클래스 사용
여러 개의 클래스를 하나의 요소에 적용해 다양한 스타일 조합을 가능하게 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple Classes Example</title>
<style>
.box {
padding: 20px;
border: 1px solid #000;
}
.rounded {
border-radius: 10px;
}
</style>
</head>
<body>
<div class="box rounded">This box has padding, border, and rounded corners.</div>
</body>
</html>
- 설명: box 클래스와 rounded 클래스를 div 요소에 동시에 지정하여 box의 패딩과 테두리 스타일에 rounded의 모서리 둥글기 스타일이 함께 적용됩니다.
샘플 3: 자바스크립트를 사용한 클래스 동적 추가 및 제거
자바스크립트를 통해 class 속성을 동적으로 제어해 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Class Toggle Example</title>
<style>
.active {
background-color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<p id="text">Click to highlight this text.</p>
<button onclick="toggleHighlight()">Toggle Highlight</button>
<script>
function toggleHighlight() {
const text = document.getElementById('text');
text.classList.toggle('active');
}
</script>
</body>
</html>
- 설명: toggleHighlight 함수는 text 요소에 active 클래스를 추가하거나 제거합니다. 버튼을 클릭할 때마다 active 클래스가 토글되어 배경색과 폰트 크기가 동적으로 변합니다.
요약
- class 속성은 HTML 요소에 스타일을 적용하거나 스크립트로 요소를 선택하기 위해 사용됩니다.
- 여러 클래스를 스페이스로 구분하여 한 요소에 동시에 지정할 수 있습니다.
- 자바스크립트를 통해 클래스 속성을 동적으로 추가, 제거할 수 있어 인터랙티브한 웹페이지 구성이 가능합니다.
반응형
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| HTML에서 <span> 태그의 역할 (0) | 2024.11.10 |
|---|---|
| HTML 단락 들여쓰기 blockquote 태그 사용하는 방법 (1) | 2024.03.07 |
| 윈도우 메모장에 HTML 문서 작성하는 방법 (1) | 2024.02.20 |
| HTML 구분선, 수평선을 그을 때 이용하는 hr 태그 사용법 (1) | 2024.01.12 |
| HTML 일련번호가 있는 목록 나열 ol, li 태그 사용법 (1) | 2023.12.04 |
| HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법 (1) | 2022.12.16 |
| HTML div, span 태그 사용법과 차이 (20) | 2022.12.07 |
| HTML 용어 정의할 때 사용하는 dl, dt, dd 태그 사용법 (1) | 2022.12.01 |
