[CSS] reset.css란? reset.css 공유

처음 사이트 제작 시 주의 깊게 보시면 내가 설정하지 않은 CSS 속성들이 적용되어 있는 것을 확인하실 수 있습니다.
이는 사이트에서 자체적으로 제공하는 기본 스타일(Default Styles) 때문입니다.
브라우저는 사용자 경험을 위해 HTML 요소에 기본적인 스타일(CSS)을 제공합니다.

예를 들어, a 태그는 파란색 텍스트와 밑줄 효과가 있으며, h1, h2 같은 헤딩 태그는 크기와 굵기가 다르게 설정됩니다.
또한, 문단 간의 기본적인 margin이나 padding 역시 기본 스타일입니다.

이러한 기본 스타일은 사이트 제작 시 대단히 불편하기 때문에 처음에 reset.css로 CSS를 초기화한 후 개발을 진행하게 됩니다.

reset.css는 개발자마다 소소하게 다르며 아래 코드는 제가 사용하는 reset.css입니다.
다양한 프로젝트를 진행하면서 점점 보강하게 되어 지금의 reset.css가 되었습니다.

아래 코드를 가져가셔서 입맛에 맞게 바꾸시는 것을 추천드립니다!

---

@charset "utf-8";
/* reset.css start */
/* 모든 요소에 대한 추가 설정 */
* { font-synthesis: none; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: auto; font-family: 'Pretendard'; box-sizing:border-box; -webkit-tap-highlight-color: transparent; } 
/* 여백을 초기화 */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;}
/* html5 태그가 적용되지 않는 오래된 브라우저에서 인식할 수 있도록 블럭요소로 설정 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* 줄간격 100% */
body {line-height: 1;}
/* 목록앞 기호 삭제 */
ol, ul, li {list-style: none;}
/* 인용문 기호 삭제 */
blockquote, q {quotes: none;}
/* 인용문 앞, 뒤똑에 콘텐츠 내용 빈공백 삽입 */
blockquote:before, blockquote:after,q:before, q:after {content: '';	content: none;}
/* 테이블 태그 작성시 셀과 셀 사이 여백 삭제*/
table {border-collapse: collapse;border-spacing: 0;}
/* a tag 색상과 스타일 초기화 */
a{color: #000;text-decoration: none;}
/* input:number 화살표 삭제 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } 
input[type='number'] { -moz-appearance: textfield; } 
/* reset.css end */