[CSS기초]03 캐스캐이딩 스타일 시트

캐스캐이딩(Cascading)이란?

위에서 아래로 흐르는 스타일 시트라는 뜻으로 스타일간 충돌을 막기 위해 위에서 아래로 흐르며 적용되는 방법이다.

다음 두 가지 윈칙을 따른다.

1. 스타일 우선순위 : 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용된다.

2. 스타일 상속 : 타그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로 위에서 아래로 전달한다.

스타일 우선순위

1. 중요도

사용자 스타일 시트의 중요 스타일 > 제작자 스타일 시트의 중요 스타일 > 제작자 스타일 시트의 일반 스타일 -> 사용자 스타일 시트의 일반 스타일 > 브라우저 스타일 시트의 스타일

최우선순위             우선순위 낮음

2. 명시도

인라인 스타일 > id 스타일 > 클래스 스타일 > 태그 스타일

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

* id 스타일 : 지정한 부분에만 적용되는 스타일이지만 한 문서 안에 한 번만 적용할 수 있따.

* 클래스 스타일 : 우베 문서에서 지정한 부분에만 적용하는 스타일로 한 문서 안에 여러번 적용할 수 있다. 선택자 이름 앞에 .을 붙인다.

* 태그 스타일 : p 선택자를 활용한 스타일이면 웹 문서 안의 모든 텍스트 단락에 같은 스타일이 적용된다.

스타일 상속

웹 문서에서 사용하는 태그들은 서로 포함 관꼐가 있는데 포함하는 태그를 부모 요소, 포함된 태그를 자식 요솔라고 한다. 스타일 시트에는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성이 자식요소로 전달되는데 이를 스타일 상속이라고 한다. 

스타일 상속에서 주의할 것은 스타일의 모든 속성이 부모 요소에서 자식 요소로 사속되는 것은 아니라는 점이다. 글자 색은 자식 요소로 상속되지만 부모 요소에 배경 이미지나 배경 색이 있었다면 자식 요소에 상속되지 않는다.