CSS CSS 속성 초기화 방법 - unset 사용법, 모든 속성 초기화 및 css 해제
페이지 정보
조회 3,560회 작성일 22-04-27 02:35
본문
Unset 초기화
CSS 속성 초기화 방법
예를 들어, 헤드 부분에서 background-color를 정했는데 콘텐츠 영역에서 색을 없애야 한다면 어떻게 해야 할까?
다른 색으로 바꾸는 것은 쉽지만, 아무 색도 없도록 하는 것은 쉽지 않다. 그럴 때 사용하는 것이 unset이란 것이다.
CSS 속성 초기화 방법 - unset 사용법, 모든 속성 초기화 및 css 해제
Unset의 사용 방법
먼저 어떤 경우에 이것이 유용한지 예를 들어본다.
아래 css 스타일 코드는 topbox라는 div의 백그라운드 색을 빨간색으로 하라는 것이다.
[code]
<style type="text/css">
.topbox {background-color:#ff0000;}
</style>
<div class="topbox transbox"></div>
[/code]
만약 topbox를 여러 개 사용한 상태에서, 특정된 하나만 파란색으로 바꾸려고 한다면 아래처럼 하면 간단한 일이다.
[code]
<style type="text/css">
.transbox {background-color:#0066ff;}
</style>
[/code]
그런데, 색을 바꾸는 것이 필요한 것이 아니라 색 자체를 없애버리려면(초기화) 어떻게 해야 할까?
예를 들어, 바탕에 배경 사진이 있어서 div가 투명하게 보여야 한다면 말이다.
그럴 때 Unset를 사용한다.
CSS 속성 초기화 방법
unset라는 속성은 이전에 어떤 속성을 부여했든, 기존에 준 속성을 없애버리는 것이다.
아래 코드를 위의 코드와 비교해 보자.
[code]
<div class="topbox transbox"></div>
<style type="text/css">
.topbox.transbox {background-color:unset;}
</style>
[/code]
설명하자면, 위 스타일에서 .topbox.transbox란 topbox 클래스와 transbox 클래스가 2개 다 있는 경우에 사용한다는 것이다.
그리고 background-color:unset;은 백그라운드 색을 초기화한다는 것이다.
이게 생각보다 꽤 쓸만하다.
예를 들어, 다른 곳에서 코드를 불러다 쓰고 있는데, 일부분에서만 css 스타일을 해제해야 하는 경우가 있을 것이다.
이때 이것을 활용하면 아무런 속성도 정해주지 않았던 것처럼 사용할 수 있게 된다.
즉, 다른 곳에서 아무리 css 속성을 먹여놨더라도 없던 것처럼 할 수 있다는 것이다.
Unset의 css 해제 활용
위에서 사용한 background-color:unset;는 배경색만을 초기화하는 것이다.
그렇다면, 특정 class에 적용된 모든 것들을 한번에 초기화하려면 어떻게 하면 될까? [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
[code]
<div class="topbox transbox"></div>
<style type="text/css">
.topbox.transbox {all:unset;}
.topbox.transbox {background-color:red;}
</style>
[/code]
이처럼 all:unset라고 해놓으면 padding, border 등 수많은 속성이 정해져 있더라도 한 번에 모두 초기화해버릴 수 있다.
위 코드를 보면, 백그라운드 색을 최기화해 놓은 후, 자기 마음대로 다시 지정하는 것도 가능하다는 것을 알 수 있을 것입니다.
결론적으로 background-color:unset;처럼 한 속성에만 적용할 수도 있고, 한 번에 모든에 사용할 수도 있다는 것이다.
뿐만 아니라 블로그 같은 데서 일방적으로 정해진 CSS 스타일을 초기화시키고 마음대로 바꾸는 것도 가능하다.
매우 유용한 것이 아닐 수 없다.