IT

!important 태그를 이용해 스타일 우선 순위 지정하기

윤시즈 2020. 3. 4. 14:03

CSS에서 다른 스타일이 내가 적용하려는 스타일이 적용되는 것을 방해한다면, 이번 시간에 소개시켜드릴 !important 태그를 사용하여 해결할 수 있습니다. !important 태그는 스타일의 우선순위를 최상단으로 지정하기 때문에 다른 어떤 스타일이 적용되어 있어도 !important 태그를 붙인 스타일이 적용됩니다. 예시를 통해 자세히 알아보도록 하겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>!important 태그 알아보기</title>
</head>
<body>
    <p>테스트</p>
</body>
</html>
p {
  color: #000000;
}

위와 같은 HTML 코드와 CSS 코드를 사용하면, <p> 태그 안에 둘러쌓인 테스트라는 글씨는 색상이 검은색으로 변합니다. 하지만, 이미 저렇게 CSS에서 p 태그의 색상이 할당되어 있는데도 불구하고 색상을 하얀색으로 지정하고 싶다면 이번 시간에 활용되는 !important 태그를 사용하면 해결됩니다.

p {
  color: #000000;
}

p {
  color: #ffffff !important;
}

 

반응형