CSS
Css는 Cascading Style Sheets의 약자다. Cascading이라는 단어가 첫번째로 언급될 만큼 Cascading은 css의 중요한 기능이다. Css가 처음 등장한 때는 1994년 쯤이고, html이 등장하고 css가 등장하기 전에는 웹페이지를 꾸며주는 디자인을 하는 언어를 가지고 있지 않았다. 나중에 이러한 필요성이 대두되면서 여러가지 후보들이 물망에 오르게 되는데 css라고 하는 기술이 채택된 중요한 측면을 웹의 창시자들은 Cascading에 두고 있다.
Cascading
먼저 살펴볼 것은, 웹브라우저.
우리 모두에게 있는 웹브라우저는 쉽게 말해 html을 해석하는 기계라고 볼 수 있는데, 기본적인 디자인을 가지고 있다. <h>태그가 각각 가지고 있는 크기와 굵기, <a>태그 밑줄 등을 보면 알 수 있다. 이것이 바로 css가 나오기 이전의 웹브라우저의 디자인의 전체였다. 즉, 다른 사용자나 웹 브라우저를 만드는 사람들이 개입할 여지가 거의 없었다.
Cascading 기능은 바로 웹 브라우저를 사용하는 사용자(user)가 보고자하는 웹 페이지의 디자인에 대한 자기결정권이 있어야하고 (눈이 나쁘면 글씨 크게 볼 권리 등), 웹 페이지를 만드는 사람(author)도 본인이 원하는 웹 페이지의 모습으로 보여줄 자기결정권이 필요하다는 것에서 출발했다.
즉, 웹 브라우저와 웹 브라우저를 사용하는 사용자 그리고 컨텐츠를 생산하는 저자 3자가 조화를 이루어 웹을 만들어 간다는 철학을 가지고 있었고, 그 철학을 바탕으로 선택된 언어가 css다.
HTML 요소는 하나 이상의 스타일에 영향을 받을 수 있는데 어떤 스타일을 적용 받을지에 대한 결정을 할 수 있어야 한다. 앞서 말한 조화를 이루기 위해서는 대가가 필요하고 그게 바로 우선 순위!, 이를 Cascading이라고 한다.
Cascading은 다음 3가지에 의해 결정된다.
- 중요도
- 명시도
- 코드의 순서
우선순위
웹 브라우저 기본 디자인, 사용자가 원하는 디자인, 컨텐츠를 생산한 사람의 디자인을 모두 적용한다면 하나의 웹 페이지가 여러 디자인의 영향을 받게 된다. 이런 경우에 질서가 없으면 동작하지 않는다. 그래서 우선 순위 규칙을 정해주었다.
중요도
저자 > 사용자 > 웹 브라우저 기본 디자인
프로그래머=저자가 사용자나 브라우저가 설정한 기본 css보다 우선순위가 높다. 가장 기본적인 규칙이다. 사용자가 직접 디자인을 수정하는 경우는 많이 없다.
명시도
style attribute > id selector > class selector > tag selector
why? 뭐가 더 구체적이고 명시적인가, 포괄적이고 일괄적인가를 기준으로 생각하면 된다.
태그 선택자는 가장 포괄적인 규칙이라고 할 수 있다. class 선택자는 원하는 태그를 여러 개 선택 할 수 있기 때문에 그 다음이다. id 선택자는 특정한 태그에 대해서만 부여할 수 있고 중복이 불가하다. style 속성에 들어있는 css는 id 선택자와 비슷하다고 할 수 있지만 태그와 좀 더 가까운 존재라고 보고 좀 더 구체적이고 명시적이라고 볼 수 있다.
구체적인 것들이 우선순위가 높아야 생산성이 높아진다. 기본적인 태그에 css를 적용하고 원하는 태그를 골라 css를 적용하는 것이 모든 태그에 css를 하나하나 지정해주는 것 보다 훨씬 생산적이다. 바로 이런 것들과 관련된 것이 Cascading이다.
*!important를 붙이면 모든 우선순위를 뛰어넘을 수 있다. ex) li {color:red !important;} ※ !important를 남용하게되면 캐스캐이딩을 깨트려 디버깅을 어렵게 한다.
출처 Cascading
