Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

올해는 머신러닝이다.

모바일웹 관련 rlqhs CSS 본문

모바일웹/Tip&Tech

모바일웹 관련 rlqhs CSS

행복한 수지아빠 2013. 5. 23. 12:48

모바일용 웹사이트를 개발한다고 하자

제일 먼저 default.css (우리는 basic.css)를 정해야 할 것이다.

네이버 m.naver.com

  • http://m.news.naver.com/css/news/d.css
  • common css 설정부분
    /*common*/
    * {
     margin:0;
     padding:0;
     font-family:"나눔고딕", NanumGothic, "굴림", Gulim, Helvetica, AppleGothic, Sans-serif;
     -webkit-text-size-adjust:none;
    }
    body {
     position:relative;
     background-color:#f8f8f8;
     line-height:1.25em;
     color:#000;
     word-wrap:break-word;
     word-break:break-all;
    }
    body, input, select, textarea {
     font-size:14px;
    }
    .it, textarea {
     border:1px solid #bcbcbc;
    }
    li {
     list-style:none;
    }
    table {
     border-collapse:collapse;
    }
    img, fieldset {
     border:none;
    }
    a {
     color:#000;
     text-decoration:none;
     cursor:pointer;
    }
    label {
     cursor:pointer;
    }
    strong {
     font-weight:normal;
    }
    em, address {
     font-style:normal;
    }
    .hc {
     visibility:hidden;
     overflow:hidden;
     position:absolute;
     left:-1000em;
     width:0;
     height:0;
     font-size:0;
     line-height:0;
    }
    .nc, hr {
     display:none !important;
    }
    .is {
     width:19px;
     height:19px;
    }
    .fx {
     max-width:100%;
    }

     

다음 m.naver.com

  • 별도의 css를 만들지 않고 넣어버림
  • http://photo-media.daum-img.net/css/media3/style_IPN.css
  • common css 설정부분
    /* base */
    body {
     margin: 0;
     padding: 0;
     background-color: #fff;
     -webkit-text-size-adjust: none;
    }
    img, fieldset {
     border:0 none;
    }
    dl, ul, ol, li {
     list-style: none;
    }
    hr {
     display:none;
    }
    h1, h2, h3, h4, h5, dl, dt, dd, ul, li, ol, th, td, p, blockquote, form, fieldset, legend, body {
     margin: 0;
     padding: 0;
     font-family: '돋움', 'Dotum', '굴림', 'gulim', 'Helvetica', 'Apple-Gothic';
     font-size: 15px;
    } /* font-size는 달라짐 */
    a {
     text-decoration: none;
     text-overflow:ellipsis;
     -o-text-overflow:ellipsis;
     color:#333;
    }
    a:link, a:hover, a:active {
     text-decoration: none;
    }
    input, select, textarea {
     font-size: 100%;
     vertical-align: middle;
    }
    em {
     font-style:normal;
    }
    /* common */
    .border {
     border:1px #c00 solid;
    }
    .hidden {
     display:none;
    }
    .clr {
     clear: both;
    }
    /* layout */
    body {
     margin: 0;
     padding: 0;
     background-color: #fff;
     -webkit-text-size-adjust: none;
     letter-spacing:-1px;
    }


특징중 하나는 폰트 사이즈를 12px가 아닌 14px를 사용한다는 것이다.
모바일 웹브라우저가 많이 표현하기 위해 화면을 축소하기 때문에 보정차원에서 2px 정도 키워야 되나보다.

그래서 다음과 같이 basic.css를 우선 정해본다. 네이버 참고해서.

@charset "euc-kr";
/* euc-kr / utf-8 */

/* SPB3 Basic Style Beta1 10/04/18 by Sunmin Park(http://twitter.com/sitehis) */
* {
 margin:0;
 padding:0;
 font-family:"나눔고딕", NanumGothic, "굴림", Gulim, Helvetica, AppleGothic, Sans-serif;
 -webkit-text-size-adjust:none;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
 /* margin: 0;
 padding: 0; */
 border: 0;
 outline: 0;
 font-size: 100%;
}
html, body {
 height:100%;
}
body {
 font-size:12px;
 color:#666;
 line-height:1.5;
 word-wrap:break-word;
 word-break:break-all;
}
img, fieldset {
 border:0 none;
}
input, select, textarea, h1, h2, h3, h4, h5, h6, table {
 font-weight:normal;
 font-size:12px;
 color:#666;
}
form, input, textarea, fieldset, ul, ol, dl, li, dt, dd, blockquote, p {
 margin:0;
 padding:0;
}
input, select, textarea {
 vertical-align:middle;
}
label {
 cursor:pointer;
}
ol, ul, li {
 list-style:none;
}
table {
 border-collapse:collapse;
 border-spacing:0;
}
a:link, a:visited {
 text-decoration:none;
 color:#666;
}
a:active, a:hover, a:focus {
 text-decoration:underline;
}
/* sitehis.com default tag */
input.basic {
 height:14px;
 border:1px solid #ccc;
 padding:2px 5px 0 5px;
}
select.basic {
 height:18px;
}
/* sitehis.com default class */
.hide {
 display:none;
}
.clear {
 clear: both;
}
.overflowtext { /* 오버플로우 */
 width:550px;
 overflow-x:hiddin;
 overflow-y:hiddin;
 clear:left;
}
/* 여백전용 */
.pd_l5 {
 padding-left:5px;
}
.pd_l10 {
 padding-left:10px;
}
.pd_l15 {
 padding-left:15px;
}
.pd_l20 {
 padding-left:20px;
}
.pd_r5 {
 padding-right:5px;
}
.pd_r10 {
 padding-right:10px;
}
.pd_r15 {
 padding-right:15px;
}
.pd_r20 {
 padding-right:20px;
}
.pd_r40 {
 padding-right:40px;
}
/* p tag for 모바일 */
.p14 {
 font-size: 14px;
}

  • 네이버를 따라 * {} 형식으로 margin, padding 추가
  • 네이버 배포 나눔고딕을 디폴트 폰트로 정함
  • 모바일용은 class p14를 이용하여 글자 확대함


조언을 부탁드립니다.
98년도부터 PHP 프로그램 개발로 시작하여 바로 웹분야 창업을 한 경영자라서,
요즘 중요하게 생각되는 웹표준 가이드에 대해서 세심하게 개발자 공부를 할 수가 없습니다.
작성한 내용에 대해서 오류나 수정할 부분이 있으면, 트위터(@sitehis)로 알려주시기 바랍니다.

저작자표시

'모바일웹 > Tip&Tech' 카테고리의 다른 글

모바일웹 관련 팁앤테크  (0) 2013.05.23
[펌]모바일 웹 환경 설정 하기  (0) 2012.09.18
추천 웹 사이트  (0) 2011.03.27
[서블릿기초] 5. 초간단 MVC 만들어보기 JSP기초정리 / JSP  (0) 2010.12.15
'모바일웹/Tip&Tech' Related Articles more