늘 겸손하게

HTML, CSS - Cascading 본문

Programming/HTML,CSS

HTML, CSS - Cascading

besforyou999 2022. 7. 20. 17:59

Cascading은 '위에서 아래로 흐르는', '상속받는' 등의 의미를 가집니다. CSS에서 Cascading은 상속 우선순위로 이해할 수 있습니다.

 

적용가능한 스타일이 여러가지일때 스타일간의 우선순위가 정해져야 하나의 HTML 요소에 어떤 스타일을 적용할지 결정할 수 있습니다. 이렇게 우선순위를 결정하는것을 Cascading이라고 합니다.

 

 

<body>

  <div>

    <p>배고프다</p>

  </div>

</body>

 

 

예시로 위와 같은 html에서 <body>의 글자색는 빨간색, <div>의 글자색은 파랑색, <p>의 글자색은 초록색으로 설정하면 "배고프다"는 어떤 색으로 출력될까요? 위처럼 동시에 여러 스타일의 영향을 받는 HTML 요소에 어떤 스타일을 적용할지 결정하기 위해서는 스타일간에 우선순위가 정해져야합니다. 이러한 우선순위를 결정하는것이 Cascading 입니다.

 

 

 

Cascading 우선순위 결정 규칙 ( Cascading Order )

 

1. 중요도 : CSS가 어디에 선언되었는지 따라서 우선순위가 달라진다

 

2. 명시도 : 대상이 명확할수록 우선순위가 높다

 

3. 선언 순서 : 나중에 선언된 스타일의 우선순위가 높다

 

 

1. 중요도

  1. 인라인 스타일 (HTML 요소 내부의 style 속성)
  2. 내부 스타일 시트(HTML 문서의 style 태그 내부)
  3. 외부 스타일 시트(CSS 파일을 불어와 사용할 경우)
  4. 웹 브라우저 기본 스타일

 

따로 설정한 스타일이 없다면 웹 브라우저 기본 스타일로 설정됩니다.

 

 

2. 명시도

 

순서 : !important > 인라인 스타일 > 아이디 선택자 > 클래스 선택자 > 태그 선택자 > 전체 선택자 > 상속된 속성

 

아이디 선택자 : #

클래스 선택자 : .

전체 선택자 : *

예시

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <style> 
      .firstClass { color: red !important; }

      .secondClass { color: red; }
      #testId { color: blue;}

      p { color: green;}
      .thirdClass {color: yellow;}

    </style>
  </head>

  <body>
    <p class="firstClass" style="color: blue">
      Testing !important
    </p>

    <p id="testId" class="secondClass">
      Testing id selector and class selector
    </p>

    <p class="thirdClass">
      Testing Tag selector and class selector
    </p>
  </body>

</html>

결과

 

3. 선언 순서

 

나중에 선언된 스타일의 우선순위가 높습니다.

 

예시

<!doctype html>
<html>
  
  <head>
    <meta charset="utf-8">
    <style>
      .blue {color: blue;}
      .red {color: red;}
    </style>
  </head>

  <body>
    <h1 class="blue red">
      JavaScript
    </h1>
    <p class="red blue">
      JavaScript 
    </p>
  </body>

</html>

결과

 

 

'Programming > HTML,CSS' 카테고리의 다른 글

CSS - 반응형 웹 디자인?  (0) 2022.08.24
HTML, CSS - CSS 애니메이션과 JS 애니메이션의 차이점  (0) 2022.08.09
HTML div - 원소 가로 정렬(배치)  (0) 2022.07.11
HTML - HTML Form Validation  (0) 2022.06.12
HTML Conventions  (0) 2022.06.03
'Programming/HTML,CSS' Related Articles more