[CSS] Cascading(케스케이딩)

hye0n.gyu·2023년 10월 11일

CSS

목록 보기

2/17

⭐CSS(Cascading Style Sheets)

CSS는 Cascading Style Sheet의 줄임말이다.
Cascading은 "폭포처럼 떨어져 내리는" 또는 "상속 또는 종속" 이라는 뜻이다.
이는 Cascading이 CSS에서 가장 중요한 스타일 적용 규칙(스타일 우선 순위, 스타일 상속) 임을 의미한다.

⭐1. style 우선 순위

스타일 우선 순위는 세 가지에 따라 지정된다.
①중요도
② 적용 범위
③ 소스 순서

💡① 중요도

중요도를 결정하는 우선 순위는 다음과 같다.

1순위: 사용자 스타일 시트
2순위: 제작자가 만든 스타일
3순위: 기본적인 브라우저 스타일

1순위:사용자 스타일 시트

여기서 사용자 스타일 시트라는 것은 저시력자나 색약자 등과 같이 특별한 조건이 필요한 사용자가 그들에 맞게 구성해 놓은 스타일 시트라는 것을 의미한다.

저시력자는 글자를 명확하게 읽기 위해서 윈도우의 '고대비' 설정을 사용할 수 있다. 이러한 스타일이
사용자 스타일 시트의 예시이다.

2순위: 제작자가 만든 일반 스타일

제작자가 만든 !important 스타일과 달리 웹페이지 제작자가 스타일 시트를 만들때 속성값 뒤에 !important를 쓰지 않은 경우 이다.

3순위: 기본적인 브라우저 스타일

Chrome이나 파이어 폭스 처럼 브라우저에서 만들어놓은 기본 스타일을 말한다.

💡② 적용 범위

적용 범위를 결정하는 우선 순위는 다음과 같다.
1 순위: !important 스타일
2 순위: inline 스타일
3 순위: id 스타일
4 순위: class 스타일
5 순위: 타입 스타일

1순위: !important 스타일

제작자가 만든 !important 스타일은 웹페이지 제작자가 스타일 시트를 만들때 속성값 뒤에
!important 라고 써놓은 것을 말한다.

예시

p {
	text-align: center;
	color: blue;
	!important;
}

2순위: inline 스타일

'inline 스타일'이란 html 태그 안쪽에 style 속성을 사용한 스타일을 말한다.

예시

<!-- html 태그 -->
<p style="color: blue;">inline 스타일</p>

3순위: id 스타일

'id 스타일'이란 선택자 이름 앞에 #을 사용해 아이디 선택자를 사용한 스타일을 말한다. 지정한 부분에만 적용하는 스타일이지만 한 문서에 한 번만 적용할 수 있다.

예시

<html>
<head>
<style>
	#ex_id{ background-color: #88D8FD; width: 130px; height: 40px; }
</style>
</head>
<body>
	<div id="ex_id">아이디 스타일</div>
</body>
</html>

아이디 스타일

4순위: class 스타일

'class 스타일'이란 선택자 이름 앞에 마침표(.)를 사용해 클래스 선택자를 사용한 스타일을 말한다. 한 문서에 여러 번 적용할 수 있다.

예시

<html>
<head>
<style>
	.ex_class{ width: 120px; height: 50px; border: 2px solid; }
</style>
</head>
<body>
	<div class="ex_class">&nbspclass 스타일1</div>
	<div class="ex_class">&nbspclass 스타일2</div>
</body>
</html>

class 스타일1

class 스타일2

5순위: 타입 스타일

type 속성은 <style> 태그와 </style> 태그 사이에 위치하는 콘텐츠의 미디어 타입을 명시한다.

예시
<style> 태그와 </style> 태그 사이에 스타일을 정의한 것들이 타입 스타일이다.
<style type="text/css">
    body { background-color: lightpink; }
    h1 { color: red; }
    p { text-decoration: underline; }
</style>

💡③ 소스 순서

중요도와 적용 범위가 같다면 '소스 순서'에 따라 우선 순위가 결정된다.
소스 순서는 나중에 나온 스타일이 먼저 나온 스타일을 덮어 쓴다

⭐2. style 상속

웹 문서에 사용하는 여러 태그는 서로 포함 관계가 있다. 이때 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 한다. style 시트에서 자식 요소에서 별다른 요소를 지정하지 않으면 부모 요소의 속성들이 자식 요소로 전달되는데 이를 style 상속이라고 한다.

태그와 속성에 따라 상속이 되지 않는 경우들이 있다.

상속되는 프로퍼티
font-family, font-size, font-weight, line-height, visibility, opacity, color, line-height, text-align, white-space, list-style

상속이 되지않는 프로퍼티(inherit을 쓰면 상속을 받을 수 있다)
margin, padding, border , box-sizing, display, background, vertical-align, text-ecoration, top/right/bottom/left, position, overflow, width/height

💡예시

a태그 CSS 기본값

a:link, a:visited {
  color: (internal value);
  text-decoration: underline;
  cursor: auto;
}

a태그는 이미 color 값이 정해져 있어 상속되지 않는다. (자식 태그의 별다른 요소가 지정되어 있지 않을 경우 상속)

예시

 <!DOCTYPE html>
<html>
<head>
  <title>Ex_inherit</title>
  <style>
    h1 {
      color : skyblue
    }
  </style>
</head>
<body>
  <h1>
    <p>p 태그</p>
    <a href="#">a 태그(밑줄)</a>
  </h1>
</body>
</html>