기본 콘텐츠로 건너뛰기

웹, 모바일 페이지에서 스타일 초기화 하기(css 초기화) - css

css 초기화, css 세팅, 기본 css


개인적으로 일하면서 조금씩 수정하다가 어느 순간부터 기본으로 정의하고 사용중인 css이다.

@charset "utf-8";

*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

html{-webkit-text-size-adjust:none;-webkit-touch-callout:none;/* -webkit-user-select:none;*/-webkit-tap-highlight-color:rgba(0,0,0,0);}
body{position:relative;overscroll-behavior:contain;line-height:1.5;font-family:"Roboto", "Noto Sans KR";font-weight:400;word-break:keep-all;color:#000;}/* chrome, safari에서 pull to refresh 안되게. 만약 계속 된다면 부모태그(html)에 overflow:hidden 추가 */
img,fieldset{line-height:0;vertical-align:middle;}
img{width:100%;image-rendering:crisp-edges;image-rendering:optimizeQuality;image-rendering:-webkit-optimize-contrast;object-fit:contain;}
ul,ol{list-style:none;}
a{display:inline-block;text-decoration:none;}
a,span,strong{font-size:inherit;font-weight:inherit;font-family:inherit;color:inherit;line-height:inherit;}
a,button,label,input,select,textarea,span{outline:none;}
button{background-color:transparent;border:none;cursor:pointer;}
button>*{pointer-events:none;}
button::-moz-focus-inner{padding:0;border:0;}
legend{position:fixed;left:-700rem;}
table{width:100%;border-collapse:collapse;border-spacing:0;}
caption,legend,.hidden,.blind{margin:-1px;position:absolute!important;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden;}
caption{width:0;height:0;font-size:0;line-height:0;visibility:hidden;}
th,td{vertical-align:middle;text-align:center;}

select,textarea,pre,button,input{font-size:16px;font-family:"Roboto", "Noto Sans KR";line-height:1.5;color:#000;}
select,textarea,iframe,img,fieldset{border:none;}
select{width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;border:none;background-color:transparent;border-radius:0;}
select::-ms-expand{display:none;}
textarea{text-align:left;resize:none;}
textarea::placeholder{color:#d7d7d7;}
textarea:-ms-input-placeholder{color:#d7d7d7!important;}
button::-moz-focus-inner{padding:0;border:0;}
label{cursor:pointer;}

input::-ms-clear{display:none;}
input:-ms-clear{display:none;}
input::-ms-reveal{display:none;}
input:-ms-reveal{display:none;}
input[type="number"]{-moz-appearance:textfield;}
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
input[type=date]::-webkit-inner-spin-button{-webkit-appearance:none;display:none;}
input[type=date]::-webkit-calendar-picker-indicator{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;}
input{border:none;-webkit-appearance:none;appearance:none;border-radius:0;}
input[type="file"]{cursor:pointer;}
input[readonly],input[disabled]{background-color:#f2f2f7;}
input[disabled]+label,.disabled{color:#cbcbcb!important;}
input::-webkit-input-placeholder{color:#cbcbcb;}
input:-moz-placeholder{color:#cbcbcb;}
input::-moz-placeholder{color:#cbcbcb;}
input:-ms-input-placeholder{color:#cbcbcb!important;}
input::placeholder{color:#cbcbcb;}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{display:none;}​
select:required:invalid{color:#cbcbcb;}
option[value=""][disabled]{display:none;}​
.iphone input:disabled,.ipad input:disabled{-webkit-text-fill-color:#a5a8b7;opacity:1;}/* 아이폰에서 disabled 되었을 때 글자가 회색으로 바뀌는거 수정 */

header,footer,nav,aside,section,article,main,video,audio,canvas{display:block;}
object,svg{width:100%;height:100%;pointer-events:none;}

hr{display:none;}


html{font-size:10px;}
/* @media screen and (max-width:414px){
  html{font-size:22px;}
}
@media screen and (max-width:375px){
  html{font-size:20px;}
}
@media screen and (max-width:360px){
  html{font-size:18px;}
} */
/* @media screen and (orientation:landscape){
  @-ms-viewport{width:;}
  @-o-viewport{width:;}
  @viewport{width:;}
} */

끝.