7. 조화
HTML은 중첩된 구조를 갖고있어 하나의 element가 여러 효과의 영향을 받는데 효과가 우선 적용되는 규칙이 존재
상속 (Inherit)
부모 element의 효과를 자식 element가 물려받는 것
- HTML의 태그들은 많은 경우 속성을 상속받는데 하위 태그에 일일히 동일한 속성을 지정해주는 것 보다 상위 태그에 속성을 지정해 주는 것이 효율적이기 떄문이다.
- 상속되지 않는게 효율적인 경우는 상속되지 않는다. e.g.
border - 속성의 상속 여부: w3 Full Property Table에서 확인 가능
Cascading
웹 페이지는 웹 브라우저 (+ HTML 내재 디자인) + 웹 페이지 및 컨텐츠 제작자의 디자인 + 사용자가 원하는 디자인으로 이루어져 있다.
이 세 가지를 조화롭게 결합하는 것이 중요하며 하나의 웹 페이지가 여러 디자인의 영향을 받기 때문에 우선순위가 필요하다.
기본적으로 웹 브라우저 < 사용자 < 저자 디자인 순으로 중요
- 기본적으로 아래에 있는 코드가 우선 적용된다.
- Selector에 따른 속성값 우선순위는 다음과 같다.
!important |
Style attribute | id selector | class selector | type selector |
|---|---|---|---|---|
| 최우선 | 해당 태그에만 | 문서에서 한 번 | 문서에서 여러번 | 일반적 |
| More specific | ← - - - - - - - - | - - - - - - - - - | - - - - - - - - → | Less specific |
Example
<!-- red, powderblue, yellow, blue, green 순으로 우선 순위 -->
<style>
li {
color: red !important;
}
#idsel {
color: blue;
}
#idsel {
color: yellow;
}
.classsel{
color: green;
}
</style>
<body>
<li id="idsel" class="classsel" style="color: powderblue"> list </li>
</body>Stylish
기존의 웹 사이트를 수정해 볼 수 있는 기능
- Chrome extension나 Stylish 홈페이지를 이용
- 다른 사람의 테마를 다운 받거나 "write style for"에서 내 테마를 만들 수 있다.
참고
- 생활코딩 CSS - 조화
- 스타일의 상속과 적용 우선순위 by Poiemaweb
2020.04.28 15:49 작성
'공부를 합니다 > 웹 (Web)' 카테고리의 다른 글
| 생활코딩 CSS_9.1-9.3 박스모델 (Box model) (0) | 2020.03.05 |
|---|---|
| 생활코딩 CSS_09 레이아웃 (0) | 2020.03.02 |
| 생활코딩 CSS_06 타이포그래피 (0) | 2020.03.02 |
| 생활코딩 CSS_04 선택자 (0) | 2020.03.02 |
| 생활코딩 CSS_03 HTML과 CSS가 만나는 법 (0) | 2020.03.02 |