css의 all 속성으로 css reset 효과내기

css reset을 사용하는 이유

각 브라우저마다 기본적으로 태그가 갖고 있는 디자인은 다릅니다. 단순히 표현하자면 각자가 예쁘다고 느끼는 것이 다르기 때문에 똑같아야 하는 것들만 똑같고, 마진 같이 자율적으로 값을 줄 수 있는 것은 브라우저에서 예쁘다고 느낀 것만큼 준 것입니다. 그런 기본적인 값들이 다르기 때문에 css reset을 통해서 스타일을 없앤 후에 값을 주었던 것이죠.

css의 all 속성

엘리먼트에 적용된 값들을 초기화할 수 있게 만들어 주는 것이 all 속성입니다.

줄 수 있는 값은 initial, inherit, unset이 있습니다.

아래와 같이 여러 태그들이 있다고 가정해보세요.

이 태그들은 기본적인 스타일들을 갖고 있습니다.

각각의 기본 스타일이 있는 태그들

이제 이 태그들에 기본 스타일을 없애보도록 하겠습니다.

all 속성에 unset 값을 주었습니다.

unset 값이 적용된 모습입니다.

간단하게 all 속성에 unset 값을 주면서 css reset 효과를 낼 수 있습니다.