DAY 5. 캐스케이딩 스타일 시트(CSS) 정의 & 스타일의 우선 순위

Cascading

폭포같은, 폭포처럼 흐르는

사진 출처: Google; 그냥 내가 폭포 좋아해서 가져와봤음ㅎㅎ..

 

그니까 웹 요소에 2개 이상의 style을 적용하게 된다면,

우선순위에 따라서

뭐 먼저 적용할래?하고 결정하는 것이

Cascading Style Sheet

(Style끼리 충돌하지 않게 도와줌!)

 

 

우선순위는 어떻게 결정되는데?

1) 얼마나 중요한데?

     User style   →   Author style   →   Browser basic style

     - 그 웹페이지를 사용하는 사람이 적용한 style이 최우선!

     - 그 다음 중요한 건, 그 웹페이지를 만든 사람이 적용한 style,

     - 마지막으로 중요한 건, web broswer가 적용한 style.

 

 

2) 적용 범위는 어디까지야?

     !important   →   inline style   →   id style   →   class style   →   type style

     딱 좁은 범위에만 적용되는 style일수록 우선순위가 높아짐!

     (예외, '!important'가 붙으면 얘가 무조건 대빵! 다 제치고 이거 먼저 적용!)

 

     - !important

          어떤 style보다도 우선 적용

 

     - inline style

          tag 안에서 style 속성을 써서 바로 그 부분만 style을 적용

 

     - id style

          지정한 부분에만 적용하는 style이지만, 한 문서에 한 번만 적용할 수 있음.

          selector 이름 앞에 # 기호 씀.

 

     - class style

          웹 문서 중 지정한 부분에만 적용되는 style.

          한 문서 안에서도 여러 번 적용할 수 O.

          selector name 앞에 온점(.) 잊지 말고 꼭 쓰자!

 

     - type style

          웹 문서에 사용한 그 tag들에 모두 다 똑같은 style 적용.

          ex, <li> tag가 써진 곳은 어디가 됐든 이 style 모두 적용하자!

 

 

3) source code 작성 순서는 어떤데?

          똑같은 곳에 적용되는 style이라면 나중에 써진 것이 먼저 써진 것을 덮어쓰기 해버린다!

          나중에 써진 것이 우선!!

• <h1>에 적용된 style에서 우선순위

          <style> tag 안에서 적용한 color: brown;이 우선순위다!

          왜냐면 !important가 붙었기 때문이다.

 

 

• <p>에 적용된 style에서 우선순위

          <style> tag 안에서 적용한 color: black;과 color: blue;의 우선순위는 사실 같다. (type style)

          그치만, 나중에 쓰여진 것이 이전에 써진 것을 덮어쓰기하기 때문에,

          black과 blue 중에서는 blue가 우위이다.

 

          그래도 r.20에서 쓰인 <p> tag에는 <p> tag 안에 style 속성이 적용된 'inline style sheet'이므로

          이게 type style인 black과 blue보다 우선 적용된다!

 

 

 

그래서 위의 source code는 web browser로 켜보면,

이렇게 된다.