Class, ID attribute selectors

Class, ID attribute selectors
◀ ■ ▶

Class attribute selector

Class 속성을 이용하면 여러 개의 element를 그룹으로 묶어서 같은 스타일을 적용할 수 있다. Class attribute selector를 쓸 때는 아래의 예와 같이 마침표(.)를 사용한다.

.pastoral { color : green }  /* class=pastoral 속성이 들어간 모든 element에 적용 */
H1.red { color : red } /* class=red 속성이 들어간 H1 element에 적용*/
...
...
<STRONG class = pastoral>녹색으로 나오겠지...</STRONG>
<BR>
<EM class = pastoral>여기도 녹색으로 나오겠지...</EM>
<H1 class = red>여기는 빨강색으로 나오겠지...</H1> 
<H1>여기는 검은색일꺼야.</H1> 
이렇게 나와요

Id attribute selector

Id 속성은 class와 비슷하지만, 한 문서에서 같은 id는 하나만 존재해야 한다는 것이 다르다. Id attribut selector를 쓸 때는 #표시를 사용한다.

Id 속성을 쓰면 하이퍼링크의 대상이 될 수도 있다.

H1#z98y { letter-spacing: 0.5em }
...
...
<H1 id=z98y>Wide text</H1>
이렇게 나와요

◀ ■ ▶