CSS 상속과 Cascading

jsleeg98·2020년 5월 19일
0

CSS

목록 보기
3/12

상속

  • 상속은 생산성을 위해 만들어진 기능이다.
  • 부모 태그에 CSS를 적용하면 자식 태그에도 적용되는 것이다.
  • 하지만 모든 속성이 상속되지는 않는다. - color는 상속되지만 border는 상속되지 않는다. 등
    상속여부확인

Cascading

  • CSS의 뜻은 Cascading Style Sheet 로 Cascading은 아주 중요한 의미이다.
  • 생산성이 향상된다.
    -예를 들어 전체를 설정하고 특정한 몇 부분만 수정하면 된다.
  • 이것은 우선순위를 의미한다.
  • 첫번째 우선순위
    1.author 저자
    2.user 사용자
    3.web browser 웹브라우저
    이 순서대로 우선순위가 정해져 있다.
  • 두번째 우선순위
    1.style
    2.id
    3.class
    4.tag
    이 순서대로 우선순위가 정해져 있다.
    우선순위는 가장 구체적인 것이 1순위이며 그 뒤로는 점점 포괄적인 순이다.

모든 우선순위를 이기는 방법
!important를 사용한다.

우선순위 예시

<!DOCTYPE html>
<html>
<head>
    <style>
        #idsel{
            color : blue;
        }
        .classsel{
            color : green;
        }
        div{
            color : black;
        }
    </style>
</head>
<body>
    <div id="idsel" class="classsel" style="color: red">HELLO</div>
</body>
</html>
  • style 때문에 빨강색이 된다.

!important 사용 예시

<!DOCTYPE html>
<html>
<head>
    <style>
        #idsel{
            color : blue;
        }
        .classsel{
            color : green;
        }
        div{
            color : black !important;
        }
    </style>
</head>
<body>
    <div id="idsel" class="classsel" style="color: red">HELLO</div>
</body>
</html>
  • !important 때문에 div가 1순위가 되어 검정색이 된다.

0개의 댓글