HTML class 속성은 HTML 요소의 클래스를 지정하는 데 사용된다.
여러 HTML 요소가 동일한 클래스를 공유할 수 있다.
class 속성 사용하기
class 속성은 종종 스타일시트에서 클래스 이름을 가리킬 때 사용된다. 또한 JavaScript에서 특정 클래스 이름으로 요소에 액세스하고 조작하는 데 사용할 수 있다.
다음 예제에서는 "city" 값을 가진 class 속성을 가진 세 개의 <div> 요소가 있습니다. 세 가지 <div> 요소는 모두 헤드 섹션의 .city 스타일 정의에 따라 동일하게 스타일이 지정된다:
| <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; } </style> </head> <body> <div class="city"> <h2>런던</h2> <p>런던은 영국의 수도이다.</p> </div> <div class="city"> <h2>워싱턴</h2> <p>워싱턴은 미국의 수도이다.</p> </div> <div class="city"> <h2>서울</h2> <p>서울은 대한민국의 수도이다.</p> </div> </body> </html> |
다음 예제에서는 "note" 값을 가진 class 속성을 가진 두 개의 <span> 요소가 있습니다. 두 <span> 요소는 헤드 섹션의 .note 스타일 정의에 따라 동일하게 스타일이 지정된다:
| <!DOCTYPE html> <html> <head> <style> .note { font-size: 120%; color: red; } </style> </head> <body> <h1>나의 <span class="note">중요한</span> 제목</h1> <p>이것은 <span class="note">중요한</span> 글이다.</p> </body> </html> |
팁: class 속성은 모든 HTML 요소에서 사용할 수 있다.
참고: 클래스 이름은 대소문자를 구분한다!
팁: CSS 튜토리얼에서 CSS에 대해 훨씬 더 많이 배울 수 있다.
class 구문
이름이 "city"라는 class를 만든다:
| <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body> <h2>class 속성</h2> <p>CSS를 사용하여 클래스 이름 "city"로 요소 스타일 지정:</p> <h2 class="city">런던</h2> <p>런던은 영국의 수도이다.</p> <h2 class="city">워싱턴</h2> <p>워싱턴은 미국의 수도이다.</p> <h2 class="city">서울</h2> <p>서울은 대한민국의 수도이다.</p> </body> </html> |
다중 클래스
HTML 요소는 둘 이상의 클래스에 속할 수 있다.
여러 클래스를 정의하려면 클래스 이름을 공백으로 구분합니다(예: <div class="city main">). 요소는 지정된 모든 클래스에 따라 스타일이 지정된다.
다음 예제에서 첫 번째 <h2> 요소는 city 클래스와 main 클래스 모두에 속하며 두 클래스 모두에서 CSS 스타일을 가져온다:
| <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; } .main { text-align: center; } </style> </head> <body> <h2>다중 클래스</h2> <p>여기서, 세 개의 h2 원소는 모두 "도시" 클래스에 속합니다. 또한 런던은 텍스트를 중앙 정렬하는 "메인" 클래스에 속합니다.</p> <h2 class="city main">런던</h2> <h2 class="city">워싱턴</h2> <h2 class="city">서울</h2> </body> </html> |
서로 다른 요소가 동일한 클래스를 공유할 수 있음
다른 HTML 요소가 동일한 클래스 이름을 가리킬 수 있다.
다음 예제에서 <h2>와 <p>는 모두 "city" 클래스를 가리키며 동일한 스타일을 공유한다:
| <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body> <h2>서로 다른 요소가 동일한 클래스를 공유할 수 있음</h2> <p>두 요소가 동일한 태그 이름을 가지고 있지 않더라도 둘 다 동일한 클래스를 가리키고 동일한 CSS 스타일링을 얻을 수 있습니다:</p> <h2 class="city">파리</h2> <p class="city">파리는 프랑스의 수도이다.</p> </body> </html> |
JavaScript에서 클래스 속성 사용
클래스 이름은 JavaScript에서 특정 요소에 대한 특정 작업을 수행하는 데 사용할 수도 있다.
JavaScript는 getElementsByClassName() 메서드를 사용하여 특정 클래스 이름을 가진 요소에 액세스할 수 있다:
| <!DOCTYPE html> <html> <body> <h2>JavaScript에서 클래스 속성 사용</h2> <p>클래스 이름이 "city"인 모든 요소를 숨기려면 버튼을 클릭합니다":</p> <button onclick="myFunction()">Hide elements</button> <h2 class="city">런던</h2> <p>런던은 영국의 수도이다.</p> <h2 class="city">워싱턴</h2> <p>워싱턴은 미국의 수도이다.</p> <h2 class="city">서울</h2> <p>서울은 대한민국의 수도이다.</p> <script> function myFunction() { var x = document.getElementsByClassName("city"); for (var i = 0; i < x.length; i++) { x[i].style.display = "none"; } } </script> </body> </html> |
마무리
- HTML class 속성은 요소에 대한 하나 이상의 클래스 이름을 지정한다
- 클래스는 CSS 및 JavaScript에서 특정 요소를 선택하고 액세스하는 데 사용된다
- 클래스 속성은 모든 HTML 요소에서 사용할 수 있다
- 클래스 이름은 대소문자를 구분한다
- 다른 HTML 요소가 동일한 클래스 이름을 가리킬 수 있다
- JavaScript는 getElementsByClassName() 메서드를 사용하여 특정 클래스 이름을 가진 요소에 액세스할 수 있다
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML Iframe (0) | 2023.05.20 |
|---|---|
| HTML id 속성 (0) | 2023.05.19 |
| HTML 블록 및 인라인 요소 (0) | 2023.05.17 |
| HTML 기타 리스트 (0) | 2023.05.16 |
| HTML 순서 리스트(Ordered Lists) (0) | 2023.05.15 |
댓글