■ 요약

▶ HTML "class" 속성은 요소에 대해 한 개 이상의 클래스를 지정한다.

▶ 클래스는 CSS 및 Javascript 에서 특정 요소를 선택하고 접근하는 데 사용된다.

▶ "class" 속성은 모든 요소에 사용할 수 있다.

▶ 클래스 이름은 대소문자를 구별하지 않는다.

▶ 다른 HTML 요소는 같은 클래스 이름은 가리킬 수 있다.

▶ Javascript는 "getElementsByClassName()" 메서드를 사용하여 특정 클래스 이름을 가진 요소에 접근할 수 있다.

 

▶ HTML "class" 속성은 HTML 요소에 대한 클래스를 지정하는 데 사용된다.

▶ 다수 HTML 요소는 같은 클래스를 공유할 수 있다.

 

■ Class 속성 사용하기

▶ "class" 속성은 종종 스타일 시트에 서 클래스 이름을 가리키는 데 사용된다.

▶ 특정 클래스 이름을 가진 요소에 접근하고 조작하기 위해 Javascript 에서 사용할 수 있다.

 

▶ 아래 예시는 "city" 값을 가지는 "class" 속성을 사용하는 세 개의 <div>가 있다.

▶ 모든 <div> 요소는 head 섹션에 정의한 ".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>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>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_capitals 

 

▶ 아래 예시는 "note" 값을 가지는 "class" 속성을 사용하는 <span> 요소가 있다.

▶ 두 <span> 요소는 head 섹션에 정의한 ".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>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_span 

 

※ "class" 속성은 모든 HMTL 요소에 사용할 수 있다.

※ 클래스 이름은 대소문자를 구별하지 않는다.

 

■ Class의 구문

▶ 클래스를 만들려면 마침표(.) 문자와 클래스 이름은 쓴다.

▶ 다음 중괄호 { } 안에 CSS 속성을 정의한다.

<!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>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_css 

 

■ 다수 클래스

▶ HTML 요소는 하나 이상의 클래스에 속할 수 있다.

▶ 다수 클래스를 정의하려면 공백을 사용하여 클래스 이름을 구분한다 ( 예시 : <div class="city main"> )

▶ 정의된 모든 클래스에 따라 요소의 스타일이 적용된다.

 

▶ 아래 예시에서 첫 <h2> 요소는 "city"와 "main" 클래스 둘 다 속하며 두 클래스로부터 CSS 스타일을 얻는다.

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_multiple 

 

■ 다른 요소들은 같은 클래스를 공유할 수 있다.

▶ 다른 HTML 요소는 같은 클래스를 가리킬 수 있다.

 

▶ 아래 예시에 <h2>와 <p>는 "city"를 가리키며 같은 "style" 을 공유한다.

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

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_tags 

 

■ Javascript 에서 Class 속성 사용하기

▶ 클래스 이름은 특정 요소에 대한 특정 작업을 수행하기 위해 Javascript에서 사용할 수도 있다.

▶ Javascript는 "getElementsByClassName()" 함수를 사용하여 지정한 클래스 이름으로 모든 요소에 접근할 수 있다.

function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_js 

 

출처 : https://www.w3schools.com/html/html_classes.asp

 

HTML Classes - The Class Attribute

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

'HTML' 카테고리의 다른 글

HTML / (36) iframes  (0) 2023.02.24
HTML / (35) id 속성  (0) 2023.02.24
HTML / (33) Block 과 Inlin 요소  (0) 2023.02.22
HTML / (32) 다른 목록  (0) 2023.02.22
HTML / (31) 정렬된 목록  (0) 2023.02.22

+ Recent posts

티스토리툴바