HTML class Attribute
HTML class속성은 HTML 요소의 클래스를 지정하는 데 사용됩니다.
여러 HTML 요소가 동일한 클래스를 공유할 수 있습니다.
Using The class Attribute
속성 class은 종종 스타일 시트에서 클래스 이름을 가리키는 데 사용됩니다. 특정 클래스 이름을 가진 요소에 액세스하고 조작하기 위해 JavaScript에서 사용할 수도 있습니다.
아래 예제는 css 와 JavaScript에 class를 사용해 접근하는 예제입니다.
<!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>
<h2>Seoul</h2>
<p>Seoul is the capital of Korea.</p>
</div>
<!-- 버튼 추가 -->
<button id="toggleButton">Hide Cities</button>
<script>
// 버튼 상태를 추적하는 변수
var areCitiesVisible = true;
// 버튼 클릭 이벤트를 추가
document.getElementById("toggleButton").onclick = function() {
// "city" 클래스를 가진 모든 요소를 가져옴
var cities = document.getElementsByClassName("city");
// 상태에 따라 도시를 보여주거나 숨김
if (areCitiesVisible) {
// 도시를 숨김
for(var i = 0; i < cities.length; i++) {
cities[i].style.display = "none";
}
// 버튼 텍스트를 변경
this.innerHTML = "Show Cities";
} else {
// 도시를 보여줌
for(var i = 0; i < cities.length; i++) {
cities[i].style.display = "block";
}
// 버튼 텍스트를 변경
this.innerHTML = "Hide Cities";
}
// 버튼 상태를 변경
areCitiesVisible = !areCitiesVisible;
};
</script>
</body>
</html>London
London is the capital of England.
Paris
Paris is the capital of France.
Seoul
Seoul is the capital of Korea.
아래 예제는 블락요소 안에 인라인 요소에 클래스를 적용한 예제 입니다.
<!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>My Important Heading
This is some important text.
The Syntax For Class
<tagname class="classname">Content</tagname>
<p class="my-class">이것은 문단입니다.</p><tagname>
HTML 태그입니다. <div>, <p>, <span>, <h1> 등의 유효한 HTML 태그가 될 수 있습니다.
class
HTML 요소에 클래스를 지정하는 데 사용되는 HTML 속성입니다.
"classname"
요소에 적용하려는 클래스의 이름입니다. 여러 클래스를 지정하려면 공백으로 구분하여 지정하면 됩니다.
Multiple Classes
HTML 요소는 여러 개의 클래스를 가질 수 있습니다. 각 클래스는 공백으로 구분되며,
각 클래스는 요소에 특정 스타일을 적용하는 데 사용될 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.class1 {
color: red;
}
.class2 {
background-color: yellow;
}
.class3 {
font-size: 24px;
}
</style>
</head>
<body>
<div class="class1 class2 class3">Hello, World!</div>
<div class="class1 class3">Hello, World!</div>
</body>
</html>
Different Elements Can Share Same Class
다른 HTML 요소는 동일한 클래스 이름을 가리킬 수 있습니다.
다음 예에서 둘 다 <h2> <p> city1 클래스를 가리키고 동일한 스타일을 공유합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.city1 {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Different Elements Can Share Same Class</h2>
<p>Even if the two elements do not have the same tag name, they can both point to the same class, and get the same CSS styling:</p>
<h2 class="city1">Paris</h2>
<p class="city1">Paris is the capital of France.</p>
</body>
</html>Different Elements Can Share Same Class
Even if the two elements do not have the same tag name, they can both point to the same class, and get the same CSS styling:
Paris
Paris is the capital of France.
'FRONTEND > HTML' 카테고리의 다른 글
| HTML 튜토리얼 - HTML Iframes (0) | 2023.08.14 |
|---|---|
| HTML 튜토리얼 - HTML id Attribute (0) | 2023.08.04 |
| HTML 튜토리얼 - HTML Block and Inline Elements (0) | 2023.07.24 |
| HTML 튜토리얼 - HTML Lists (0) | 2023.07.21 |
| HTML 튜토리얼 - HTML Tables (0) | 2023.07.19 |