📌 reset.css를 쓰는 이유

처음 웹은 문서를 공유하기 위해서 시작되었습니다. CSS 없이 HTML 구조만 있던 시절, 각 태그는 기본적인 서식을 가지고 있었고, 이 서식은 각 브라우저마다 다릅니다. 이후 CSS가 생기면서 웹 문서에 원하는 디자인을 자유롭게 그려낼 수 있게 되었는데, 적용한 디자인이 기본서식 때문에 깨지거나, 브라우저마다 다른 디자인이 나타나게 됩니다.

따라서 모든 브라우저에서 똑같은 화면을 출력하고 싶다면 (크로스 브라우징) 우선 어떤 브라우저에서든 같은 화면이 보일 수 있도록 스타일을 통일해줘야 합니다.

📌 reset.css에 들어가야하는 필수적인 코드들

*{margin:0;padding:0;font:inherit;color:inherit;}
*, :after, :before {box-sizing:border-box;flex-shrink:0;}

html, body {height:100%; line-height: 1;}
img, picture, video, canvas, svg {display: block;max-width:100%;}
button {background:none;border:0;cursor:pointer;}
a {text-decoration:none}
ul{list-style:none;}
table {border-collapse:collapse;border-spacing:0}