[스타일 적용전 주의사항]
<meta name='viewport' content='user-scalable=no, width=device-width'/>
content에 들어간 설정은 손으로 확장 및 축소를 막는 태그이다.
width는 장비의 가로사이즈에 맞게 적용하는 뜻이다.
[스타일 적용시]
<link rel='stylesheet' type='text/css' media='only screen and (max-width:480px)' href='.iphone.css'>
media 엘리먼트의 위의 값을 넣어서 아이폰(레티나용) 사이즈로 맞춘다.
[자 이제 작성해 보자]
---------------------------------------------------------------------------
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<meta name='viewport' content='user-scalable=no, width=device-width'/>
<link href='./iphone.css' rel='stylesheet' type='text/css'
media='only screen and (max-width:480px)'>
<title>아이폰에 스타일시트 적용해보기</title>
</head>
<body>
<div id='container'>
<div id='header'>
<h1><a href='./0.html'>Introduce Myself</a></h1>
<div id='utility'>
<ul>
<li><a href='0.html'>About</a></li>
<li><a href='1.html'>Jobs</a></li>
<li><a href='2.html'>Hobby</a></li>
</ul>
</div>
<div id='favorite'>
<ul>
<li><a href='3.html'>IT, MAC, iphone</a></li>
<li><a href='4.html'>Soccer</a></li>
<li><a href='5.html'>Travel</a></li>
</ul>
</div>
</div>
<div id='content'>
<h2>About</h2>
<p>http://corearoot.tistory.com/ 운영자, 웹마스터, 개발자</p>
</div>
<div id='sidebar'>
<img src='test.jpg' alt='내사진' /><br>
<p>여기는 나머지 소개글입니다 이미지 올리기 </p>
</div>
</div>
</body>
---------------------------------------------------------------------------
[결과]
[자 이제 CSS를 적용해 보자] - iphone.css (단, 웹브라우저에 적용해도 안보인다)
---------------------------------------------------------------------------------------------------------
body {
background: #ddd;
color: #222;
font-family: Helvetica;
font-size: 14px;
margin: 0;
padding: 0;
}
#header h1 {
margin: 0;
padding: 0;
}
#header h1 a {
background-color: #ccc;
border-bottom : 1px solid #666;
color :#222;
display : block;
font-size: 20px;
font-weight: bold;
padding: 10px 0;
text-align: center;
text-decoration: none;
/* 상단 부분을 실제 아이폰처럼 보이게 하는 CSS */
background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
/* 글씨가 들어가 보이게 하는 CSS */
text-shadow: 0px 1px 0px #fff;
}
#header ul {
list-style: none;
margin: 10px;
padding: 0;
}
#header ul li a {
background-color: #ffffff;
border:1px solid #999999;
color: #222222;
display: block;
font-size: 17px;
font-weight: bold;
padding: 12px 10px;
text-decoration: none;
margin-bottom: -1px;
}
/* 헤더의 ul li의 첫번째 항목 위쪽 좌우부분 둥글게 한다. */
#header ul li:FIRST-CHILD a {
-webkit-border-top-left-radius : 8px;
-webkit-border-top-right-radius : 8px;
}
/* 헤더의 ul li의 마지막 항목 아래쪽 좌우부분 둥글게 한다. */
#header ul li:LAST-CHILD a {
-webkit-border-bottom-left-radius : 8px;
-webkit-border-bottom-right-radius : 8px;
}---------------------------------------------------------------------------------------------------------
[결과] - 테스트는 Xcode의 아이폰으로
[안드로이드폰에서도 테스트 해보자]
안드로이드용 폰 테스트는 파이어폭스 모바일로 하면 된다.
http://www.mozilla.or.kr/ko/mobile/download/
---------------------------------------------------------------------------------------------------------
'IT 관련 > Html5' 카테고리의 다른 글
| JQuery 활용 (0) | 2011.10.13 |
|---|---|
| JQuery에 대하여 (0) | 2011.10.13 |
| CSS 적용 방법 (0) | 2011.10.08 |
| JavaScript와 CSS의 만남 2 (객체의 이동) (0) | 2011.10.08 |
| 유용한 즐겨찾기 (0) | 2011.10.07 |