-
[HTML&CSS] CSS 우선순위 적용 (!important)programming/HTML&CSS 2019. 11. 10. 00:00반응형
https://pixabay.com/ko/ - important 디자이너와 개발자가 따로 작업을 할 경우,
남이 만든 HTML&CSS에 내가 직접 스타일을 입히고 싶을 경우,
CSS, JS, HTML 파일이 완전히 분리된 상황에서 어느 것이 먼저 인지 헷갈릴 경우 등,
CSS 우선순위를 알아야 할 경우는 많다.
이때 무조건 !important 속성을 붙여서 해도 되긴 하지만,
적용 순서를 알아보면 !important 속성을 사용하지 않아도 적용할 수 있는 방법이 많다.
css_important.html
123456789101112131415161718192021222324252627282930313233343536373839<!DOCTYPE html><html><head><meta charset='utf-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'><title>Page Title</title><meta name='viewport' content='width=device-width, initial-scale=1'><style>h1{color : yellow !important;}</style><link rel='stylesheet' type='text/css' media='screen' href='main.css'><script src='main.js'></script><style>h1{color : orange;}#div2{background-color : gray !important;}</style></head><body><div id="div1"><h1 style="color:green !important">test h1-1</h1><h1 style="color:blue !important">test h1-2</h1><h1>test h1-3</h1></div><hr><div id="div2" style="background:yellowgreen;"><h2 style="color:red;">test h2-1</h2><h2 style="color:thistle">test h2-2</h2><h2>test h2-3</h2></div></body></html>main.css
1234567h1{color : red;}h2{color : purple;}위의 코드를 보면 여러가지 방법으로 스타일을 적용시켰다.
- 외부 css파일을 html에 삽입
- <style> 태그를 사용해 스타일 적용
- 외부 css파일 적용전 / 적용 후에 <style> 태그 사용
- 태그에 style 속성에 직접 사용
- !important 사용
해당 목록과 같이 여러 가지로 사용할 수 있다.
기본적으로 외울 스타일 순서는
나중에 적용된 스타일 또는 !important 다.
나중에 적용된다는 말은 코드가 아래로 실행될 때 가장 아래에 있는 코드로 실행된다는 것이다.
그래서 html에 <style> 태그로 적용을 해도 외부의 main.css가 적용되기 전에 발생하면,
main.css가 나중에 수행되므로 main.css의 스타일을 따른다.
그리고 <style>이 main.css보다 뒤에 수행된다면,
html에 선언된 <style> 태그의 스타일이 적용된다.
이러한 모든 것들은 무시하고 싶다면 !important 속성에 적어주면 된다.
모두 다 !important로 적용되어 있다면,
첫 번째처럼 뒤에 적용된 태그로 스타일이 적용된다.
반응형'programming > HTML&CSS' 카테고리의 다른 글
[HTML&CSS] 속성 검색 하기(값으로 시작, 포함, 끝) (0) 2019.12.14 [HTML&CSS] 마우스 커서 변경하기(물음표, 금지, 손가락 등) (0) 2019.11.11 [html] 스크립트 삽입 위치와 async, defer 속성 (0) 2019.10.26 탭인덱스 거꾸로 이동하기 (0) 2019.10.14 [HTML&CSS] 자식&자손 선택자, 선택자 여러개 선택하기 (0) 2019.09.30