[CSS] Cascading Style Sheets

cascading 에 대해서

: CSS는 이 글이 제목과 같이 Cascading Style Sheets의 축약어이다. 이 때, 'Cascading'은 계단모양의 폭포(위에서 아래로 떨어지는)를 의미하는데, 이러한 케스케이딩이라는 단어에 입각해서 css의 특징인 '스타일 적용 측면에서 우선순위'와 '스타일 종속'에 관해서 간단하게 정리해보고자 한다.

• 먼저 스타일 적용의 우선순위를 살펴보면,
  1. inline 속성
  2. 내부 style 태그에 정의해놓은 속성
  3. 외부 css 파일에 정의해놓은 속성
  순서이다. 이 때, inline 속성은 안쓰는 것을 권장한다. 그 이유는 워낙 강력한(?), 즉, 우선순위가 높기 때문에 후에 유지보수 측면에서 수정 사항이 있을 때 inline 태그를 하나하나 살펴봐야하는 경우가 발생할 수 있다.
• 또한, 이러한 순서도 존재한다.
  1. !important를 준 속성
  2. 태그 자체에 inline으로 준 속성
  3. id 값을 선택자로 하여 준 속성
  4. id 값을 선택자로 하여 준 속성
  5. class 값을 선택자로 하여 준 속성
  6. 요소 자체를 선택자로 하여 광범위로 적용하는 속성 예를 들어 p 태그 전체에 주는 속성
  
  ** 이외에도 위에서 아래로 적용되기 때문에 만약에 같은 태그에 대해서 두개의 css 속성 지정 문법을 써뒀다면, 아래에 써준 것이 위에 써준 것을 덮어쓰게 된다. 즉, 아래것을 우선적으로 적용하게 된다.
  
  이처럼 css는 계단 모양의 폭포처럼 위에서 아래로 적용이 되는 원칙을 가지고 있다.
• 스타일의 상속 측면에서는 부모요소의 스타일을 자식요소가 상속 받는 형태인데, 이 때, 모든 속성이 상속되는 것은 아님을 유의!

: 위와 같은 케스케이딩 룰을 잘파악하고 있어야 실제로 개발을 할 때 특정 요소에 어떤 스타일이 적용될지를 알 수 있음.
** 현업에서 !important, inline 지정은 지양한다고 함!