CSS - 캐스케이딩(Cascading)

CSS - 캐스케이딩(Cascading)

2020. 11. 6. 23:51ㆍ공부 정리/Front end

1. 캐스케이딩(Cascading)

하나 이상의 CSS선언에 영향을 받을 수 있는데 충돌을 피하기 위해 CSS적용 우선순위를 정한 규칙

a. 중요도

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

head 요소 내의 style 요소
head 요소 내의 style 요소 내의 @import문
<link>로 연결된 CSS파일
<link>로 연결된 CSS파일 내의 @import문
브라우저 디폴트 스타일시트

※@import

다른 스타일 시트에서 스타일 규칙을 가져올 때 쓴다. @charset규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 한다. 중첩 명령문이 아니기 때문에 조건부 그룹 @규칙 내에 사용할 수 없다.

구문

@import url;
@import url list-of-media-queries;

url

import할 자원의 위치를 나타내는 <string>, <uri>

URL은 절대 또는 상대일 수 있다. URL은 실제 파일에 지정하지 않고 패키지 명 및 일부로 지정하면 적절한 파일이 자동으로 선택

list-of-media-queries

링크된 URL 내에 정의된 CSS 규칙의 적용을 조절하는 쉼표 구분된 미디어 질의 목록

브라우저가 이러한 질의를 지원하지 않으면, 링크된 자원을 로드하지 못한다.

b. 명시도(specificity)

브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단

대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.

1. !important: 스타일 선언에 사용된 경우, 다른 선언보다 우선시한다.

엄밀히 말하면 명시도와 관계가 없지만 명시도에 직접 영향을 미친다. 하지만 스타일시트 내 자연스러운 종속을 깨트려 디버깅을 어렵게 만들기에 사용에 자제해야 한다. 외부 CSS를 재정의하는 페이지 전용 CSS에서만 쓰는 걸 추천, 플러그인, 매시업을 작성할 때, 사이트 전반 CSS에서는 사용금지

2. 인라인 스타일: 한 줄짜리 짤막한 스타일, 태그 안에 직접 지정하여 사용

<p style="color:red;">Paragraph</p>

Paragraph

3. 아이디 선택자(ID Selector): 특정 값을 id 속성(attribute)의 값으로 갖는 요소를 선택

#abc {
  color: red;
}

4. 클래스 선택자(Class Selector)/속성 선택자(Attribute Selector)/가상 선택자(Virtual Selector)

클래스 선택자(Class Selector): 주어진 값을 class 속성 값으로 가진 HTML요소를 찾아 선택

.abc

속성 선택자(Attribute Selector): 특정 속성을 갖고 있거나 특정 속성이 특정 값 등을 갖고 있는 요소를 선택

자세히는 여기서...

www.codingfactory.net/10792

가상 선택자(Virtual Selector): 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있다.

가상 클래스를 효과적으로 사용하면, HTML, CSS 및 JavaScript의 코드를 효과적으로 줄일 수 있다.

<html>
<head>
<style>
	.box{
		background-color: #09c;
		padding: 10px;
		margin-bottom: 20px;
	}
	.hover-box:hover{
		background-color: orange;
	}
</style>
</head>
<body>
	<div class="box hover-box">
		마우스를 올려보세요.
	</div>
</body>
</html>

5. 태그 선택자(Type Selector): HTML요소를 직접 지칭하는 가장 간단한 선택자

태그이름 { 속성1: 속성값1; 속성2: 속성값2; }

<html>
<head>
	<style>
		h5 { color:#F00; }
		h6 { color:#0F0; font-size: 30px }
	</style>
</head>
<body>
	<h5>h5태그</h5>
	<h6>h6태그</h6>
</body>
</html>

6. 상위 요소에 의해 상속된 속성

전역 선택자(*), 조합자(+,>,~,' ',||)및 부정 의사 클래스(:not())는 명시도에 영향을 주지 않는다.

단, :not() 내부에 선언한 선택자는 영향을 끼친다.

c. 선언 순서

선언된 순서에 따라 우선순위가 적용, 나중에 선언한 스타일이 우선 적용된다.

참고

'공부 정리 > Front end' 카테고리의 다른 글

cross domain issue (0)	2020.12.11
JSTL (0)	2020.11.11
DOM(Document Object Model) (0)	2020.11.09
CSS - 상속(Inheritance) (0)	2020.11.02
style을 HTML 페이지에 적용하는 3가지 방법 (0)	2020.11.02

정리용블로그