[CSS] 8. 스타일 시트를 id와 class에 지정해서 사용해 보쟈.

해당 강의의 저작권은 Pure Ani's Blog의 주인장 Pure Ani에게 있습니다.

이번에는 스타일 시트를 앨리먼트의 id와 class에 적용 시켜보겠습니다.

제가 여태까지 사용해왔었던 방법과 같이 앨리먼트에 style를 줘서 사용하는것도 가능합니다만..

코드가 길어지면 매번 그것을 찾아다니기가 귀찮아 집니다.

그것을 편리하게 하기 위해서, 혹은 CSS파일을 따로 뽑아내기 위해서는 앨리먼트의 id와 class의 값에 스타일 시트를 주는 것이 가능합니다.

이때 중요한점은.

id는 중복이 되면 안된다는 겁니다.
(스타일 시트는 동일하게 적용이 됩니다만, 이것은 권장하는 방법이 아닙니다.)

class는 중복이 가능하고, 여러가지를 같이 사용하는것이 가능합니다.
(띄어쓰기로 구별하시면 됩니다.)

style 블록 에서는 id는 #을, class는 .을 사용하여 구별합니다.

예를 들어 보겠습니다.

<style>
    body { margin:0px; }
        #d_id { color:red; }
        .d_class1 { border:1px solid; }
        .d_class2 { width:100px; }
</style>

<div id="d_id" class="d_class1 d_class2">abc</div>

보시면 3가지의 스타일 시트가 적용되어 있습니다.

일단 id에 지정한 d_id의 값인, 글자색 빨강색이 적용되었습니다.

그리고 class에 지정한 d_class1의 테두리 1px 실선, d_class2의 가로 100px이 적용되어 있습니다.

만일 id에 2가지를 같이 붙여 쓴다면?

그것은 적용되지 않습니다.

출처 : Pure Ani's Blog