*내가 놓치고 있는 CSS 기본 규칙들..
CSS 우선순위
CSS는 기본적으로 선언된 순서에 따라 적용되지만 각종 선택자와 삽입 위치에 따라 우선순위가 달라질 수 있다.
선택자 우선순위
!important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자
경쟁 규칙이 같은 선택자 그룹에 속해 있다면 선택자의 종류와 수에 따라 우선순위가 결정된다.
즉 높은 우선순위의 선택자를 더 많이 사용한 규칙이 이긴다.
삽입 위치 우선순위
1. <head> 요소안의 style 요소
2. <style> 요소안의 @import 문
3. <link> 요소로 연결된 CSS 파일
4. <link> 요소로 연결한 CSS 파일 안의 @import 문
5. 최종 사용자가 연결한 CSS 파일
6. 브라우저의 기본 스타일시트
예외적으로, 최종 사용자가 연결한 CSS 파일 안의 !important 규칙은 우선순위 1위다. 최종 사용자는 !important 규칙을 작성해서 웹사이트 디자이너가 만든 CSS 파일의 규칙을 무효화할 수 있다.
여러 CSS파일이 같은 우선순위 위치에서 연결되고 삽입되어 있을 때는 연결/삽입 순서에 따라 우선 순위가 결정된다. 가장 마지막에 연결/삽입된 스타일시트가 앞의 스타일시트보다 우선순위가 높다.
우선순위 전략
우선순위를 최대한 단순하게 유지해야 한다는 것을 고려한다.
- 연결하는 CSS 파일의 수를 최소화
- @import 문 사용을 자제
- 선택자를 각 CSS 파일 안에서의 의도한 순서대로 정렬
@charset "utf-8";
/* 전체 선택자 */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* 요소 선택자 */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display:block;
}
/* 클래스 선택자, 속성 선택자, 가상 선택자 */
.pull-left {
float:left
}
.ab[title="abcd"] {
position: absolute;
}
/* 아이디 선택자 */
#content {
position: relative;
}
/* !important 전체 선택자 */
...
/* !important 요소 선택자 */
...
/* !important 클래스 선택자, 속성 선택자, 가상 선택자 */
...
/* !important 아이디 선택자 */
...출처: http://webdir.tistory.com/338
+ box-sizing: border-box;
+ display: table-cell;
+
+
'Web > Styles' 카테고리의 다른 글
| [CANVAS] 클릭한 곳에 사각형 그리기 (0) | 2018.07.12 |
|---|---|
| [CSS] vertical-align (0) | 2018.07.06 |
| [CSS] display:flex (0) | 2018.05.17 |
| [CSS] 마우스커서 커스텀 (0) | 2018.05.15 |
| [CSS] 뷰포트 (0) | 2018.05.15 |