[HTML]Class 속성 구체적으로 알아보기

1.class 속성이란?

요소에 스타일 시트를 적용하기 위한 구분자입니다. 클래스 이름에 사용 가능한 문자 (사용 불가능한 문자)에 대해서는 특별한 언급이 없지만, 영숫자를 사용하여 두는 것이 무난 하겠지요. 하이픈 (_)이 클래스 이름은 IE4 *에서 잘 해석되지 않을 수 있으므로 사용하지 않는 것이 좋습니다. id 속성과 class 속성의 차이는, id 속성은 요소에 고유 식별자를 할당 것인 반면 class는 스타일 시트에 정의 된 클래스 요소에 관계 붙이는 것입니다. 문서에 동일한 ID를 가진 여러 요소가 존재하지 않는 것이 보통이지만, 같은 클래스에 관계 지워진 여러 요소가 존재합니다.

2.class 속성에서 주의할 점

class 속성에서 주의할 점은 css의 class 문법, html의 class 문법,  jQuery의 class 문법이 어떻게 다른지를 인지하는 점입니다.

css에서 는 다음의 예와 css 셀렉터 레퍼런스에서와 같이 띄워쓰기로 구분될 경우, "선행 엘리먼트 안에 있는 ~"이라는 의미로 해석 되지만, html에서는 상하 관계가 아니라 복수의 클래스를 의미해게 됩니다.

jQuery에서는 css에서와 같은 의미로 셀렉터가 사용되기 때문에 css와 jQuery의 class 사용 문법은 동일하다고 이해하시면 됩니다.

<!-- CSS -->

.test-repeat {

  background-repeat: repeat;

  background-image: url(./image/back.gif);

  width: 85px;

  height: 85px;

  border: 1px solid gray;

}

<!-- html -->
<div class="nav nav-centered nav-reversed navbar navigation-block"></div>

 

.css

.test-repeat {

  background-repeat: repeat;

  background-image: url(./image/back.gif);

  width: 85px;

  height: 85px;

  border: 1px solid gray;

}

.test-repeat-x {

  background-repeat: repeat-x;

  background-image: url(./image/back.gif);

  width: 85px;

  height: 85px;

  border: 1px solid gray;

}

.test-repeat-y {

  background-repeat: repeat-y;

  background-image: url(./image/back.gif);

  width: 85px;

  height: 85px;

  border: 1px solid gray;

}

.test-no-repeat {

  background-repeat: no-repeat;

  background-image: url(./image/back.gif);

  width: 85px;

  height: 85px;

  border: 1px solid gray;

}

.test-space {

  background-repeat: space;

  background-image: url(./image/back.gif);

  width: 85px;

  height: 85px;

  border: 1px solid gray;

}

.test-round {

  background-repeat: round;

  background-image: url(./image/back.gif);

  width: 85px;

  height: 85px;

  border: 1px solid gray;

<h5>repeat</h5>

<div class="test-repeat"></div>

<h5>repeat-x</h5>

<div class="test-repeat-x"></div>

<h5>repeat-y</h5>

<div class="test-repeat-y"></div>

<h5>no-repeat</h5>

<div class="test-no-repeat"></div>

<h5>space</h5>

<div class="test-space"></div>

<h5>round</h5>

<div class="test-round"></div>