모든 저작권은 <생활코딩>의 생산자인 <egoing>님에게 있습니다.
문제시, 비공개로 전환하겠습니다.
<상속>
HTML은 중첩된 구조를 가지고 있다. 때문에 하나의 엘리먼트는 다양한 요소의 영향을 받는다.
이러한 요소들(효과들)중에 어떤 요소들을 적용해야하는지에 대한 일정한 규칙이 있다.
어떤 속성은 상속되는 것이 유리한지 안유리한지를 판단해서 동작한다.
무엇이 상속되고 무엇이 상속되지 않는가? => CSS설명서를 참고해야한다.
inheritance.html |
<!DOCTYPE html> |
<Stylish>
stylish는 웹사이트의 디자인을 사용자 마음대로 수정할 수 있는 기능이다.
이 기능을 이용해서 주어진데로 웹페이지를 소비하는 것이 아니라 자신의 취향을 반영할 수 있다.
또 다른 사람이 만든 디자인을 적용해서 간편하게 사이트의 디자인을 변경할 수도 있다.
구글검색 "Stylish Extension"
예제 |
|
이렇게 저장하면, opentutorials.org에 접속하였을 때 background 색깔이 검정색으로 변하게 된다.
위에 보면 !important;로 코딩을 마무리하고 있는데 이 부분이 없이 저장하게되면,
Opentutorials.org의 본래 코드가 더 상위이므로 적용되지 않는다.
CSS = Cascading Style Sheet
Cascading이라는 기능,규칙은 CSS의 가장 근본이 되는 철학이다.
---
캐스케이드는 폭포라는 의미가 있습니다.
처음 html이 등장했을 때는 CSS가 없었습니다.
웹의 사용자들은 곧 디자인을 요구하기 시작합니다.
웹의 고안자들은 html을 꾸며주는 언어의 필요성에 공감하기 시작합니다.
그렇게해서 등장한 것이 CSS입니다.
CSS는 Cascading Style Sheet의 약자입니다.
Cascading은 CSS의 첫번째 글자로 등장할만큼 가장 중요한 기능 다시 말해 철학이라는 의미가 있습니다.
Cascading을 사전에서 찾아보면 폭포라는 의미가 있습니다.
즉 웹페이지의 디자인이 웹브라우저의 기본 디자인과 브라우저 사용자의 디자인 그리고
웹페이지 저자의 디자인이 결합될 수 있다는 점에 착안하고 있다고 할 수 있을 것 같습니다.
즉 웹브라우저, 사용자, 컨텐츠 생산자의 조화를 중요한 철학으로 삼고 있다고 생각됩니다.
여기서는 하나의 엘리먼트에 대해서 다양한 효과가 영향력을 행사하려고 할 때
우선순위를 어떻게 설정하는가에 대한 규칙인 캐스캐이딩에 대해서 알아봅니다.
---
CSS 우선순위
1. 저자 2. 사용자 3. 웹브라우저
<캐스케이딩 실습>
하나의 Tag에 여러가지 CSS가 적용되었을 때의 규칙을 살펴보자.
cascading_1.html |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> 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> <ol> <li>style attrivute</li> <li>id selector</li> <li>class selector</li> <li>tag selector</li> </ol> </body> </html> |
하나의 tag에 중첩되어서 CSS가 적용되었을 때의 우선순위 |
댓글