🎨 요소의 기본 디자인 리셋 - all 속성

CSS - all 속성

all 단축 속성은 요소의 unicode-bidi (en-US), direction (en-US), CSS 사용자 지정 속성을 제외한 모든 속성을 초기화 한다.

 

예를들어 버튼을 생성하면 브라우저마다 기본적으로 적용되어있는 버튼의 기본 스타일 값을 초기화 시켜줄 수 있다.

<button> Click Me ! </button>

 

all: unset; 을 해주면 기본 버튼 모양이 초기화되어, 텍스트만 남게된다.

button{
	all: unset; 
}

 

<button> 과 <a> 의 디자인을 통일하기 위해서 등, 태그의 디폴트 디자인을 없애거나 통일할 경우에 같이 편리하게 쓸 수 있다.

button{
    all: unset; /* 유의할점은 정의할때 가장 처음에 써줘야 된다. 뒤에다 써주면 그 위의 스타일들도 초기화되게 된다. */
    background-color: cornflowerblue;
    color: white;
    padding: 5px 20px;
    border-radius: 10px;
}

all: unset 안하고 꾸민 버튼

all: unset 하고 꾸민 버튼

all:unset;속성을 해주지 않으면 기본 스타일과 새로 적어준 스타일이 충돌되어 위와 같이 기본값 디자인이 잔재해 있게 된다.

---

all 속성 값 정리

/* 전역 값 */
all: initial;
all: inherit;
all: unset;

/* CSS Cascading and Inheritance Level 4 */
all: revert;

• initial
  : 요소의 모든 속성을 초깃값으로 변경.
• inherit
  : 요소의 모든 속성을 상속값으로 변경.
• unset
  : 요소의 모든 속성을, 속성이 값을 상속하는 경우 상속값으로, 아니면 초깃값으로 변경.
• revert
  : 선언이 속한 스타일시트의 출처에 따라 다른 동작