css
CSS 명시도는 스타일 규칙이 적용되는 우선순위를 결정하는 값입니다.
CSS 스타일 우선순위와 명시도에 대하여 알아보겠습니다.
기본적으로 CSS 에서는 나중에 적은 스타일을 우선 적용합니다.
즉 우선순위가 같을 때 나중에 작성한 스타일을 우선 적용한다는 뜻입니다.
또한 더 구체적으로 작성한 선택자의 우선순위가 더 높습니다.
선택자 우선순위를 낮은 순 부터 정리하면 다음과 같습니다.
다음은 우선순위가 낮은 것 부터 순서대로 예제와 함께 나열하겠습니다.
모든 요소에 스타일을 적용하는 선택자로, 다른 모든 선택자보다 우선순위가 낮습니다.
* {
color: green;
}이 예제에서는 모든 <p>태그에 대해 글자색을 파란색으로 지정합니다.
태그 선택자는 다른 선택자보다 우선순위가 낮습니다.
p {
color: blue;
}이 예제에서는 class=”box”인 모든 요소에 대해 배경색을 파란색으로 지정합니다.
class 선택자는 태그 선택자보다 우선순위가 높습니다.
.box {
background-color: blue;
}ID 선택자는 태그나 class 선택자보다 우선순위가 높습니다.
#box {
border: 1px solid green;
}이 처럼 HTML 태그 안에 직접 스타일을 적용한 것이 ID 선택자 보다 우선순위가 높습니다.
<p style="color: red;">이 텍스트는 빨간색</p>는 CSS 스타일 속성에 사용되는 특별한 키워드로, 해당 속성에 대한 우선순위를 최상으로 높입니다. 이를 사용하면 다른 모든 스타일 규칙을 무시하고 해당 속성이 지정한 값이 적용됩니다.
.box {
background-color: orange ;
}점수를 계산해서 어느 것이 더 우선순위가 높은지 쉽게 파악 할 수 있습니다.
예제와 함께 점수를 계산해보겠습니다.
div {
background-color: blue;
}위 예제는 태그 선택자 이므로 0 – 0 – 1 점 입니다.
ul > li {
font-size: 20px;
}위 예제는 태그 선택자가 2개 이므로 0 – 0 – 2 점 입니다.
#box > div > .menu {
background-color: orange;
}위 예제는 ID 선택자, 태그 선택자, class 선택자로 1 – 1 – 1 점이 됩니다.
이처럼 점수를 계산해서 더 높은 점수를 가진 스타일이 우선 적용 됩니다.
CSS 스타일 우선순위는 다양한 선택자에 따라 다르게 적용됩니다.
명시도를 이해하고 계산하여 스타일이 올바르게 적용되도록 하는 것이 중요하겠습니다.
인터넷 네트워크란? "인터넷(Internet)"이라는 단어는 "인터네트워크(Internetwork)"의 줄임말입니다. 즉, 여러 개의 네트워크가 상호 연결되어 전 세계적으로 하나의…
스프링 빈(Spring Bean)과 IoC 컨테이너 스프링 프레임워크의 핵심 철학은 IoC(Inversion of Control) 컨테이너를 통해 객체(빈,…
스프링 빈이란? 스프링 프레임워크에서 "스프링 빈(Bean)"이란, IoC(Inversion of Control) 컨테이너가 직접 관리하는 객체를 말합니다. @Component,…
의존성 주입(Dependency Injection)이란? 프로그램을 개발하다 보면, 여러 클래스나 객체들은 서로 필요한 기능을 사용하기 위해 관계를…
컴포넌트 스캔이란? 컴포넌트 스캔(Component Scan)은 스프링 프레임워크가 특정 패키지를 탐색하면서, 스캔 대상에 해당하는 클래스를 찾아…
스프링 빈이란? 스프링 빈(Spring Bean)은 스프링 IoC(Inversion of Control) 컨테이너가 관리하는 자바 객체를 의미합니다. 간단히…
View Comments
Wow that was unusual. I just wrote an very long comment
but after I clicked submit my comment didn't appear. Grrrr...
well I'm not writing all that over again. Anyhow, just wanted to say fantastic
blog!
My homepage 바둑이