HTML5+CSS3]5-3 캐스케이딩 스타일 시트(CSS)

https://www.youtube.com/user/easyspub

 

easyspub

⭐스타일 시트라는 용어 앞에 캐스케이딩(cascading)라는 용어 하나 더 붙은 것이 CSS

✔캐스케이딩(Cascading)의 의미
👉CSS에서 C는 캐스케이딩(Cascading)의 약자로 '위에서 아래로 흐르는 스타일 시트'라는 뜻이다.
👉캐스케이딩은 선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼지를 결정함을 뜻한다.
스타일 간의 충돌을 막기 위한 방법이 '위에서 아래로 흐르며 적용되는 방법'이다.

✔캐스케이딩의 두 가지 원칙
1. 스타일 우선순위 : 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용된다.
2. 스타일 상속 : 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다
스타일 시트에서 캐스케이딩은 가장 기본적인 개념이기 때문에 일반적으로 스타일 시트는 캐스케이딩 스타일 시트(CSS)와 같은 의미로 사용되고 있다.

✔스타일 우선 순위
👉우선순위 : 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙, 캐스케이딩에서 가장 중요하다.

• 얼마나 중요한가?(Importance)
1. 사용자 스타일 시트의 중요 스타일
2. 제작자 스타일 시트의 중요 스타일
3. 제작자 스타일 시트의 일반 스타일
4. 기본적인 브라우저 스타일 시트

1. 사용자 스타일 시트가 최우선!
사용자 스타일 시트란 저시력자나 색약자 등과 같이 특별한 조건이 필요한 사용자가 그들에게 맞게 구성해 놓은 스타일 시트
시스템 통해 만들어진 것이기 때문에 제작자가 제어할 수는 없다.
2. 제작자가 만든 스타일 중 !important가 붙은 스타일
제작자 스타일 시트는 사이트를 제작하면서 만든 스타일 시트이다.
3. 제작자가 만든 일반 스타일
사이트를 제작하면서 만든 스타일
4. 기본적인 브라우저 스타일 시트
브라우저의 스타일 시트란 브라우저들마다 기본적으로 지정하고 있는 스타일이다.

• 적용 범위가 어디까지 인가?(Specificity)
1. 인라인 스타일 : 태그 안에 style속성을 사용해 해당 태그에만 스타일을 적용한다.
2. id 스타일 
 지정한 부분에만 적용되는 스타일, 한 문서 안에 한번만 적용할 수 있다.(선택자 이름 앞에 #기호 사용)
3. 클래스 스타일 
웹 문서에서 지정한 부분에만 적용퇴는 스타일, 한 문서 안에 여러 번 적용할 수 있다(선택자 이름 앞에 마침표" . " 사용)
4. 태그 스타일 : 웹 문서에 사용된 특정 태그에 똑같이 적용되는 스타일

• 소스에서의 순서(Source Order)
스타일 시트에서 중요도와 적용 범위가 같다면 스타일 우선순위를 정하는 것은 소스의 순서이다.
소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다.


✔스타일 상속
포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 한다.
👉스타일 상속 : 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
상속을 이용하면 스타일 시트를 효과적으로 만들 수 있다
👉주의할 점은 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니라는 점이다.
배경색과 이미지는 스타일 상속이 되지 않는다.
스타일이 충돌이 생길 경우, 우선 순위에서 설명했던 "명시도"나 "소스 순서"등에 따라 해결해야 한다.