06-4 캐스케이딩 스타일 시트 알아보기

지금까지 살펴본 스타일 시트는 사실 CSS라는 명칭으로 더 잘 알려져 있음. CSS와 스타일 시트는 비슷해 보이지만 조금 차이가 있음. 쉽게 말해 '스타일 시트'라는 용어 앞에 '캐스케이딩'이라는 용어가 하나 더 붙은 것이 CSS임.

그렇다면 CSS에 담긴 캐스케이딩은 무엇을 의미하고 어떤 역할을 하는지 알아보자!!!

 

>>>캐스케이딩의 의미

CSS에서 'C'는 캐스케이딩의 줄임말이며 스타일시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 사용됨. 다시 말해 CSS는 우선순위가 있는 스타일 시트 정도로 해석가능. 그래서 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정함. 캐스케이딩은 스타일끼리 충돌하지 않도록 막아 주는 중요한 개념임.

>> 스타일이 충돌하지 않게 하는 2가지 방법

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

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

 

>>>스타일 우선순위

스타일 우선순위는 캐스케이딩에서 가장 중요함. 이때 우선순위란 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙을 말함. 

>> 우선순위를 정하는 기준 3가지

> 얼마나 중요한가?

1. 사용자 스타일 > 2. 제작자 스타일 > 3. 브라우저 기본 스타일

 

> 적용 범위는 어디까지?

스타일 적용 범위가 좁을수록, 즉 정확히 필요한 요소에만 적용할 스타일일수록 우선순위가 높아짐

1. ! important > 2.인라인 스타일 > 3.id 스타일 > 4.클래스 스타일 > 5. 타입 스타일

1. !important : 어떤 스타일보다 우선 적용하는 스타일

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

3. id 스타일 : 지정한 부분에만 적용되는 스타일이지만 한 문서에 한 번만 적용가능

4. 클래스 스타일 : 웹 문서에서 지정한 부분에만 적용되는 스타일로 한 문서에 여러 번 적용할 수 있음

5. 타입 스타일 : 웹 문서에 사용한 특정 태그에 스타일을 똑같이 적용함.

 

>소스 코드의 작성 순서는 어디까지?

스타일을 정의한 소스 순서로 우선순위가 정해짐.

소스에서 나중에 작성한 스타일이 먼저 작성한 스타일을 덮음

 

>>> 스타일 상속

웹 문서에서 사용하는 여러 태그는 서로 포함 관계가 있음. 스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달됨, 이것을 스타일 상속이라함.