-
스타일 적용 우선순위HTML 2024. 11. 23. 23:44
HTML 문서에서 스타일을 적용할 때, 여러 가지 방법으로 스타일을 지정할 수 있습니다. 하지만 이렇게 지정된 스타일들이 충돌할 경우, 어떤 스타일이 적용될까요? 바로 스타일 적용 우선순위에 의해 결정됩니다.
1. !important 선언
important 라는 영단어는 '중요한, 영향력이 있는' 이라는 의미를 가지죠. 그 말처럼, !important 선언이 들어가면 스타일에서 가장 높은 우선순위를 갖게 됩니다. 그렇기 때문에 남용해서는 안되고, 정말 중요할 때만 사용되어야 합니다.
p { color:red !important; }2. 인라인 스타일
html 파일 내 스타일 속성 직접 부여하는 방식으로, 스타일 태그 내 부여와는 다릅니다. 다른 스타일보다는 우선 적용되지만, 스타일과 html 코드가 섞여 코드의 가독성이 떨어질 수 있어 권장되지 않습니다.
<p style="color: red">Language-weaver</p>3. CSS Selector, ID 선택자
ID 선택자는 Class 선택자보다 우선 적용됩니다. 다만, ID 선택자는 JavaScript 개발할 때 우선적으로 사용되기 때문에 Style적으로는 잘 사용되지 않습니다. 사용하게 될 경우, ID 선택자는 특정 요소에만 스타일을 적용할 때 사용합니다.
<p id="weave">free-weaver</p>#weave { color: red; }4. CSS Selector, Class 선택자, 의사 클래스, 속성 선택자
class 속성, 의사 클래스(:hover, :active 등), 속성 선택자([type="text"] 등)를 사용하여 요소를 선택하는 경우에 해당됩니다.
4-1. Class 선택자
Class 선택자는 여러 요소에 동일한 스타일을 적용할 때 사용합니다.
<p class="weave">code-weaver</p>.weave { color: red; }4-2. 의사 클래스
특정 조건이나 상태에 있는 요소를 선택하기 위해 사용하는 선택자를 이릅니다. 마치 가상의 클래스처럼 동작하며, 요소의 상태에 따라 스타일을 다르게 적용할 수 있게 해줍니다.
:hover: :active: :focus: :first-child: :last-child:4-3. 속성 선택자
속성 선택자는 HTML 요소의 속성을 기준으로 선택하는 방법입니다. 특정 속성을 가지고 있는 요소 또는 속성 값이 일치하는 요소를 선택할 수 있습니다.
[attribute]: [attribute="value"]:5. 태그 선택자
html에서 가장 낮은 우선순위를 가집니다.
p { color: red; }6. 브라우저 기본 스타일
인터넷 브라우저 별로 기본적으로 적용되는 스타일이 있는데, 위에 언급된 모든 스타일보다 가장 낮은 우선순위를 가지고 있습니다.
※ CSS 파일의 위치: 외부 스타일 시트의 경우, HTML 문서에서 <head> 태그 안에 선언된 순서에 따라 우선순위가 결정됩니다.
※ 브라우저 개발자 도구: 브라우저 개발자 도구를 사용하여 요소에 적용된 스타일을 확인하고, 우선순위를 분석할 수 있습니다.
※ 동일한 스타일 우선순위 안에서는, 아래에 있는 스타일이 우선 적용됩니다.스타일 적용 우선순위를 잘 이해하고 활용하면 더욱 효율적으로 CSS를 작성할 수 있을 것 같네요. 혹시 잘못된 점이 있거나 하면 댓글로 알려주시면 좋을 것 같습니다.
'HTML' 카테고리의 다른 글
색상 설정하기 - style 태그 background-color 속성 (0) 2024.11.26 title 태그 (0) 2024.11.24 단위 (0) 2024.11.22 HTML 스타일 요소를 CSS 파일로 옮기기 (1) 2024.11.20 "mark" 태그 (1) 2024.11.19