CSS - Cascading

kim woohyun·2023년 10월 21일

CSS

목록 보기

1/2

- CSS 란

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
-Mozilla Developer Network(MDN)

CSS란 Cascading Style Sheets 의 약자로써 Html(HyperText Markup Language)로 마크업한 문서를 표시하는 방법을 지정하는 언어입니다. 즉 html로 작성한 문서를 꾸미거나 디자인 할 수 있는거죠
마크업한 문서를 표시하는 방법을 꾸미고 디자인 한다고하여 Style Sheets라고 한다면 그 앞의 Cascading은 무엇일까요 ? CSS에서의 첫번째 글자로 선택될만큼 중요한 부분이라고 생각합니다.

- Cascading

Cascading의 뜻은 ' 폭포같이 쏟아져 내리는 , 흐르는 ' 등의 뜻을 가지고있습니다.
CSS에 작성시 해당 스타일을 어떠한 방법으로 적용하냐에 따른 우선순위가 있는데 이러한 우선순위 적용방식이 흐르는 폭포와 비슷하기에 이러한 이름이 붙었습니다.

예를 들어 볼까요?

<div style = "color : red">
  <p>안녕하세요</p>
</div>

해당코드 작성시 div 에 적용된 color : red 스타일이 아래의 p 까지 상속 된 걸 확인할수 있습니다.
이러한 상위 요소의 스타일 속성을 자식,자손들에게 상속시켜주는 모습이 꼭 폭포같이 아래로 흘러내린다하여 ' Cascading Style Sheets ' 라는 이름이 붙었습니다.

하지만 !

꼭 전부 다 상속되는것은 아닙니다. 아래에서 Cascading의 우선순위를 한번 확인해 봅시다.

- Cascading의 우선순위 (명시도)

위 부터 높은순위 입니다.
1.important !important
2.인라인스타일 <p style=''>
3.id 선택자 #id
4.class 선택자 .class
5.태그 선택자 <h2> , <p> 등등

명시도 계산법

!important (9999) > inline-style(1000) > id(100) > class(10) > tag(1)

ex)

div#cascading p.cascading {
 	/ * #(아이디) 1개 : 100
   .(클래스) 1개 : 10
   태그 2개 : 2 
   명시도 : 0112 * /
   }

div {
	color : red !important
}

/ * 명시도 : 9999 (모든 케스케이딩 무시) * /

위와 같은 방법으로 계산이 가능하며 편리한 계산을 위해 https://specificity.keegan.st/ 해당 사이트로 계산을 하는 방법도 있습니다.

!important는 과하게 남용시 캐스캐이딩 규칙을 깨트려 혼란을 발생시킬수있어 주의하여야 합니다.

- Cascading의 우선순위2 (상속)

첫 문단에서 설명 한 것 처럼 부모요소의 스타일 속성이 자식, 자손에게 물려지는것을 뜻 합니다.
각 속성은 가까운 조상일수록 높은 우선순위를 가지며 위의 명시도를 가진 CSS규칙보다는 우선순위가 낮습니다.

 <body style="
         font-size: 60px; 
         font-weight: 700">
    <div style="font-size: 20px">
      <p>안녕하세요</p>
   </div>
  </body>

( 위의 예시에서 p에는 font-size : 20px , font-weight : 700이 상속되어 적용됩니다 )

2023 - 10 - 21 / CSS Cascading

kim woohyun

다음 포스트