본문 바로가기
HTML

HTML 클래스의 Attribute(HTML The class Attribute)

보여주는남자 2018. 6. 18. 00:00

Using The class Attribute

class 속성 사용하기


The HTML class attribute is used to define equal styles for elements with the same class name.

HTML 클래스 속성은 동일한 클래스 이름을 가진 요소에 대해 동일한 스타일을 정의하는 데 사용됩니다.

So, all HTML elements with the same class attribute will have the same format and style.

따라서 동일한 클래스 속성을 가진 모든 HTML 요소는 동일한 형식 및 스타일을 갖습니다.

Here we have three <div> elements that point to the same class name:

여기에 동일한 클래스 이름을 가리키는 세 개의 <div> 요소가 있습니다.


Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
  background-color: black;
  color: white;
  margin: 20px;
  padding: 20px;
} 
</style>
</head>
<body>
 
<div class="cities">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>
 
<div class="cities">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>
 
<div class="cities">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>
 
</body>
</html>
cs


Result:

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.


Try it Yourself »


Using The class Attribute on Inline Elements

인라인 요소에서 class 속성 사용


The HTML class attribute can also be used on inline elements:

HTML 클래스 속성은 인라인 요소에도 사용할 수 있습니다.


Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<style>
span.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>
cs


Try it Yourself »


Tip: The class attribute can be used on any HTML element.

팁 : class 속성은 모든 HTML 요소에서 사용할 수 있습니다.

Note: The class name is case sensitive!

참고 : 클래스 이름은 대소 문자를 구분합니다!

Tip: You can learn much more about CSS in our CSS Tutorial.

팁 : CSS에 대한 자세한 내용은 CSS 자습서를 참조하십시오.


Select Elements With a Specific Class

특정 클래스가있는 요소 선택

In CSS, to select elements with a specific class, write a period (.) character, followed by the name of the class:

CSS에서 특정 클래스가있는 요소를 선택하려면 마침표 (.) 문자 다음에 클래스 이름을 입력하십시오.


Example

Use CSS to style all elements with the class name "city":

CSS를 사용하여 클래스 이름이 "city"인 모든 요소의 스타일을 지정하십시오.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.city {
    background-color: tomato;
    color: white;
    padding: 10px;
} 
</style>
 
<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>
cs


Result:


London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.



Try it Yourself »


Multiple Classes

여러 클래스


HTML elements can have more than one class name, each class name must be separated by a space.

HTML 요소는 클래스 이름을 두 개 이상 가질 수 있으며 각 클래스 이름은 공백으로 구분해야합니다.


Example

Style elements with the class name "city", also style elements with the class name "main" :

클래스 이름이 "city"인 스타일 요소, 클래스 이름이 "main"인 요소 스타일 :

1
2
3
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
cs


Try it Yourself »


In the example above, the first <h2> element belongs to both the "city" class and the "main" class.

위의 예에서 첫 번째 <h2> 요소는 "city"클래스와 "main"클래스에 속합니다.


Different Tags Can Share Same Class

다른 태그는 같은 클래스를 공유 할 수 있습니다.


Different tags, like <h2> and <p>, can have the same class name and thereby share the same style:

<h2> 및 <p>와 같은 다른 태그는 동일한 클래스 이름을 가질 수 있으므로 동일한 스타일을 공유 할 수 있습니다.


Example

1
2
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
cs


Try it Yourself »


Using The class Attribute in JavaScript

JavaScript의 class 속성 사용


The class name can also be used by JavaScript to perform certain tasks for elements with the specified class name.

클래스 이름은 JavaScript가 지정된 클래스 이름을 가진 요소에 대한 특정 작업을 수행하는 데 사용될 수도 있습니다.

JavaScript can access elements with a specified class name by using the getElementsByClassName() method:

JavaScript는 getElementsByClassName () 메서드를 사용하여 지정된 클래스 이름을 가진 요소에 액세스 할 수 있습니다.


Example

When a user clicks on a button, hide all elements with the class name "city":

사용자가 버튼을 클릭하면 클래스 이름이 "city"인 모든 요소를 숨 깁니다.

1
2
3
4
5
6
7
8
<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>
cs


Try it Yourself »


Tip : Study JavaScript in the chapter HTML JavaScript, or in our JavaScript Tutorial.

팁 : HTML JavaScript 장 또는 JavaScript 자습서에서 JavaScript를 학습하십시오.


Test Yourself with Exercises!


출처 : W3School.com


저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

HTML Iframes(HTML Iframes)  (0) 2018.06.20
HTML id 속성(HTML The id Attribute)  (0) 2018.06.19
HTML 블록 및 인라인 요소(HTML Block and Inline Elements)  (0) 2018.06.17
HTML 목록(HTML Lists)  (0) 2018.06.16
HTML 표(HTML Tables)  (0) 2018.06.15

'HTML' Related Articles

티스토리툴바