(HTML & CSS) 작업 시작시 Reset 초기화 소스코드 예시

See the Pen 작업 시작시 reset 소스 코드 by kimyangsun (@kimyangsun) on CodePen.

 

개인 프로젝트 작업을 시작할때 기본으로 깔고 시작하는 html, css 기본 초기화 코드입니다.

저는 이 코드들을 바탕으로 작업을 시작하지만 각자의 작업방식에 따라 수정할 부분은 수정하거나 추가할 부분은

추가하여 사용하면 될 것 같습니다. :)

 

css 코드

@charset "UTF-8";

/* 폰트 적용 (선택사항) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&family=Noto+Serif+KR:wght@200;300;400;500;600;700&display=swap');
html, body {font-family: "Noto Sans KR", sans-serif;}

/* Reset */
html, body, h1, h2, h3, h4, h5, h6, div, p, blockquote, pre, code, address, ul, ol, li, menu, nav, section, article, aside, dl, dt, dd, table, thead, tbody, tfoot, label, caption, th, td, form, fieldset, legend, hr, input, button, textarea, object, figure, figcaption {margin:0; padding:0;}
main, header, section, nav, footer, aside, article, figure {display:block;}
html{-webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
html, body {overflow-x: hidden; /* 반응형 */}
ul, ol, li {list-style:none;}
h1, h2, h3, h4, strong, th {font-weight:normal; font-family:inherit; color:inherit;}
a {color:inherit; text-decoration:none; outline:none;}
input, button, select, fieldset, textarea {-webkit-border-radius: 0; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border:0; background-color:transparent;}
.blind, legend {overflow: hidden; position: absolute; width: 1px; height: 1px; font-size: 12px; clip: rect(1px, 1px, 1px, 1px);}
button {cursor:pointer; font-family: inherit; font-size: inherit;}
i, em {font-style: normal;}
* {box-sizing: border-box;}


/* 아래 코드는 IE에서 적용되는 코드입니다. (선택사항) */

/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
/* input::-ms-clear {
    display: none;
} */

/* input type number 에서 화살표 제거 */
/* input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
} */

/* IE 에서 Select box 화살표 제거 */
/* select::-ms-expand {
    display: none;
} */