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 스타일 우선순위는 다양한 선택자에 따라 다르게 적용됩니다.
명시도를 이해하고 계산하여 스타일이 올바르게 적용되도록 하는 것이 중요하겠습니다.
테스트 시 의존성 주입(Dependency Injection)과 Mockito Spring 애플리케이션을 개발하다 보면, 테스트 코드에서 실제 빈(Bean)을 사용하지…
들어가며 스프링 기반 프로젝트에서 좋은 설계 구조와 테스트 전략은 소프트웨어 품질과 유지보수성에 직결됩니다. 최근 학습한…
Readable Code: 읽기 좋은 코드를 작성하는 사고법Practical Testing: 실용적인 테스트 가이드 강의와 함께한 인프런 워밍업 클럽…
Readable Code: 읽기 좋은 코드를 작성하는 사고법Practical Testing: 실용적인 테스트 가이드 강의와 함께한 인프런 워밍업 클럽…
들어가며 코드를 작성할 때 종종 "이 로직을 어떻게 단순하고 읽기 쉽게 표현할 수 있을까?" 고민하게…
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 바둑이