제20강.  HTML 클래스속성

 

동영상 강좌보기

 

 

class속성 사용하기

class속성은 HTML요소에 대한 하나 이상의 class이름을 지정합니다.

클래스 이름은 지정된 클래스 이름을 가진 요소에 대한 특정 작업을 수행하기 위해 CSS 및 Javascript에서 사용할 수 있습니다.

 

다음은 CSS를 사용하여 클래스 이름이 "city"인 모든 요소의 스타일을 지정합니다.

<style>
.city {
    background-color: tomato;
    color: white;
    padding: 10px;
} 
</style>

<h2 class="city">런던</h2>
<p>런던은 영국의 수도이다.</p>

<h2 class="city">파리</h2>
<p>파리는 프랑스의 수도이다.</p>

<h2 class="city">서울</h2>
<p>서울은 대한민국의 수도이다.</p>

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

 

Javascript에서 class속성 사용

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

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

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

여러 클래스

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

다음은 클래스 이름이 "city", "main"인 2개의 요소를 보여줍니다.

<h2 class="city main">런던</h2>
<h2 class="city">파리</h2>
<h2 class="city">서울</h2>

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

 

동일한 클래스, 다른 태그

<h2> 및 <p>요소는 동일한 이름의 클래스를 가질 수 있습니다.

<h2 class="city">서울</h2>
<p class="city">서울은 대한민국의 수도입니다.</p>