HTML 클래스 속성
HTML class속성은 HTML 요소에 대한 클래스를 지정하는 데 사용됩니다.
여러 HTML 요소가 동일한 클래스를 공유할 수 있습니다.
클래스 속성 사용하기
속성은 종종 스타일 시트 의 class클래스 이름을 가리키는 데 사용됩니다. 특정 클래스 이름을 가진 요소에 액세스하고 조작하기 위해 JavaScript에서 사용할 수도 있습니다.
다음 예에는 "city" 값을 가진 속성이 있는 세 개의 <div>요소가 있습니다. class세 가지 <div>
요소는 모두 .city
head 섹션의 스타일 정의에 따라 동일하게 스타일이 지정됩니다.
예시
<!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>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
다음 예 에는 값이 "note"인 속성이 있는 두 개의 <span>요소가 있습니다. class두 요소 모두
헤드 섹션의 스타일 정의에 <span>
따라 동일하게 스타일이 지정됩니다 ..note
예시
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
팁:class 속성은 모든 HTML 요소에서 사용할 수 있습니다 .
참고: 클래스 이름은 대소문자를 구분합니다!
팁: CSS 튜토리얼 에서 CSS에 대해 더 많이 배울 수 있습니다 .
클래스 구문
클래스를 생성하려면 마침표(.) 문자를 쓰고 그 뒤에 클래스 이름을 씁니다. 그런 다음 중괄호 {} 안에 CSS 속성을 정의합니다.
예시
"city"라는 클래스를 만듭니다.
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
여러 클래스
HTML 요소는 둘 이상의 클래스에 속할 수 있습니다.
여러 클래스를 정의하려면 클래스 이름을 공백으로 구분하십시오(예: <div class="city main">). 요소는 지정된 모든 클래스에 따라 스타일이 지정됩니다.
다음 예제에서 첫 번째 요소는 클래스와 클래스 <h2>모두에 속하며 두 클래스 에서 CSS 스타일을 가져옵니다.
citymain
예시
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
다른 요소가 동일한 클래스를 공유할 수 있음
다른 HTML 요소는 동일한 클래스 이름을 가리킬 수 있습니다.
다음 예에서 및 둘 다 <h2>" <p>
city" 클래스를 가리키며 동일한 스타일을 공유합니다.
예시
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
JavaScript에서 클래스 속성 사용
클래스 이름은 JavaScript에서 특정 요소에 대한 특정 작업을 수행하는 데 사용할 수도 있습니다.
getElementsByClassName()JavaScript는 다음 메소드 를 사용하여 특정 클래스 이름을 가진 요소에 액세스할 수 있습니다 .
예시
버튼을 클릭하여 클래스 이름이 "city"인 모든 요소를 숨깁니다.
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
위의 예에서 코드를 이해하지 못하더라도 걱정하지 마십시오.
HTML JavaScript 장 에서 JavaScript에 대해 더 배우 거나 JavaScript Tutorial 을 공부할 수 있습니다 .
단원 요약
- HTML
class속성은 요소에 대해 하나 이상의 클래스 이름을 지정합니다. - 클래스는 CSS 및 JavaScript에서 특정 요소를 선택하고 액세스하는 데 사용됩니다.
class속성은 모든 HTML 요소에서 사용할 수 있습니다 .- 클래스 이름은 대소문자를 구분합니다.
- 다른 HTML 요소는 동일한 클래스 이름을 가리킬 수 있습니다.
getElementsByClassName()JavaScript는 메소드 를 사용하여 특정 클래스 이름을 가진 요소에 액세스할 수 있습니다.