캐스케이딩
캐스케이드는 폭포라는 의미가 있다. 처음 html이 등장 했을 때는 CSS가 없었다. 웹의 사용자들은 곧 디자인을 요구하기 시작하고 웹의 고안자들은 html을 꾸며주는 언어의 필요성에 공감하였고, 그렇게 해서 등장한 것이 CSS이다.
CSS는 Cascading Style Sheet의 약자이다. CSS의 첫번째 글자로 등장 할 만큼 가장 중요한 기능 다시 말해 철학이라는 의미가 있다.
Cascading을 사전에서 찾아보면 폭포라는 의미가 있다. 즉 웹페이지의 디자인이 웹브라우저의 기본 디자인과 브라우저 사용자의 디자인 그리고 웹페이지 저자의 다자인이 결합 될 수 있다는 점에 착안하고 있다고 할 수 있다.
웹브라우저는 기본적으로 html을 해석하는데 html에는 기본적으로 디자인이 되어있다. (h1, h2 같은 것들) 사용자나 웹페이지를 만드는 사람이 개입 할 여지가 별로 없었다. 사용자도 저자도 자기가 보고자 하는 웹페이지의 디자인의 결정권이 있어야 한다.
즉, 웹브라우저, 사용자, 컨텐츠 생성하는 저자가 서로 조화를 이루어서 웹을 만들어 간다는 철학이 들어 간 언어가 CSS이다.
허나 조화를 이루기 위해서는 대가가 필요했으며 그 대가는 우선순위이다.
하나의 웹페이지에 웹브라우저, 사용자, 저자도 디자인을 적용한다면 웹페이지는 여러 디자인의 영향을 받을 수 밖에 없기에 우선순위를 적용 할 수 밖에 없다.
우선 순위 (하나의 태그에 대해 동시에 적용 했을 때)
웹브라우저 < 사용자 < 저자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <style> li{color:red;} #idsel{color:blue;} .classsel{color:green;} </style> </head> <body> <ul> <li>html</li> <li id="idsel" class="classsel" style="color:powderblue">css</li> <li>javascript</li> </ul> </body> </html> | cs |
웹 페이지에 표시된 CSS (13번째 줄)의 글자색이 powderblue가 된 것을 확인 할 수 있다.
하나의 태그에 중첩되서 CSS가 적용 되었을 때는 더 명시적인 것이 우선순위가 높다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <body> 우선순위 : 더 명시적인 것이 우선순위가 높다. <ol> <li>style attribute</li> <li>id selector</li> <li>class selector</li> <li>tag selector</li> </ol> </body> </html> | cs |
1 2 3 4 5 | <style> li{color:red !important;} #idsel{color:blue;} .classsel{color:green;} </style> | cs |
'Web Programming > HTML CSS JAVASCRIPT' 카테고리의 다른 글
| [CSS] 가상 클래스 선택자 (1) | 2018.06.18 |
|---|---|
| [CSS] 부모 자식 선택자 (0) | 2018.05.09 |
| [CSS] 선택자 (0) | 2018.05.09 |
| [JavaScript] 달력 만들기 (0) | 2018.04.15 |
| [JavaScript] 계산기 (0) | 2018.04.15 |
