|
스타일 시트 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>
|
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>
|
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>
|
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' 카테고리의 다른 글
| 스타일 시트 CSS border-radius 속성, 테두리, 모서리를 타원으로 표시하기 (0) | 2018.09.17 |
|---|---|
| 스타일 시트 CSS border-radius 속성, 테두리, 모서리를 둥글게 표시하기 (0) | 2018.08.25 |
| 스타일 시트 CSS display 속성, 태그의 inline 과 block 속성 바꾸기 (0) | 2018.08.09 |
| 스타일 시트 CSS 마우스 모양을 바꾸는 cursor 속성 알아보기 (1) | 2018.07.27 |
| 스타일 시트 CSS z-index 태그 요소 보이는 순서를 결정 (0) | 2018.07.06 |
| 스타일 시트 CSS position 속성, 태그의 위치를 설정하는 방법 (0) | 2018.06.27 |
| 스타일 시트 CSS 안쪽 여백 설정하는 padding 속성 알아보기 (1) | 2018.06.15 |
| 스타일 시트 CSS clear 속성, float 기능을 제거하는 방법 (0) | 2018.05.21 |
