!중요 규칙은 웹 페이지의 스타일을 재정의하는 데 사용됩니다. 솔직히 말해서, 당신이해서는 안 되는 이유가 더 많습니다. !중요한 규칙을 사용해야 하는 이유를 사용하십시오. 어떻게 사용되는지 그리고 왜 드물게만 사용해야 하는지 논의해 보겠습니다.
사용자 에이전트 스타일시트 재정의
CSS를 작성할 때 주어진 스타일시트를 덮어써야 하는 경우가 있습니다. 부트스트랩과 같은 CSS 프레임워크를 사용하여 프로젝트를 시작하고 실행하는 경우 프레임워크에 내장된 스타일을 사용자 정의할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Important Keyword: Overriding Bootstrap</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<style>
.container {
display: flex;
}
.nav {
color: black;
background-color: pink;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</a>
<div
class="dropdown-menu"
aria-labelledby="navbarDropdown"
>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"
>Something else here</a
>
</div>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true"
>Disabled</a
>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button
class="btn btn-outline-success my-2 my-sm-0"
type="submit"
>
Search
</button>
</form>
</div>
</nav>
<div class="container">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"
></script>
</body>
</html>
위의 코드 편집기에서 무슨 일이 일어나고 있는지 이해하는 것에 대해 너무 걱정하지 마십시오. 실행 버튼을 누르고 하는 일을 기록하세요. 에 대해 알고 있습니다. 클래스 및/또는 ID가 있는 것처럼 보이는 HTML, Bootstrap에서 가져온 것일 수 있음을 나타내는 CSS 스타일시트에 대한 링크, 그리고 <head> 에 자체 스타일 일부가 있습니다. 제대로 렌더링되지 않는 문서입니다.
.navbar에서 background-color: pink;를 언급하는 선택기 ,
'!중요한'. 색상과 !중요 규칙 사이에 공백을 포함하십시오. 코드를 다시 실행하십시오. 탐색 모음의 배경색이 변경되었습니까?
이것은 !important 규칙의 첫 번째 사용 사례입니다. CSS 프레임워크 또는 다른 곳에서 사용자 에이전트 스타일시트가 제공되면 규칙을 사용하여 Bootstrap과 함께 제공되는 스타일을 재정의할 수 있습니다.
인라인 스타일 재정의
또 다른 사용 사례는 요소의 인라인 스타일을 재정의해야 하는 경우입니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Important Keyword: Overriding Inline Styles</title>
<style>
.line-item:first-child{
color: purple;
}
.line-item:last-child {
color: crimson;
font-size: xx-large;
font-variant: normal;
}
</style>
</head>
<body>
<h1>Doctor Who Characters</h1>
<ul>
<li class="line-item" style="color: rosybrown; font-size: large;">Rose Tyler</li>
<li class="line-item">Jackie Tyler</li>
<li class="line-item">Mickey</li>
<li class="line-item" style="color:royalblue; font-size: larger; font-variant:small-caps;">The Doctor</li>
</ul>
</body>
</html>
코드 본문에 일부 인라인 스타일이 있고 <style>에서 이를 재정의할 수 있는 잠재적인 스타일이 있습니다. 위의 코드 편집기에서 태그. CSS에서 !important 규칙을 사용하여 인라인 스타일을 재정의합니다.
!important 규칙이 반드시 모범 사례는 아니며 비교적 드물게 사용해야 한다는 점을 기억하십시오. 나중에 길에서 찾기 힘든 버그로 이어질 가능성이 있습니다.
!important 규칙을 사용할 필요성을 느끼고 프레임워크를 사용하지 않는 경우 일반적으로 선택기를 재구성하여 보고 싶은 것을 더 잘 렌더링할 수 있습니다.