Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

CSS 적용 우선순위

최근 작업에서 가장 머리아픈게 항상 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라고 적어주면 우선순위와 상관없이 적용하게 할 수 있다.
2007/10/27 21:13 2007/10/27 21:13