반응형
SMALL
- CSS 속성 상속가능과 불가능
- 상속하는 속성은 자식에게 영향을 줌
| 속성 | 상속 가능 |
| width/height | no |
| margin/padding | no |
| border | no |
| box-sizing | no |
| display | no |
| visibility | yes |
| opactiy | yes |
| background | no |
| font/color | yes |
| line-height | yes |
| text-align | yes |
| white-spance | yes |
| postion | no |
| overflow | no |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<style>
p{
color: red; /* 상속되는 속성 */
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; /* 상속되는 속성 */
padding: 20px; /* 상속되지않는 속성 */
}
</style>
</head>
<body>
<p>상속되는 속성 <span>자식에도 적용</span></p>
</body>
</html>- CSS Cascading
- css를 사용하다보면 한 태그에 여러 스타일이 겹치는 경우가 발생하여 우선적용에 대해 결정하는 것을 캐스케이딩이라 함
- 캐스케이딩에는 1. 스타일 우선순위 2. 명시도 3. 선언순서 세가지 규칙이 있음
1. 스타일 우선순위
- css가 어디에 선언 되었는지에 따라 우선순위가 바뀜
① head 요소 내의 style 요소
② head 요소 내 style 안에 @important
③ <link>로 연결된 css
④ <link>로 연결된 css파일 내의 @important
2. 명시도
- 명확하게 특정할수록 우선순위가 높아짐
① !important
② 인라인 스타일
③ 아디이 선택자
④ 클래서/가상선택자
⑤ 태그 선택자
⑥ 전체 선택자
⑦ 상위 요소에 의해 상속된 속성
3. 선언 순서
- 코드 순서를 나중에 온 속성을 최우선으로 적용됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<style>
p { color: blue; }
p { color: red; } /* 우선 적용 */
.red { color: red; }
.blue { color: blue; } /* 우선 적용 */
</style>
</head>
<body>
<p>Will be RED.</p>
<p class="blue red">Will be BLUE.</p>
</body>
</html>