스타일 시트 CSS 적용 우선 순위 알아 보기

스타일시트 CSS

스타일 시트 CSS 적용 우선 순위 알아 보기

 

환경: Eclipse Mars, CSS3

 

복잡한 화면에 CSS 를 적용하다 보면 속성이 중복될 수 있습니다. 중복이 있으면 내부적으로 CSS 를 적용할 때 우선순위에 의해 처리합니다. 오늘은 CSS 가 중복이 될 때 어떤 우선순위가 있는지 하나씩 알아 보겠습니다. 

 

 적용 우선 순위는 다음과 같습니다. 1번인 !important 가 붙은 속성이 제일 우선순위가 높습니다. 우선순위 때문에 디자인이 엉켜 버린 경우 !important 을 붙여서 다 무시하고 우선 적용합니다. 만약 같은 우선순위라면 CSS 가 나중에 선언한 것이 우선 적용이 됩니다.

 

1. 속성값 뒤에 !important 라고 붙입니다. 제일 우선순위가 높습니다.

2. 태그에 inline 으로 style 속성을 지정한 경우

3. 선택자가 #ID 인 경우

4. 선택자가 .CLASS :Virtual CLASS 지정한 경우

5. 선택자가 태그이름으로 지정한 경우

6. 상위 객체의 상속된 속성

 

1. 속성값 뒤에 !important 붙인 경우

 

 아래 샘플처럼 값 뒤에 !important 가 붙으면 전부 무시하고 css1 이라는 CLASS 선택자를 적용합니다. 원래는 ID 가 우선 적용이 되어서 배경색이 녹색으로 되어야 합니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	div {
		width: 300px; height: 60px;
		border: 1px solid; padding: 20px;
	}
	.css1 {background-color: red !important;}
	#css2 {background-color: green;}
</style>
</head>
<body>
	<div id="css2" class="css1">
		!important 적용한 경우 
	</div>
</body>
</html>

 

스타일 시트 CSS 적용 우선 순위 알아 보기

 

2. 태그에 inline 으로 style 속성을 지정한 경우

 

두 번째로 우선순위가 높은 태그에 직접 style 속성을 적용한 경우 입니다. ID CLASS 보다 우선 적용이 되어서 배경색은 푸른색이 되었습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	div {
		width: 300px; height: 60px;
		border: 1px solid; padding: 20px;
	}
	.css1 {background-color: red;}
	#css2 {background-color: green;}
</style>
</head>
<body>
	<div id="css2" class="css1" style="background-color: blue;">
		!important 적용한 경우 
	</div>
</body>
</html>

스타일 시트 CSS 적용 우선 순위 알아 보기

 

3. 선택자가 #ID 인 경우

 

세 번째로 ID 선택자를 적용한 경우 입니다. CLASS 보다 앞서기 때문에 두 속성이 같이 있어도 ID 의 녹색이 먼저 적용이 된 것입니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	div {
		width: 300px; height: 60px;
		border: 1px solid; padding: 20px;
	}
	.css1 {background-color: red;}
	#css2 {background-color: green;}
</style>
</head>
<body>
	<div id="css2" class="css1">
		!important 적용한 경우 
	</div>
</body>
</html>

스타일 시트 CSS 적용 우선 순위 알아 보기

 

4. 선택자가 .CLASS :Virtual CLASS 지정한 경우

 

네 번째 우선순위는 CLASS 입니다. 태그에 CSS 를 적용한 경우와 CLASS 를 적용한 경우 CLASS 의 녹색이 먼저 적용되었습니다. 나머지 5, 6 번째 예제는 제외하겠습니다. 이 정도면 충분히 이해하셨을 겁니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	div {
		width: 300px; height: 60px; border: 1px solid; 
		background-color: red;
	}
	.css1 {
		width: 300px; height: 60px;	border: 1px solid; 
		background-color: green;
	}
</style>
</head>
<body>
	<div class="css1"></div>
</body>
</html>

스타일 시트 CSS 적용 우선 순위 알아 보기

Posted by 녹두장군