카테고리 없음

상속과 우선순위 결정

개발일기 2018. 12. 15. 09:51
반응형





상속(Inheritance)


상위에서 적용한 스타일은 하위에도 반영됩니다.

이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 됩니다.

하지만 모든 CSS 속성이 이런 특징을 갖게 되면, 몇 가지 문제가 생깁니다.

예를 들어 width 속성이 상속되면 하위 엘리먼트가 모든 같은 크기의 넓잇값을 가질 수 있습니다.

이런 것은 원하는 것이 아니죠.

그래서 box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 하위엘리먼트로 상속이 되지 않습니다.


캐스캐이딩(Cascading)

요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다. 이때 충돌을 피하기 위해 CSS 적용 우선순위가 필요한데 이를 캐스캐이딩(Cascading Order)이라고 한다.




CSS가 어디에 선언 되었는지에 따라서 달라지는 우선순위


만약 css.css에서 div color를 blue로 주었다면, 뒤에 선언된 external방식의 css내용이 반영됩니다. 따라서 blue색깔로 나오겠죠. 

즉 internal과 external은 같은 우선순위로 결정된다고 아셔야 합니다.

CSS는 여러가지 스타일정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영된다는 점을 잘 기억해야 합니다.



선언방식에 따른 차이


같은 선택자(selector)라면 나중에 선언한 것이 반영됩니다.

선택자의 표현이 구체적인 것이 있다면 먼저 적용됩니다.

  • body > span (O)
  • span (X)




명시도에 따른 우선순위


!important > 인라인 스타일 > 아이디 선택자 > 클래스/어트리뷰트/가상 선택자 > 태그 선택자 > 전체 선택자 > 상위 요소에 의해 상속된 속성


선택자만 봤을때 ID > CLASS > ELEMENT 순으로 반영


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
  <style>
    #a{
   color : red;
    }
  .b{
     color : blue;
  }
   div{
     color : green;
   }
  </style>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="a" class="b">
    text....
</div>
 
</body>
</html>
cs






참고사이트

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

반응형