케스케이딩과 스타일 우선 순위

css에서 c는 케스케이딩으로 '위에서 아래로 흐르는 스타일 시트'라는 뜻이다.

 

html문서에 스타일을 적용할 때 적용되는 스타일 간에 충돌이 발생할 수 있다. 이때 어느 스타일을 따라야하는지에 대한 규칙이 '스타일 우선순위'와 '스타일 상속'이다.

 

스타일 우선순위

스타일 우선순위는 다음과 같다.

1. 사용자 중요 스타일
2. 제작자 중요 스타일
3. 제작자 일반 스타일
4. 기본적인 브라우저 스타일

사용자 스타일 시트란 시스템에서 설정한 스타일을 뜻한다. 예를들어 윈도우즈 운영체제에서는 고대비 설정을 줄 수 있는데 이렇게 적용된 스타일이 사용자 스타일 시트이다. 제작자가 만든 스타일 시트는 사이트를 제작하면서 만든 스타일 시트를 말한다. 이때 !important가 붙은 스타일이 중요 스타일이다. 이 중요스타일 다음으로 제작자가 사이트를 만들면서 만든 일반 스타일이 적용된다. 브라우저 스타일 시트는 각 브라우저들마다 기본적으로 지정하고 있는 스타일이며 최하위로 적용된다.

 

스타일 우선순위의 적용범위

1.인라인 스타일
2.id 스타일
3.클래스 스타일
4.태그 스타일

인라인 스타일 - 태그안에 style속성을 사용. 해당 태그에만 적용

id 스타일 - 지정한 부분에만 적용되는 스타일, 한 문서 안에 한 번만 사용 가능

클래스 스타일 - id와 같으나 한 문서안에 여러번 사용할 수 있다.

태그 스타일 - 태그 이름으로 적용한 스타일

 

 

스타일 우선순위의 적용범위는 결국 얼마나 특정되느냐에 따라 우선순위가 결정된다. 더 상세히 특정될수록 우선순위가 높아진다. 만약 우선순위를 같은 클래스 또는 아이디를 가진 스타일보다 높이려면 부모 태그를 붙여주면 된다.

 

아래 스타일을 살펴보면 같은 클래스명을 가졌다. 이때 div태그 즉 부모 태그를 언급해준 class클래스의 스타일이 우선순위가 더 높아진다. 스타일의 우선순위는 이런식으로 높여가면 된다.

div .class { }

.class { }