Inheritance & Cascading (상속, 우선순위)

8522 단어 프론트엔드CSSCSS

① 상속 (Inheritance)

상속이란 상위 요소에 적용된 속성을 하위 요소가 물려 받는 것을 의미

속성별 상속 여부 확인 링크


② 캐스캐이딩 (Cascading)

하나의 태그에 여러가지 방법으로 동일한 속성의 스타일을 적용하는 경우 우선순위에 따라서 적용될 스타일이 결정됨

⭕ 우선순위를 결정하는 요소

  • 중요도 : CSS가 어디에 선언되었는지에 따라서 우선순위가 달라짐
  • 명시도 : 대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아짐
  • 코드의 순서(선언 순서) : 선언된 순서에 따라 우선순위가 적용됨. 즉, 나중에 선언된 스타일이 우선 적용

1. 중요도

  1. head 요소 내의 style 요소
  2. head 요소 내의 style 요소 내의 @import 문
  3. <link>로 연결된 CSS 파일
    ex) <link rel="stylesheet" href="style.css">
  4. <link>로 연결된 CSS 파일 내의 @import문
  5. 브라우저 디폴트 스타일시트

2. 명시도

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

<!DOCTYPE html>
<html>
<head>
  <style>
    p        { color: red !important; }
    #thing   { color: blue; }

    div.food { color: chocolate; }
    .food    { color: green; }
    div      { color: orange; }
  </style>
</head>
<body>
  <p id="thing">Will be Red.</p>    /* red로 표시 */
  <div class="food">Will be Chocolate.</div>    /* chocolate로 표시 */
</body>
</html>

3. 선언 순서

나중에 선언된 스타일이 우선 적용

<!DOCTYPE html>
<html>
<head>
  <style>
    p { color: blue; }
    p { color: red; }

    .red { color: red; }
    .blue { color: blue; }
  </style>
</head>
<body>
  <p>Will be RED.</p>    /* red로 표시 */
  <p class="blue red">Will be BLUE.</p>    /* blue로 표시 */
</body>
</html>

🎁 참조 및 출처

context_menu만들기
20/10/14

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage