CSS 스타일 우선 순위

CSS

CSS 스타일 우선 순위

mukom 2022. 10. 18. 23:09

CSS 는 Cascading 의 약자로 위에서 아래로 흐르는 스타일 시트라는 뜻이다.

즉, 지정해놓은 스타일 속성을 위에서 아래로 살펴 적용시킨다는 의미이다.

그렇다면 어떤 스타일을 적용시켜야 할지 어떻게 판단할 수가 있을까?

그건 바로 스타일에도 각자의 우선되는 원칙이 있기 때문에 적절한 스타일의 적용이 가능하다.

1. 스타일 우선 순위 - 중요도에 따른 우선 순위

스타일의 우선 순위는 먼저 스타일이 어디에서 선언되었는지에 따라 그 중요도를 달리 판단한다.

1️⃣ 사용자 스타일 시트의 중요 스타일
2️⃣ 제작자 스타일 시트의 중요 스타일
3️⃣ 제작자 스타일 시트의 일반 스타일
4️⃣ 기본적인 브라우저 스타일 시트

1️⃣ 사용자 스타일 시트의 중요 스타일

가장 최우선적으로 적용되는 스타일은 바로 사용자의 특별한 조건에 맞춰 적용하고자 하는 스타일 시트이다.

예를 들어 저시력자나 색약자 등을 위해 적용되어야 할 스타일의 조건은 다른 스타일 보다 우선시 되어 적용되어야 사용자가 만족스럽게 프로그램을 이용할 수 있게 될 것이다.

때문에 사용자가 시스템 단에서 조정하는 이러한 스타일은 브라우저에도 적용되어 나타나는 강력한 스타일 시트이다.

2️⃣ 제작자 스타일 시트의 중요 스타일

제작자가 CSS 를 구성 중 '!important' 를 사용하게 되면 해당되는 속성은 다른 스타일보다도 우선시 되어 적용된다.

!important 키워드의 강력한 점은 인라인 스타일을 이길 수 있을 정도이다.

보통 외부 CSS 를 가져다 쓸 때 내가 원하는 대로 스타일을 적용하기 위해 내 스타일로 우선 순위를 강제로 해야 할 때 사용하게 되는데 가능하면 사용을 지양하는 것이 좋다.

3️⃣ 제작자 스타일 시트의 일반 스타일

제작자가 구성하는 가장 기본적인 수준의 CSS 로, 해당 단계에서는 스타일의 적용 범위에 따라 우선 순위가 달라진다.

4️⃣ 기본적인 브라우저 스타일 시트

사용자가 사용 가능한 모든 브라우저는 각자의 기본적인 스타일 시트가 적용되어 있다.

[F12] 개발자 도구에서 ''user agent stylesheet' 부분에서 확인 가능하다.

제작자가 적용하지 않은 스타일이 있다면 브라우저 단에서 제공하는 기본 스타일이 적용된다.

2. 스타일 우선 순위 - 적용 범위에 따른 우선 순위

스타일은 그 적용 범위가 작을수록, 범위를 특정 지을수록 우선 순위가 높아진다.

1️⃣ 인라인 스타일
2️⃣ id 스타일
3️⃣ 클래스 스타일
4️⃣ 태그 스타일

1️⃣ 인라인 스타일

태그 내부에서 style 속성을 사용하는 것으로, 적용 범위가 가장 작기 때문에 다른 CSS 를 적용하려고 해도 적용되지 않을 정도로 우선 순위가 강력하다.

이러한 이유로 이후의 유지 보수에 있어서 큰 단점이 생기기 때문에 사용을 지양해야 한다.

2️⃣ id 스타일

태그 내에 식별자를 넣어 특정하는 방식으로 CSS 에서는 '#(id 명)' 으로 사용한다.

id 식별자는 한 문서 안에서의 중복을 허용하지 않는다는 특징이 있기 때문에 주의해야 한다.

식별자 id 는 보통 js 를 사용할 때 사용하기 때문에 CSS 를 적용하기 위해 사용하는 것은 지양해야 한다.

하지만 몇몇 태그에서는 id 를 사용해야 하는 경우가 있기 때문에 해당되는 경우를 알아둬야 한다.

3️⃣ 클래스 스타일

스타일을 특정지어 적용하거나, 그룹화하여 적용하고 싶을 때 사용할 수 있는 식별자로,

id 식별자와 달리 한 문서 안에서 중복을 허용한다.

주로 사용하게 되는 스타일 방식으로 '.(클래스 명)' 으로 사용한다.

4️⃣ 태그 스타일

태그 자체를 써서 CSS 스타일을 적용시키는 방식이다.

우선 순위 상에서 가장 후순위이기는 하지만 우선 순위를 높일 수 있는 방법이 있다.

그것은 body 또는 html 태그를 추가하는 것이다.

앞서 스타일을 적용시킬 영역을 특정할수록 우선 순위가 높아진다고 하였다.

이를 이용한 방법이다.

p {
	color : red;
}

body p {
	color : blue;
}

3. 소스의 순서

앞서 이야기한 중요도와 적용 범위가 만약 동일한 스타일이 있다면,

가장 마지막에 작성된 스타일이 최종 적용된다.

4. 스타일 상속

스타일의 상속은 태그의 포함 관계에 따라 달라진다.

포함하는 쪽을 부모 태그, 포함되는 쪽을 자식 태그라고 하고

자식 태그에 별도로 스타일을 적용하지 않으면 부모 태그의 스타일이 전달되는데 이것이 바로 '스타일 상속'이다.

<style>
	div {
    	color : blue;
    }
</style>

<body>
	<div>
    	<h2>여기는 h2 태그 영역</h2>
        <p>여기는 p 태그 영역</p>
    </div>
</body>

div 태그는 h2 와 p 를 자식 태그로 가진 부모 태그이다.

여기서 div 태그에만 스타일을 적용시키면 웹상에서는 다음과 같이 표현된다.

<style>
	div {
    	color : blue;
    }
    h2 {
    	color : red;
    }
    p {
    	color : orange;
        font-style : italic
    }
</style>

<body>
	<div>
    	<h2>여기는 h2 태그 영역</h2>
        <p>여기는 p 태그 영역</p>
    </div>
</body>

📌 태그의 배경은 투명이다

상속에서 가장 중요한 점은 부모 태그의 스타일 중 배경 이미지나 배경색은 상속되지 않는다는 점이다.

태그의 배경 이미지나 배경색은 기본값이 '투명'이기 때문에,

부모 태그에서 배경색을 적용하면 자식 태그에도 적용이 된 것처럼 보일 수는 있다.

하지만 이는 기본값인 '투명' 상태이기 때문이지 상속 적용된 것이 아님에 유의하자.