id, class 속성

▲ ▶

id=문자열

class=문자열

id는 하나의 element에 유일한 이름을 부여한다.

하나의 문서에 같은 이름의 id가 두 개 이상 있어서는 안된다.

class는 id와 비슷하지만, 같은 이름을 가진 class가 한 문서에 여러 개 있을 수 있다.

id와 class의 역할은 여러가지가 있지만, 일반적으로 많이 쓰이는 것은 다음과 같다.

id

① 스타일시트 선택자

② 하이퍼링크의 대상(name 속성을 쓴 것과 같은 의미)

class

① 스타일시트 선택자

선택자{요소:값;}으로 이뤄지는 일반적인 스타일 정의에서 id와 class는 문장에서 아래처럼 연결 된다.

#+선택자는 문장에서 id=#로 이름붙인 선택자 형태로 연결되고,

.+선택자는 문장에서 class=포인트로 이름붙인 선택자 형태가 된다.

-예문-

id로 연결했을 땐

그녀의 엉덩이는 Sofa

class로 연결했을 땐

그녀의 가슴은 Adballoon

 

 

Class와 ID의 차이점

 

class, ID는 택의 속성으로 지정하는 선택자로 지정한 택에게만 지정해준 style을 사용하게 합니다.

둘다 같은 동작을 하지만 차이점이 하나 있습니다.

 

#id2{color:red}

.class2{color:green}

 

<H2 id=id2>id2 ID를 지정했습니다.</H2>

<H2 id=id2>나도 id2 ID를 지정했습니다.</H2>

 

<H3 class=class2>class2 class를 지정했습니다.</H3>

<H3 class=class2>나도 class2 class를 지정했습니다.</H3>

 

로 지정하면 위의 두개의 <H2>택은 빨간색의 글자로 나오고 두개의 <H3>택은 초록색의 글자로 나옵니다.

즉, ID와 class 는 선언한 style을 택에 지정하는 속성입니다.

여기까지는 class와 ID는 차이가 없습니다.

하지만, CSS는 문서의 양식을 표현하는 기능뿐만이 아니고 CSS로 지정한 문서의 양식을 JavaScript같은 script로 변경할 수 있는 DHTML로 사용이 가능합니다.

이때, 변경할려는 택에는 이름이 있어야 합니다.

이 이름을 지정하는 것이 ID입니다 .

 

택에 지정한 ID 이름.택의 style요소=변경할 요소

 

로 하면 ID를 가지고 있는 택의 style요소를 변경할 수 있습니다.

이렇게 단순히 페이지의 양식을 지정할 때에는 class, ID 둘다 사용할 수 있지만 ID는 이름을 지정하는 것이기 때문에 같은 이름은 하나만 있어야 합니다.

두개 이상의 같은 이름을 사용한 ID는 페이지에 나중에 지정한 택이 그 ID의 이름을 가집니다.

 

택에 지정한 ID 이름.택의 style요소=변경할 요소

 

로 지정하면 위의 소스에서 두번째의 <H2>택에 요소를 변경합니다.

첫번째의 <H2>택은 변하지 않습니다.

이렇게 여러택에 양식을 지정할 때에는 class를 사용하고 script로 style 양식을 제어할 때 ID를 사용합니다.

 

▲ ▶