최근 네이버 CSS 초기화 코드 (mo/pc)

모바일 이벤트 페이지 작업을 하는데, 웹폰트를 좀 써보려고 하는데

기존에 사용하고 있는 font-family를 보니 모바일인데 맑은 고딕도 있고, 돋움도 있고...

넣어 놓은 것들이 마음에 들지 않음.

 

문득 네이버느님의 모바일 버전에 font는 어떻게 쓰일까 궁금해서 찾아봄~ 🧐

 

 

 

네이버 CSS초기화 코드 (mobile)

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
}
video::-webkit-media-controls-start-playback-button {
    display: none!important
}
.blind,.u_hc,.u_skip,.u_vc {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden
}
.blind::before,.u_hc::before,.u_skip::before,.u_vc::before {
    display: block;
    width: 0;
    height: 0;
    content: '\00a0';
    font-size: 0
}
.fzoom body {
    font-size: 16px;
    line-height: 19px
}
.fzoom2 body {
    font-size: 17px;
    line-height: 20px
}
.fzoom3 body {
    font-size: 18px;
    line-height: 21px
}
.fzoom4 body {
    font-size: 19px;
    line-height: 22px
}
html.fzoom {
    font-size: 10.667px;
    line-height: 10.667px
}
html.fzoom2 {
    font-size: 11.333px;
    line-height: 11.333px
}
html.fzoom3 {
    font-size: 12px;
    line-height: 12px
}
html.fzoom4 {
    font-size: 12.667px;
    line-height: 12.667px
}

 

- 모바일 쪽 폰트를 살펴보면 "-apple-system,BlinkMacSystemFont,"Helvetica Neue","Apple SD Gothic Neo",Arial,sans-serif" 로 사용하고 있음.

 

- 폰트 두께는 보통 400이 기본으로 쓰는데, 네이버는 500을 사용함.

 

 

 

 

네이버 CSS초기화 코드 (PC)

body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select {
    margin: 0;
    padding: 0
}
body,input,textarea,select,button,table {
    color: #101010;
    color: var(--color_body);
    font-size: 12px;
    line-height: 16px;
    font-family: -apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",helvetica,"Apple SD Gothic Neo",sans-serif;
    font-weight: 500;
    letter-spacing: -0.4px
}
h1,h2,h3,h4,h5,h6 {
    font-size: inherit;
    line-height: inherit
}
textarea {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: rgba(0,0,0,0);
    border: 0;
    word-break: keep-all;
    word-wrap: break-word
}
input,button {
    border-radius: 0;
    border: 0
}
button {
    background-color: rgba(0,0,0,0);
    cursor: pointer
}
img,fieldset {
    border: 0
}
img {
    vertical-align: top
}
ul,ol {
    list-style: none
}
em,address {
    font-style: normal
}
a {
    color: inherit;
    text-decoration: none
}
a:hover {
    text-decoration: underline
}
iframe {
    overflow: hidden;
    margin: 0;
    border: 0;
    padding: 0;
    vertical-align: top
}
mark {
    background-color: rgba(0,0,0,0)
}
i {
    font-style: normal
}
input::-ms-clear,input::-ms-reveal {
    display: none
}
input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration {
    display: none
}
.blind {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden
}
html {
    font-size: 10px;
    line-height: 10px
}
html.fzoom {
    font-size: 10.5px;
    line-height: 10.5px
}
html.fzoom1 {
    font-size: 11px;
    line-height: 11px
}
html.fzoom2 {
    font-size: 11.5px;
    line-height: 11.5px
}
html.fzoom3 {
    font-size: 12px;
    line-height: 12px
}
body,input,textarea,select,button,table {
    font-size: 1.4rem;
    line-height: 1.7rem
}

 

pc 버전에서는 맑은 고딕이 들어감~ 

 

근데 여기도 두께가 500을 사용... 

 

 

 

그리고 뽀나스로 카카오로 읽고, 다음이라 쓰는 css 코드도 살펴봄~

 

daum.net의 css초기화

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;font-size:100%}
button{border:0 none;background-color:transparent;cursor:pointer}
table{border-collapse:collapse;border-spacing:0;word-break:normal}
body{-webkit-text-size-adjust:none}
input:checked[type=checkbox]{background-color:#666;-webkit-appearance:checkbox}
input[type=text],input[type=password],input[type=submit],input[type=search],input[type=tel],input[type=email],html input[type=button],input[type=reset]{-webkit-appearance:none;border-radius:0}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
body{background:#f4f4f4;word-break:break-all}
body,th,td,input,select,textarea,button{font-size:15px;line-height:1.5;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Apple SD Gothic Neo,Arial,sans-serif;color:#101010}
a{color:#101010;text-decoration:none}
a:active,a:hover{text-decoration:none}
address,caption,cite,code,dfn,em,var{font-style:normal}
button::-moz-focus-inner{border:0;padding:0}
.firefox button,input{background-image:none}
.ir_pm{display:block;overflow:hidden;font-size:1px;line-height:0;color:transparent}
.ir_wa{display:block;overflow:hidden;position:relative;z-index:-1;width:100%;height:100%}
.ir_caption{overflow:hidden;width:1px;font-size:1px;line-height:0;text-indent:-9999px}
.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{clear:both;width:0;height:0;font-size:0;line-height:0}
.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:""}

 

 

카카오를 살펴보니 위 코드에는 없지만, 일반 폰트 두께는 400을 사용하는 듯.

 

시간날 때 네이버가 500을 쓰는 이유를 알아보러 세계여행을 떠나야 할 듯함 ㅋㅋ