해당 내용은 부트스트랩 Web 코스 강의를 듣고 정리한 것입니다.

 

학습 목표

  1. CSS 상속의 특징과 상속이 되지 않는 상황에 대해서 이해합니다.
 
 
  1.  

상속 : 상위에 설정된 스타일을 하위에서도 쓴다.

(재사용 측면에서 훌륭하다.)

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
28
29
<html>
<head>
  <style>
 
    body > div{
      color : green;
      font-size : 30px;
      border:2px solid slategray;
      padding : 30px;
    }
 
  </style>
<body>
 
<div>
  <span>my text is upper!</span>
  <ul>
    <li>
      <span>my text is dummy</span>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, labore eum itaque accusamus. Quae distinctio veniam, similique aperiam animi aliquam delectus, aspernatur provident qui iure laudantium veritatis vel omnis pariatur.</p>
      </div>
    </li>
    <li></li>
  </ul>
</div>
</body>
</html>
 
 cs

padding과 border와 같은 어떤 그 배치와 관련된 속성은 상속을 받지 않는다. 

그 외의 속성들은 상속을 받아서 효율적으로 CSS를 만들 수 있다. 

 

 

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

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

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

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

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

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

이렇게 CSS는 꽤 똑똑한 방식으로 동작합니다.  

아직 혼란스러운 부분이 있다면, 여러분들이 중첩된 엘리먼트를 만들고, CSS 속성을 부여하면서 이 특징을 잘 이해해보면 좋습니다.

 

*cascading 

규칙 확인

inline : HTML 안에 속성으로 넣음, style 해서.

internal : head 태그 사이에 style 이라는 거 안에 넣는 방식

external : 외부 CSS 파일

적용되는 순서 inline > internal > external 

 

span : 같은 노드를 가리킴

동일하면 나중의 것이 적용됨

 

하지만, 이런경우엔 red가 적용된다.

body > span {

color : red;

} //구체적으로 표현된것에 우선 적용된다.

span {

color : blue;

}

 

<div id ="a" class="b">

text...

</div>
//div 로 표현된 node 가 하나 있다고 하자.

 

#a{
    color : red;

}

.b{
    color : blue;

}
a와 b 둘다 같은 노드를 가리킨다. 

//id에는 더 높은 점수를 준다. 

id>class>element (우선순위이다.)

 

* css specificity 

(id, class, element 당 점수가 할당된다.)

영상 1:34에 나온 inline > internal > external 로 강의자료에 표현되어 있습니다. 일반적인 CSS위치는 css파일(external)에 두고 그 아래 style태그를 사용해서(internal 방식) 표현하기 때문에 그런경우 위에 나온 내용이 맞습니다.
하지만, internal과 external은 같은 우선순위를 가집니다. 
같은 css내용이 있는 경우를 예로 보죠.

 

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

 

  1. class는 우선점수가 10점, id는 100점이라고 표현했습니다. 그런데 class 가 11개라면 어떻게 될까요?  id보다 우선순위가 높을까요? 실제로는 그렇지 않습니다. 
    이현상은 올림픽순위가 금메달의 갯수를 통해 우선결정되는 것과 비슷한데요.
    id는 금메달, class는 은메달, tag는 동메달로 이해하는게 편합니다. 

 

'Web' 카테고리의 다른 글

Web12 :: CSS 기본 Style 변경하기  (0) 2019.01.06
Web11 :: CSS Selector  (0) 2019.01.06
Web09 :: CSS 선언 방법  (0) 2019.01.04
Web08 :: class 와 id  (0) 2019.01.04
Web07 :: HTML 구조설계  (0) 2019.01.04

티스토리툴바