[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; }
세모콜론이 뒤에 온다는 거 주의해주세요~
사용 예:
<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
'css' 카테고리의 다른 글
| [html/css] font-style 속성 (normal, italic, oblique 차이) (0) | 2014.05.06 |
|---|---|
| [html/css] 글꼴을 지정하는 font 속성 배우기 (1) | 2014.05.04 |
| [html/css] div 2개 정렬하기 (오른쪽, 왼쪽, 중앙 정렬) (0) | 2014.04.23 |
| [html/css]브라우저 기본값의 초기화 리셋(reset.css)의 개념 (1) | 2014.04.21 |
| [html/css] div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬) (0) | 2014.04.15 |
댓글