[CSS] 스타일의 그룹화

스타일에도 이름을 지정해줘서 각 태그마다 다르게 스타일을 지정할 수 있다.
방법은 class와 id를 지정하는 방법 2가지가 있다.

먼저 class를 사용하는 방법부터 알아보자

div라는 태그에 사용할 수 있는 mydiv라는 스타일을 만든다면

div.mydiv:hover{
}

위와 같이 해주면 된다.


그냥 div태그가 아닌 모든 태그에 적용하고 싶을때는 아래와 같이 한다.

.mydiv:hover{
}

이 스타일을 적용할때는 이와같이 하면 된다.

<div class="mydiv">A</div>
<div class="mydiv">B</div>
<div class="mydiv">C</div>

이 방법으로 A,B,C를 그룹화 시킬 수 있다.

그렇다면 그룹화가 필요없고 오직 유일한 스타일을 주고 싶다면 id를 이용하면 된다.


id로 스타일을 주고자 할때는 다음과 같이하면 된다.
이 id는 페이지내에서 유일해야하며 중복되서는 절대 안된다.

#mydiv:hover{
}

적용방법은 class에서 해준것과 같다.

<div id="mydiv">A</div>
<div class="mydiv">B</div>
<div class="mydiv">C</div>

위의 B,C는 동일한 스타일을 갖지만 A는 유일한 스타일을 갖는다.


출처 : 물결님의 블로그(http://asrada2001.mireene.com/?page=4)