Day40_상속, 넘침

2023.10.13

 

Day41 세 줄 요약

부모요소(상위 태그)로 부터 style 속성을 물려받는 것을 '상속'이라 한다.

각 선택자마다 점수가 있어 우선순위에 따라 어떤 속성을 가질지 결정된다.

넘침(overflow) 속성이 scroll이면 scrollbar 생성

 

---

 

상속

 

inherit(상속)

부모요소로 부터 물려받는 속성

 

1) font-style : 기울기

2) font-weight : 굵기

3) font-size : 크기

4) line-family : 서체

5) color : 글자색

6) text-align : 정렬

 

/* inherit.css */

.ecosystem {
    font-size:30px;
    text-align: right;
}

.animal{
    font-style: italic;
    font-size: 20px;
    font-family:'궁서';
    line-height:100px;
    color:red;
    text-align:center;
}

.parent{
    width: 300px;
    height: 100px;
    background-color: orange;
}

.child{
    width: 100px;
    height:inherit;
    background-color: red;
}

 

soruce code 및 실행결과

class="tiger" 태그와 class="child" 태그를 제외한 나머지 태그들은 class="ecosystem" 속성을 상속

 

 

선택자 우선순위

같은 요소가 여러 선언의 대상이 되는 경우 어떤 css 속성을 우선 적용할지 결정하는 방법

 

1) 태그 선택자 : 1점

2) 클래스 선택자 : 10점

3) 아이디 선택자 : 100점

4) 인라인 선언 : 1000점

5) !important : 999999999점

     - ex) color : red !important;

 

---

 

넘침

 

overflow

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 속성

 

1) visible(기본값) : 넘침 내용 그대로 표시

2) hidden : 넘침 내용 숨김

3) scroll : 내용이 넘치면 스크롤 바 영역으로 제한

     - 넘치지 않아도 스크롤 바 생성

4) auto : 넘친 내용이 있을 경우에만 스크롤 바 영역으로 제한

 

 

실행결과