CSS 속성 적용의 우선 순위

CSS 속성 적용의 우선 순위 정보

HTML CSS 속성 적용의 우선 순위

aequum 자기소개 아이디로 검색 회원게시물
2012.01.08 20:23:07
조회 10,643
댓글 7

본문

css에서 하나의 대상에 중복적 설정시 어떤 것으로 결정되는지, 이를 ~~가볍게~~ 살펴봅시다. 이때 selector 및 cascade나 style 속성및 Important 사용이 있는데, 어떠한 결과를 가져올지 확인해 봅시다.

분류	설명	사용 예시
신	[프로퍼티] !important 의 사용	{color: red !important}
왕족	[HTML 속성] html 요소의 style 속성 사용	<a style="color:red">
귀족	[선택자] id의 지정	#head {color:red}
서민	[선택자] (가상) 클래스의 사용, 속성의 시정	.current {color:red}
노비	[선택자] (가상) 요소의 지정	span {color:red}
펫	값의 상속	????

[ 기본 규칙 ]

1. 계급이 짱이다.

가령 '귀족'수준에서 지정하였는데, 백만 대군 '서민'이나 기타 이하의 중복된 설정은 적용되지 않습니다.

위와 같은 것으로 동일한 것을 가르킬 경우, 귀족이 서민보다 우선됩니다요...

2. 동일 계급인 경우

: 보다 쪽 수가 많은 경우가 우선 한다.

: 쪽 수도 동일한 경우, 나중 선언이 우선한다.

3. 상속 발생시, 펫의 처리

아무리 하나님이 설정한 속성을 상속 받아도, 직접 해당 요소에 설정된 것이 있다면 이것이 우선합니다.

[계급도 살펴보기]

1. 신 - !important

해당 속성의 값 뒤에 !important로 쓴 경우, 다른 어떠한 설정된 값보다 우선하여 처리. 단 IE6은 다음과 같이 특별한 경우에 해당하면 버그가 발생함.

<style>
span {color: red !important;color: yellow}
span {color: blue}
</style>

hello <span>blue</span>

IE6에서는 Important를 사용한 프로퍼티의 값에서 다신 선언하면 !imporant 성질이 무시됨. 따라서 위의 경우는 blue로 출력.

2. 왕족 - style 속성의 사용

!important 를 사용한 다른 css 사용 외에 해당 설정의 변경이 불가능하다.

3. 귀족 - id 지정의 선택자

명시적으로 id를 통해 지정하는 선택자 사용이다.

4. 서민 - (가상) 클래스 및 속성의 사용 선택자

클래스 및 속성, 가상 속성의 선택자를 이용하는 것이다.

클래스의 사용

속성의 사용 (예제는 IE8 이상 지원)

가상 클래스(pseudo class)의 사용 (예제는 IE7이상 지원)

대표적으로 :link, :hover, :focus 등이 있음

5. 노비 - (가상) 요소의 선택자 사용

일반적 요소의 선택자1

일반적 요소의 선택자2 - 관계에 따른 지정 (IE7이상 지원)

우선 순위에 특별한 영향을 주지 않는다. 똑같이 2개의 요소를 사용한 것으로 판단하여 나중의 yellow가 적용된다.

가상 요소(pseudo element)의 선택자 사용

참고로 가상 클래스 및 가상 요소는 모두 ":"문자로 시작하여 혼란될 수 있기도 한데, 간단히 결과가 요소내의 특정한 영역인 경우는 가상 요소, 요소 전체에서 모두가 바뀌는 경우는 가상 클래스로 구별하면 될 듯하다.

6. 펫 - 상속의 처리

(앞의 예제 확인, 생략)

[CSS CASCADE]

CSS는 몇가지 중복된 처리를 하고 있다. 이를 출처(origin)에 따라 구별하고 있다. 보통의 웹브라우저를 이용하여 볼때, 자체적으로 기본적인 스타일이 적용되어 있고, 브라우저간에 차이가 있어 재설정할 필요가 있다. 이때 브라우저에서 미리 지정된 CSS는 출처가 에이전트(user agent)이다. 또한 해당 웹 문서로 여기 위에 다시 작성한 것의 출처는 저자(author)가 된다. 마지막으로 별로 이용하지 않지만 최종의 결과물에서 다시 사용자(user)가 해당 결과에서 다시 적용시킬 수 있다.

이러한 3종의 CSS, 적용은 중복적이며 계층적 우선 순위가 있다.

User Agent(보통, 웹브라우저) < User < Author(보통, 홈페이지 작성자)

그러나 author가 user보다 우선 순위를 둔 점은 최종적인 사용자로써 나름의 스타일 적용에 제약이 크기에 불만일 수 밖에 없다. 그러한 까닭인지 예외적으로 user의 !important 사용은 이러한 출처를 거슬러 우선권을 주고 있다.

Author의 !important < User의 !important

이를 줄여 다음과 같이 간단히 결론을 내려본다. (사실 Author의 !important를 나눠 볼 실익이 없다.)

User Agent < User < Author < User의 !important

참고로 보통 User 사용자 CSS를 적용하는 경우가 흔치 않은데, 이것은 브라우저 설정이나 따로 외부의 추가기능으로 지원된다. 오페라나 사파리는 임의의 사용자 파일을 지정할 수 있으며 파이어폭스나 크롬은 stylish 추가기능을 이용할 수 있다.

