CSS 적용 우선순위

출처 : http://blog.outsider.ne.kr/56

최근 작업에서 가장 머리아픈게 항상 CSS였다. 코딩이나 그런 문제보다 훨씬 머리가 아팠다. 짜증도 많이 나면서 해결도 잘 되지 않고 그렇다고 CSS만 붙잡고 공부할 수도 없는 노릇이다.

그나마 처음 페이지를 만들면서 같이 CSS를 붙일때는 그나마 좀 나은 상황이지만 이미 CSS까지 붙어있는 페이지에 먼가 새로운 것을 같다 붙힐때는 항상 CSS충돌문제가 많이 생기고 쉽게 잘 해결되지도 않는다.

물론 이런 부분은 물론 CSS에 대해서 잘 모르기 때문이다.

그럼 우선 CSS의 적용 우선 순위를

1. Style : style="coloer:red;"

2. ID : #type { color: red }

3. class : .contents { color:red }

4. 조건 : P B { color : red }

5. 타입 : B { color : red }

1번이 가장 높은 우선 순위를 가지고 있다. 즉 엘리먼트에 직접 스타일을 써놓은것이 우선적으로 적용된다.

CSS가 상위의 다른 CSS와 충돌이 나서 문제가 생길때는 div등을 넣어서

#id .class {}

와 같은 식의 조건을 주어 해당 엘리먼트의 적용우선순위가 높아지게 하면 어느정도 해결 될 수 있다.

또한,

우선순위의 차이가 난다고 하더라도 하위에서 재정의한것이 아니면 상위의 있는 스타일이 적용된다. 상위에서 text-align을 정의하고 하위에서 color를 적용하더라도 여전히 text-align은 적용이 된다. 스타일에 따라 다르지만 auto로 넣던지 아니면 다른 원하는 값을 주어서 재정의 해 주어야 한다.

계속적으로 문제가 생기는 경우도 있기는 하지만 CSS에 대해서아직도 많이 배우고 있는 중이므로.. ㅎㅎ

그리고 { color : red !important } 처럼 !important라고 적어주면 우선순위와 상관없이 적용하게 할 수 있다.