반응형
같은 속성을 여러번 정의했을 때 우선순위가 높은 설정값이 최종적으로 적용됩니다.
만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙이면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Document</title>
<style>
div{
border-color:black;
border-style:solid;
}
</style>
</head>
<body>
<div class ="container" style="border-color: blue;">
<iframe src ="TopBanner.html" height="400px"; width ="500px" scrolling="no" ></iframe>
</div>
</body>
</html>인라인 스타일은 힘이 강하죠 그래서 blue가 적용되는 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Document</title>
<style>
div{
border-color:black !important;
border-style:solid;
}
</style>
</head>
<body>
<div class ="container" style="border-color: blue;">
<iframe src ="TopBanner.html" height="400px"; width ="500px" scrolling="no" ></iframe>
</div>
</body>
</html>하지만 !important를 적용시켰을 때 이렇게 바뀝니다.
반응형
'[HTML && CSS] > [CSS]' 카테고리의 다른 글
| [CSS] border에 넓이 포함시키지 않기 box-sizing (서로 다른 div 크기 [Border]) (0) | 2021.06.26 |
|---|---|
| [CSS] 외부 CSS HTML에서 호출하기 (link rel="stylesheet" href="") (0) | 2021.06.26 |
| [CSS] FlexBox(플렉스 박스), Grid(그리드) [레이아웃 배치 및 정렬], place-content (0) | 2021.06.24 |
| [CSS] 블록(Block), 인라인(Inline), 인라인 블록(Inline-Block) [display:block, inline , inline-block] (0) | 2021.06.24 |
| [CSS] CSS 적용순서 (우선 순위) (0) | 2021.06.24 |