all 속성
css 스타일 속성 중
all이라는 아이가 있는데, 요 아이는 예를들어 버튼을 생성하면 브라우저마다 기본적으로 적용되어있는 버튼의 기본 스타일 값을 초기화 시켜주는 아이다.
예를들어, 아래와 같이 버튼을 생성했다면?
<body>
<button> Click Me ! </button>
</body>이런 버튼이 생성된다.
여기서 all: unset;스타일 속성을 입혀주면,
button{
all: unset;
}이렇게 기본 버튼 모양이 초기화되어, 텍스트만 남게된다.
스타일이 초기화된 버튼에 배경색을 입혀주면?
button{
all: unset;
background-color: cornflowerblue;
} 이렇게 배경색이 입혀진다! 그말은 즉, 이제 원하는 스타일을 마음껏 적용해주면 된다는 것!
버튼의 폰트 컬러와 여백, 포인터, 동글동글한 모양으로 속성을 입혀주고나면~
button{
all: unset;
background-color: cornflowerblue;
color: white;
padding: 5px 20px;
border-radius: 10px;
cursor: pointer;
} 예쁜 버튼 완성!
아, 참고로 all:unset;속성을 해주지 않으면 기본 스타일과 새로 적어준 스타일이 충돌되어 아래와 같이 안에쁜 모양의 버튼이 생성되니 잘 확인 할 것!
참고
MDN참고하여 나머지 속성값 정리하기
https://developer.mozilla.org/ko/docs/Web/CSS/all
https://velog.io/@dev_cecy 로 벨로그 옮겼습니다👻❣️