우선순위
<body>
<div id="color_yellow" class="color_green" style="color: orange;">Hello World!</div>
</body>div {
color: red !important /* important */
}
#color_yellow {
color: yellow; /* 아이디 선택자 */
}
.color_green {
color: green; /* 클래스 선택자 */
}
div {
color: blue; /* 태그 선택자 */
}
* {
color: darkblue; /* 전체 선택자 */
}
body {
color: violet; /* 상속 */
}우선순위 결정
- 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법
- 명시도 점수가 높은 선언이 우선 (명시도)
- 점수가 같은 경우, 가장 마지막에 해석(늦게 작성한)되는 선언이 우선 (선언 순서)
- 명시도는 '상속' 규칙보다 우선 (중요도)
important!가 적용된 선언 방식이 다른 모든 방식보다 중요 (중요도)
1. 가장 중요 (important!)
- 모든 선언을 무시하고 가장 우선
- 점수 : 무한 pt
div {
color: red !important;
}2. 인라인 선언 방식
- 인라인 선언 (HTML
style속성 사용) - 점수:
1000pt
<div style="color:red;">
Hello World!
</div>3. 아이디 (ID Selector)
- 아이디 선택자
- 점수:
100pt
#container {
color: red;
}4. 클래스 (Class Selector)
- 클래스 선택자
- 점수:
10pt
.container {
color: red;
}5. 태그 (Tag Selector)
- 태그 선택자
- 점수 :
1pt
span {
color: red;
}6. 전체 (Universal Selector)
- 전체 선택자
- 점수 :
0pt
* {
color: red;
}7. 상속(CSS Inheritance)
- 상속 받은 속성은 항상 우선하지 않음
- 점수: 계산하지 않음
body {
color: red;
}단위
px
- 고정된 단위, 사이즈
- 가장 넓게 사용됨
<div class="container"></div>.container {
width: 300px;
}%
- 부모 요소의 영향을 받는 단위
<div class="parent">
<div class="child"></div>
</div>.parent {
width: 600px;
}
.child {
width: 50%; /* 300px */
}em
- 현재 자기 자신의 폰트 사이즈에 영향을 받음
<div class="container"></div>.container {
width: 60em; /* 600px */
font-size: 10px
}rem (root em)
html에 지정되어 있는 폰트 사이즈에 영향을 받음
<div class="container"></div>html {
font-size: 10px;
}
.container {
width: 20rem; /* 200px */
}프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM
안녕하세요.