기억해야할 기본 CSS
스타일을 적용하는데는 다양한 방법이 있으며 동시에 여러가지 방법을 사용할 수도 있기 때문에 엘리먼트에 적용되는 스타일이 충돌할 수도 있습니다. 따라서 스타일 적용의 우선순위 규칙을 알아둘 필요가 있습니다.
선택자(Selector) 우선순위
1. 속성값 뒤에 !important 를 붙인 속성 사용자 스타일시트 우선
!important 선언을 한 사용자 스타일 > !important 선언을 한 작성자 스타일 >
작성자 스타일 > 사용자 스타일 > User Agent 선언 (브라우저 자체의 선언)
2. HTML에서 style을 직접 지정한 속성
3.#id 로 지정한 속성
4. .클래스, :추상클래스 로 지정한 속성
5. 태그이름 으로 지정한 속성
6. 상위 객체에 의해 상속된 속성
**#** 같은 우선 순위에 있는 경우, 줄수가 많은 경우가 우선되며, 이마저 같은 경우 CSS에서 **나중에 선언한 것이 우선** 되어 적용됩니다.
**#** 절대적으로 우선 순위에 하고 싶다면 속성 값 뒤에 `!important` 를 사용하면 된다.
클래스가 같고 그 값이 다를경우 뒤에 있는것이 앞에 값을 덮는다.
클래스 속성의 값을 aaa bbb로 하든 bbb aaa로 하든, CSS에서 .aaa를 먼저 .bbb를 나중에 정의했으므로 .bbb가 적용됩니다.
삽입 위치 우선순위
1. <head> 요소안의 style 요소
2. <style> 요소안의 @import 문
3. <link> 요소로 연결된 CSS 파일
4. <link> 요소로 연결한 CSS 파일 안의 @import 문
5. 최종 사용자가 연결한 CSS 파일
6. 브라우저의 기본 스타일시트
여러 CSS파일이 같은 우선순위 위치에서 연결되고 삽입되어 있을 때는 연결/삽입 순서에 따라 우선 순위가 결정된다. 가장 마지막에 연결/삽입된 스타일시트가 앞의 스타일시트보다 우선순위가 높다.
마치며
여기까지는 css의 기본 우선순위 알아 보았습니다. 다음에는 Reset CSS 사용하기에 대해 알아 보겠습니다.