각 브라우저마다 제공하는 기본 스타일이 다르기 때문에 브라우저 간의 요소들의 차이를 없애 디폴트값으로 초기화시키는 코드
reset.css에 들어갈 style 구성하기
{margin:0;padding:0;font:inherit;color:inherit;}
, :after, :before {box-sizing:border-box;flex-shrink:0;}
:root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;-moz-tab-size:4;tab-size:4}
html, body {height:100%;}
img, picture, video, canvas, svg {display: block;max-width:100%;}
button {background:none;border:0;cursor:pointer;}
a {text-decoration:none}
table {border-collapse:collapse;border-spacing:0}
:root {... overflow-wrap:break-word;word-break:break-word; ... }
root : 가상클래스로 css 변수를 다룸.
참조
https://meyerweb.com/eric/tools/css/reset/
https://velog.io/@teo/2022-CSS-Reset-%EB%8B%A4%EC%8B%9C-%EC%8D%A8%EB%B3%B4%EA%B8%B0
최종
최종
최종
reset.css
이거 복사해서 쓰기!!!!!
//
* { margin:0;padding:0;font:inherit;color:inherit; }
, :after, :before { box-sizing:border-box;flex-shrink:0; }
:root { -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;-moz-tab-size:4;tab-size:4 }
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 }
table { border-collapse:collapse;border-spacing:0 }
ul { list-style: none;}
fieldset{border: 0;}