물론 이러한 추가기능도 정확히 이러한 CSS cascade의 처리 규칙에 따른다. 이를 바탕으로 사용자가 작성한 스타일을 공유하는 사이트인 http://userstyles.org/ 도 있어, 기존의 사이트나 문서를 다시 입맞에 맞게 변형시켜 볼 수 있다. 그러나 사용자 측면에서 다시 스타일을 입히는 경우, 그 코드는 !important를 많이 사용하기 마련이기에 다소 지저분해 보일 수 밖에 없다.

<user에서 한번 !imporant 적용을 해봄;;; NATER??

[그러하기에.... (좀더 깊은 이해)]

IE만은 특이하게 <a>요소안에 <img>는 테두리를 표시한다. 아마 다음과 같이 구현되었을 것이다.

a:link img {border:...}
a:visited img {}
...

왜냐하면 border는 상속되는 것이 아니기에 img에 설정되었을 것이며, 색상도 달라지기에 가상 클래스에 따라 달리 정의 되어 있을 것이다. 이것은 총 1개의 가상 클래스와 2개의 요소를 이용하여 정의 되었다. 그러나 이러한 border를 없애는데는 다음 한 줄이면 족하다.

img {border:0}

딸랑 1개의 요소로 얼핏 규칙에서 벗어난 것처럼 보인다. 그러나 앞서 다루었던 cascade로 살펴보면 이들은 동일 평면에 위치한 것이 아니다. 출처가 다르기 때문이다. 본래 테두리를 표시했던 것의 출처는 user agent이며, 지금의 내용은 author이다. user agent < author인 까닭이기에 이와 같이 처리된다.

나옴 김에 anchor 요소를 살펴보자. 미리 User Agent에서 가상 클래스로 <a>요소도 기본 설정은 다음과 같이 되어 있을 것이다.

a:link {}
a:visited {}
a:hover {}
a:active {}

이를 살펴보면 (가상) 클래스 1개, 요소 1개로 정의되어 있다. 이러한 값이 마음에 들지 않아 재선언하면 cascade 순서에 따라 author 가 user agent에 우선하여 적용된다.

a {color:yellow}

마찬가지로 User Agent 보다 author가 우선 순위에 있어 anchor에 공통으로 적용된다. 딱히 사정이 없다면 대부분 underline을 표시하고 있는 user agent의 속성도 여전히 적용되고 있을 것이다. 가상 클래스를 좀더 살펴보자.

'링크 가상 클래스'인 :link와 :visited는 방문 여부에 따라 둘중 하나로 선택되는 배타적 관계이다. 그러하기에 :link나 :visited는 사실 중복이 발생하지 않기에 순서가 중요하지 않으며 일종의 관습적인 부분이다.

anchor요소는 기본적으로 :link나 :visited의 하나인 상태에서 표시된다. 이후 보통 :hover는 마우스가 올라간 순간이며, 그 뒤에 이어 클릭 후 놓일 때까지 :active 가 작동된다. 이들 발생은 순서가 있으며 동시에 2개 이상의 가상 클래스가 적용될 수 있다.

다시 말해 achor요소는 동시에 3개의 가상 클래스가 적용되는 순간이 발생될 수 있다. 그리고 그것에 관한 것은 위와 같이 작성하였다면 모두 1개의 요소와 가상클래스로 작성하였기에 동위에 있다. 동시 3개가 적용가능한 순간에 서로 다른 프로퍼티에 관한 설정이라면 모두 다 적용될 것이며, 같은 프로퍼티에 관해 다르게 설정했다면 역시 규칙에 따라 나중에 온 것이 적용되기 마련이다.

따라서 얼핏 achor 요소의 적용이 마치 순서가 있다듯 이러한 CSS 적용의 규칙에 예외처럼 보일 수 있지만, 제대로 규칙에 따라 정확히 처리하고 있는 것이다. 이러한 성질을 감안해서 모두 풀어쓰면 얼추 다음과 같은 내용이 된다.

a:link {}
a:link:hover {}
a:link:hover:active {}
a:visited {}
a:visited:hover {}
a:visited:hover:active {}

위와 같이 작성한다면.. 순서에 상관 쓸 필요는 없다.. 그러나 엄연히 3개의 가상 클래스와 1개의 가상 클래스는 차이가 있다. 그리고 이렇게 쓰기에는... 이거 참.. @.@ 또한 이러한 순서를 알게 되었다면, 이후 변경이 필요 없는 부분이 이어진다면 그에 따라 :hover나 :active는 생략하여도 무방하다.

'동적 가상 클래스'인 hover와 active는 achor외에 다른 요소 지원이 IE에 따라 차이가 있다. IE7이상에서 :hover가 다른 요소에 지원되기 시작했으며, :active는 IE8이상에서 되어 확대되었다.

만일 다른 요소에 대하여 :hover가 IE6에서 지원하였다면, 지금처럼 메뉴 구현에 자바스크립트가 필요하지 않았을 것이다. 그저 :hover를 이용해 자식 요소의 display의 none 설정 여부를 달리 할 수 있기 때문이다. 이제 IE6 지원을 포기한다면 :hover를 가지고 자바스크립트 없이 메뉴를 작성할 수 있다.

-----

헉.. 가상클래스에서 cascade에 예외적으로 보인다는 내용이 오류가 있어 정정했습니다. 죄송합니다. cascade에 따라 본래 user agent보다 author가 우선되는 규칙 그대로 작동됩니다.