웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
CSS property 중 하나인 all에 대하여 알아봅니다. CSS에서 all은 무엇이고 언제 사용할까요?
# CSS property all 알아보기
CSS 프로퍼티인 all은 부모로부터 전달받거나 현재 자신이 가지고 있는 모든 CSS 속성을 제거할 수 있도록 도와줍니다. 선택 가능한 값으로 아래와 같이 세 가지가 있습니다.
이를 사용하면 현재 적용되있는 스타일을 한번에 제거할 수 있어 매우 유용합니다. 특히 브라우저가 가진 스타일 속성도 제거할 수 있어 많이 사용되는 reset.css 파일의 역할도 수행할 수 있습니다.
예를들어 아래와 같이 input 태그 두 개를 각각 그리고 하나는 기본... 두 번째는 all: unset을 적용해보았을때 차이를 알아봅니다.
@ 적용 전
@ 적용 후 (all: unset)
위와 달리 아래의 input 엘리먼트는 모든 css 스타일이 제거되어 나타납니다.
! 브라우저 지원사항
참고로 all 프로퍼티는 현재 최신 브라우저 가능하나 Edge 및 IE에서는 지원되지 않습니다.
# CSS property all 알아보기
CSS 프로퍼티인 all은 부모로부터 전달받거나 현재 자신이 가지고 있는 모든 CSS 속성을 제거할 수 있도록 도와줍니다. 선택 가능한 값으로 아래와 같이 세 가지가 있습니다.- initial : 초기값으로 설정됨
- inherit : 부모 상속된 스타일만 적용됨
- unset : 초기 및 부모 스타일 속성 모두를 제거함
이를 사용하면 현재 적용되있는 스타일을 한번에 제거할 수 있어 매우 유용합니다. 특히 브라우저가 가진 스타일 속성도 제거할 수 있어 많이 사용되는 reset.css 파일의 역할도 수행할 수 있습니다.
예를들어 아래와 같이 input 태그 두 개를 각각 그리고 하나는 기본... 두 번째는 all: unset을 적용해보았을때 차이를 알아봅니다.
@ 적용 전
<input type="text" value="webisfree" />
@ 적용 후 (all: unset)
<input type="text" value="webisfree" style="all: none;" />
위와 달리 아래의 input 엘리먼트는 모든 css 스타일이 제거되어 나타납니다.
! 브라우저 지원사항
참고로 all 프로퍼티는 현재 최신 브라우저 가능하나 Edge 및 IE에서는 지원되지 않습니다.아래의 글도 찾고 계시지 않나요?
