[html/css] 스타일 적용 우선 순위와 속성 강제 적용 !important

 

 

[html/css] 스타일 적용 우선 순위와 속성 강제 적용 !important

 

css 스타일 시트를 배울 때 초반에 다루었어야 할 부분이 아닌가 싶은데

 

저도 배우는 입장이다 보니, 공부하면 할수록 어렵게 느껴져서 함부로 글 쓸 엄두가 안 나더라고요.

 

그래도 조금이라도 정리된 부분을 써 보려 합니다~

 

 

CSS에서는 많은 스타일을 적용할 수 있는 장점이 있는 반면, 여러 스타일 적용이 반복됨으로써,

 

어떤 스타일을 먼저 적용해야할지 많이 혼동스럽습니다.

 

그래서, 스타일 적용 순서를 알아두면 편리하겠죠?

 

 

스타일 적용 우선 순위

 

 

CSS란? (HTML과 CSS의 차이, CSS 작성법)

 

* 인라인 스타일(inline style) >내부 스타일(internal style)>외부 스타일(external sytle)>브라우저 기본값 순

 

* 두 가지가 똑같은 등급일 때, 가장 마지막으로 적용한 것이 가장 우선한다.

 

* 특정도(specify) 값을 계산해서, 가장 많은 점수를 받은 것에 우선 순위를 부여한다.

  (특정도란 구체적인 값을 의미하며, 가장 구체적인 값에 우선 순위를 부여함)

 

특정도 계산식은 다음과 같습니다

 

a: 인라인 스타일 1000점
b:  ID 선택자 100점
c:  클래스 선택자 10점

     가상 클래스(예 :link) 역시 클래스로 10점
d : 태그 선택자 1점

    가상 엘리먼트(예 :first-line) 역시 태그 선택자로 1점

 

 

 

예)

 

 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */

 li는 태그 선택자로 1점이 됩니다.


 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

li는 태그 선택자로 1점

:first-line 역시 태그 선택자로 1점

합이 2점


 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

ul는 태그 선택자로 1점

li는 태그 선택자로 1점

합이 2점


 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */

ul, 01. li 태그 선택자의 합은 3점

.red 클래스는 10점

합이 13점

 
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

 #x34y 는 ID 선택자로 100점


 style="          "          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

인라인 스타일은 1000점

 

 

속성 강제 적용 !important 선언

 

!important는 위의 모든 순서를 무시하고,  !important을 선언한 속성에 가장 먼저 우선 순위를 부여합니다.

 

같은 요소에 !important를 한 번 이상 선언하면, 원래의 순서로 되돌아 갑니다.

 

주의할 점은 !important는 전체 스타일이 아닌 개별 속성에 적용하며 IE6 이전 버전에서 인식되지 않을 수 있습니다


꼭 필요한 경우가 아니라면  되도록 사용하지 않는 게 좋습니다. !important 는 스타일의 자연스런 흐름들 방해하고

 

 !important를 사용하지 않는다는 것은 css를 제대로 이해하고 있다는 의미입니다.

 


사용 방법:

 

선택자 { 속성: 속성값 !important; }

 

세모콜론이 뒤에 온다는 거 주의해주세요~

 

 

사용 예:

 

<!DOCTYPE html>
<html>
 <head>
<style type="text/css">
p{
font-size: 40px !important;
color: green !important;
}
</style>

</head>

<body>

<p style="font-size: 14px; color: red;">지구별 안내서</p>


</body>
</html>
 

 

실행화면입니다.

 

설명:

 

위에 스타일 적용 우선 순위를 보면 인라인 스타일이 가장 우선하고, 또 가장 마지막으로 적용하는 것에 우선 순위를

 

둔다고 했는데 (글꼴 14PX에 빨간색),  !important;을 선언함으로서 글꼴이 40px에, 초록 색상으로 나옵니다

 

이상 스타일 적용 우선 순위와 속성 강제 적용 !important 선언에 대해 알아보았습니다

 

참조: http://www.w3.org/TR/CSS2/cascade.html

 

 

 

div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬)

 

div 2개 정렬하기 (오른쪽, 왼쪽, 중앙 정렬)

 

화면 상단/하단에 애드센스 광고 1개 넣기

 

table 중앙 정렬하기 

 

지구별에
css 2014.04.24 17:43
Powerd by Tistory, designed by criuce