모바일 리셋 스타일- mobile css reset

 

글로벌 리셋 소스

 

reset.css

 

PC버전 reset.css

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
body {background:#fff}
body,th,td,input,select,textarea,button {font-size:12px;line-height:1.5;font-family:'돋움',dotum,sans-serif;color:#333} /* color값은 디자인가이드에 맞게사용 */
a {color:#333;text-decoration:none}
a:active, a:hover {text-decoration:underline}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}

 

모바일버전 reset.css

 

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {font-size:100%;vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
table {border-collapse:collapse;border-spacing:0}
body {-webkit-text-size-adjust:none} /* 뷰표트 변환시 폰트크기 자동확대 방지 */
input[type='text'],input[type='password'],input[type='submit'],input[type='search'] {-webkit-appearance:none; border-radius:0}
input:checked[type='checkbox'] {background-color:#666; -webkit-appearance:checkbox}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {-webkit-appearance:button; border-radius:0}
input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none}
body {background:#fff}
body,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;font-family:'Malgun Gothic', '맑은 고딕', sans-serif;color:#333} /* color값은 디자인가이드에 맞게사용 */
a {color:#333;text-decoration:none}
a:active, a:hover {text-decoration:none}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}

 

PC/모바일 글로벌 클래스 네임(선택사용)

 

  /* global */
#daumIndex {overflow:hidden;position:absolute;left:-9999px;width:0;height:1px;margin:0;padding:0} /* 스킵네비게이션 */
.ir_pm {display:block;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px} /* 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때 */
.ir_wa {display:block;overflow:hidden;position:relative;z-index:-10;width:100%;height:100%} /* 중요한 이미지 대체텍스트로 이미지off시에도 대체 텍스트를 보여주고자 할때 */
.screen_out {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px} /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */
.f_l {float:left}
.f_r {float:right}
.cl_b {width:0;height:0;font-size:0;line-height:0;clear:both}
.show {display:block}
.hide {display:none}
.tbl {border-collapse:collapse;border-spacing:0} /* 테이블 초기화 */
.clear_g {display:block;overflow:visible;width:auto;clear:both;*zoom:1}
.clear_g:after {display:block;visibility:hidden;height:0;font-size:0;clear:both;content:''}
/* line */
.txt_bar {font-size:12px;color:#b6b6b6} /* 텍스트형 구분라인 */
/* Background Image - common 요소 */
.btn_comm {background:url() no-repeat} /* 버튼 */
.ico_comm {background:url() no-repeat} /* 아이콘 */
.tit_comm {background:url() no-repeat} /* 타이틀 */
.line_comm {background:url() no-repeat} /* 라인 */

 

모바일 글로벌 클래스네임

/* border round 3px button style */
.bround {display:inline-block;padding:0;border:1px solid;border-radius:3px;font-size:12px;text-decoration:none;text-align:center}
/* padding round 3px button style */
.pround {display:inline-block;padding:1px;border-radius:3px;font-size:12px;text-decoration:none}
.pround .inner {display:inline-block;width:100%;height:100%;border-radius:3px;text-align:center}

 

출처 : https://blog.naver.com/sjh_112/221996469617 

[css] 공통 스타일시트-리셋/글로벌.css

모바일 리셋 스타일 01 

@charset "utf-8";
html {
    color: #000;
    background: #fff;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}
html * {
    outline: 0;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
html,
body {
    font-family: sans-serif
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    margin: 0;
    padding: 0
}
input,
select,
textarea {
    font-size: 100%
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
fieldset,
img {
    border: 0
}
abbr,
acronym {
    border: 0;
    font-variant: normal
}
del {
    text-decoration: line-through
}
address,
caption,
cite,
code,
dfn,
em,
th,
var {
    font-style: normal;
    font-weight: 500
}
ol,
ul {
    list-style: none
}
caption,
th {
    text-align: left
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: 500
}
q:before,
q:after {
    content: ''
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}
sup {
    top: -.5em
}
sub {
    bottom: -.25em
}
a:hover {
    text-decoration: underline
}
ins,
a {
    text-decoration: none
}

 

 

모바일 리셋 스타일 02

/* Reset */
* {outline: 0 !important;}
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;}
html,body{width:100%;}
/* -webkit : 크롬, ios기반의 브라우저 */
html{-webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0);}
/* 가로사이즈가 ios(iphone3 , gallaxy1은 가로가 320) | -webkit-text-size-adjust: 아이폰 가로/세로변경시 글씨 사이즈 제어*/
body{width:100%; background:#fff; min-width:320px; -webkit-text-size-adjust:none;word-wrap:break-word;word-break:break-all;}
/* 웹용 */
body,input,select,textarea,button {border:none;font-size:12px;font-family: 'Noto Sans KR', sans-serif; color: #727272;}
/* 모바일 : 아이폰은 애플고딕, 안드로이드는 따로 폰트로 된다. */
body,input,select,textarea,button {border:none;font-size:12px; color: #727272;} 
ul,ol,li{list-style:none;}
table{width:100%;border-spacing:0;border-collapse:collapse;}
img,fieldset{border:0;}
address,cite,code,em{font-style:normal;font-weight:normal;}
label,img,input,select,textarea,button{vertical-align: middle;}
.hide,caption,legend{line-height:0;font-size:1px;overflow:hidden;}
hr{display:none;}
/* html5에서는 inline요소다 이것을 block으로 바꿔줌 */
main,header,section,nav,footer,aside,article,figure{display:block;}
a{color:#000; text-decoration:none;}
/* Form */
textarea {border:1px solid #dbdbdb;}
select { height:32px; font-size: 13px; color:#373737; border:1px solid #e9e9e9; background:#fff; border-radius:5px; }
input[type=tel],
input[type=time],
input[type=text],
input[type=password],
input[type=search],
input[type=email],
input[type=file],
input[type=url],
input[type=number],
input[type=date],textarea {width:100%; height:30px; font-size:13px; color:#373737; border:1px solid #e9e9e9; background:#fff; text-indent:20px; border-radius:5px;transition:all 0.5s; vertical-align:middle;}
/* placeholder는 직접 선택할 수 없어서 세팅해줌 */
input::-webkit-input-placeholder{color:#b5b5b5; font-size:12px; line-height:100%;}
textarea{padding:5px 0;}
select:focus,
textarea:focus,
input:focus { border: 1px solid #727272; }
/* search 경우 클릭할때 둥글게 나오는 경우 있음 사각형으로 만듬input[type=password][disabled], */
input[type=tel][readonly],
input[type=text][readonly],
input[type=password][readonly],
input[type=search][readonly],
input[type=email][readonly],
input[type=tel][disabled],
input[type=text][disabled],
input[type=password][disabled],
input[type=search][disabled],
input[type=email][disabled] { background:#eaeaea; border-color:#c0c0c0; color:#666; -webkit-appearance:none; font-size:12px;}
textarea[readonly],
textarea[disabled]{padding:11px; font-size:16px; color:#666; font-weight:normal; line-height:140%; height:78px; background:#eaeaea; border:1px solid #c0c0c0;}
.clear{clear:both;}
.clear:after {content:""; display:block; clear:both;}

출처 http://www.humor-in.com/post/4744

 

모바일 리셋 스타일 03- 네이버 모바일 css reset 소스 

@charset "UTF-8";

body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
legend,
li,
ol,
p,
select,
table,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0
}

body,
button,
h1,
h2,
h3,
h4,
h5,
input,
select,
table,
textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 18px
}

body {
    position: relative;
    background-color: #fff;
    color: #000;
    word-break: break-all;
    -webkit-text-size-adjust: none
}

html {
    font-size: 10px;
    line-height: 15px
}

table {
    border-collapse: collapse
}

fieldset,
img {
    border: 0
}

ol,
ul {
    list-style: none
}

address,
em {
    font-style: normal
}

a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, .1)
}

img {
    vertical-align: top
}

mark {
    color: inherit;
    font-weight: 700;
    background: 0 0
}

button,
input {
    -webkit-border-radius: 0;
    border-radius: 0;
    background: 0 0
}

출처 :https://m.naver.com/