개발자의 길

[html]반응형 웹 테스트 본문

10. HTML

[html]반응형 웹 테스트

자르르 2013. 7. 26. 13:21


<!DOCTYPE html>

<html lang="ko">

<head>

<meta http-equiv="content-type" content="text/html; charset=euc-kr">

<meta name="description" content="">

<meta name="keywords" content="">

<meta name="copyright" content="">

<meta name="author" content="장재용">

<title>SBS 반응형 웹 가이드</title>

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<style>

* { margin:0; padding:0;}

html, body { margin:0; padding:0; height:100%;}

body {font-family: "돋움", sans-serif, Arial; font-size:12px; position:relative; font-weight:bold; color:#fff;}


table, div {border-collapse:collapse;}

select, textarea,input {font-family:"돋움", Arial, Helvetica, sans-serif; font-size:12px; color:#000; vertical-align:top;}

form, ul, ol, dl, table, div, h1, h2, h3 ,h4 {margin:0;padding:0;}

h1, h2, h3 ,h4, h5, h6{font-size:12px; text-decoration:none;}

img, fieldset {border:0; margin:0; padding:0; }

select, input, li, img {vertical-align:top; }

ul, li, dl, dt, dd{list-style-type : none; }

caption { text-indent:-5000px; line-height:0; font-size:0;}

legend{ text-indent:-5000px; line-height:0; font-size:0; position:absolute; top:0; left:0;}

hr {display:none;}

iframe {border:0;}

button {border:0px;}


article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}


a:link{text-decoration:none; color:#000;}

a:visited{text-decoration:none; color:#000;}

a:hover{text-decoration:none; color:#73c23f;}

a:active{text-decoration:none; color:#000;}


#web #wrap {max-width:1004px; min-width:601px; margin:0 auto;}

#web #wrap header {text-align:center; background:#7C7C7C; margin:10px 0;}

#web #wrap header>h1 { font-size:20px; line-height:2.2em;}

#web #wrap nav {background:#EFAE03; text-align:center; margin:10px 0;}

#web #wrap nav>ul {height:50px; overflow:hidden;}

#web #wrap nav>ul li {width:25%; float:left; padding:20px 0;}

#web #wrap nav>ul li.g1 {background:#7C7C7C;}

#web #wrap nav>ul li.g2 {background:#B4B4B4;}

#web #wrap nav>ul li.g3 {background:#7C7C7C;}

#web #wrap nav>ul li.g4 {background:#B4B4B4;}

#web #wrap #content {height:auto; overflow:hidden; width:100%;}

#web #wrap section {background:#C5C5C5; text-align:center; width:60%; padding:1%; overflow:hidden; float:left;}

#web #wrap article {background:#7C7C7C; text-align:center; float:left; width:49%; height:300px;overflow:hidden;}

#web #wrap article.a1 {float:left;}

#web #wrap article.a2 {float:right;}

#web #wrap article.a3 {width:100%; float:left; margin-top:10px;}

#web #wrap aside {background:#6E6E6E; text-align:center; float:right; width:38%; height:600px; overflow:hidden;}

#web #wrap footer {background:gray; text-align:center; height:30px; margin:10px 0; display:block; float:left; width:100%; padding:10px 0;}

#web #wrap article.a1 a {margin:2%; width:96%; display:block; color:#fff;}

#web #wrap article.a1 a:hover {color:skyblue;}

#web #wrap article.a1 strong.tit {text-align:left; display:block;}

#web #wrap article.a1 span.txt {text-align:left; display:block; font-weight:normal; margin-top:10px;}

#web #wrap article.a1 a img {max-width:100%; height:auto; line-height:0; margin-bottom:15px;} 

#web #wrap article.a2 .shape1 {-webkit-border-radius:5em; -moz-border-radius:5em; border-radius:5em; background:red; width:25%; height:25%; margin:10px;}

#web #wrap article.a2 .shape1 .txt {-webkit-transform:rotate(-25deg); transform:rotate(-25deg);-moz-transform:rotate(-25deg); font-weight:bold; font-family:Tahoma,Verdana,dotum; font-size:1.5em; letter-spacing:-0.08em; display:inline-block; line-height:4em; text-shadow:.1em .1em .10em #FFBFBF;}

#web #wrap article.a3 p {margin:2%; column-count:3; column-width:5em; column-gap:5em; column-rule:.1em yellow dotted; -webkit-column-count:3; -webkit-column-width:5em; -webkit-column-gap:5em; -webkit-column-rule:.1em yellow dotted; -moz-column-count:3; -moz-column-width:5em; -moz-column-gap:5em; -moz-column-rule:.1em yellow dotted; }


#tablet #wrap {max-width:600px; margin:0 auto; overflow:hidden; background:red;}

#tablet #wrap header {text-align:center; background:#7C7C7C; margin:10px 0;}

#tablet #wrap header>h1 { font-size:20px; line-height:2.2em;}

#tablet #wrap nav {background:#EFAE03; text-align:center; margin:10px 0;}

#tablet #wrap nav>ul {height:50px; overflow:hidden;}

#tablet #wrap nav>ul li {width:25%; float:left; padding:20px 0;}

#tablet #wrap nav>ul li.g1 {background:#7C7C7C;}

#tablet #wrap nav>ul li.g2 {background:#B4B4B4;}

#tablet #wrap nav>ul li.g3 {background:#7C7C7C;}

#tablet #wrap nav>ul li.g4 {background:#B4B4B4;}

#tablet #wrap #content {height:auto; overflow:hidden;}

#tablet #wrap section {background:#C5C5C5; text-align:center; overflow:hidden; float:left; width:98%; padding:1%;}

#tablet #wrap article {background:#7C7C7C; text-align:center; float:left; width:44%; height:150px;overflow:hidden;}

#tablet #wrap article.a1 {float:left; width:100%; margin-bottom:10px;}

#tablet #wrap article.a2 {float:left; width:49%; margin-right:1%;}

#tablet #wrap article.a3 {float:left; width:50%;}

#tablet #wrap aside {background:#6E6E6E; text-align:center; overflow:hidden; float:left; width:100%; margin-top:10px; height:100px;}

#tablet #wrap footer {background:gray; text-align:center; height:30px; margin:10px 0; display:block; float:left; width:100%; padding:10px 0;}

#tablet #wrap article.a1 a { width:96%; display:block; color:#fff;}

#tablet #wrap article.a1 a:hover {color:skyblue;}

#tablet #wrap article.a1 strong.tit {text-align:left; display:block; padding-top:10px;}

#tablet #wrap article.a1 span.txt {text-align:left; display:block; font-weight:normal; margin-top:10px;}

#tablet #wrap article.a1 a img {max-width:100%; max-height:150px; height:auto; line-height:0; margin-right:10px; float:left;} 

#tablet #wrap article.a2 .shape1 {-webkit-border-radius:0.5em; -moz-border-radius:0.5em; border-radius:0.5em; background:red; width:25%; height:25%; margin:10px;}

#tablet #wrap article.a2 .shape1 .txt {font-weight:bold; font-family:Tahoma,Verdana,dotum; font-size:1.2em; letter-spacing:-0.08em; display:inline-block; line-height:2.3em; text-shadow:.1em .1em .10em #FFBFBF;}

#tablet #wrap article.a3 p {margin:2%; column-count:3; column-width:5em; column-gap:5em; column-rule:.1em yellow dotted; -webkit-column-count:3; -webkit-column-width:5em; -webkit-column-gap:5em; -webkit-column-rule:.1em yellow dotted; -moz-column-count:3; -moz-column-width:5em; -moz-column-gap:5em; -moz-column-rule:.1em yellow dotted; }


#mobile #wrap {max-width:600px; margin:0 auto; overflow:hidden; background:yellow;}

#mobile #wrap header {text-align:center; background:#7C7C7C; margin:10px 0;}

#mobile #wrap header>h1 { font-size:15px; line-height:2.2em;}

#mobile #wrap nav {background:#EFAE03; text-align:center; margin:10px 0;}

#mobile #wrap nav>ul {overflow:hidden;}

#mobile #wrap nav>ul li {width:100%; float:left; padding:5px 0}

#mobile #wrap nav>ul li.g1 {background:#7C7C7C;}

#mobile #wrap nav>ul li.g2 {background:#B4B4B4;}

#mobile #wrap nav>ul li.g3 {background:#7C7C7C;}

#mobile #wrap nav>ul li.g4 {background:#B4B4B4;}

#mobile #wrap #content {height:auto; overflow:hidden;}

#mobile #wrap section {background:#C5C5C5; text-align:center; overflow:hidden; float:left; width:100%; margin-left:-10px; padding:10px;}

#mobile #wrap article {background:#7C7C7C; text-align:center; float:left; width:44%; height:100px;overflow:hidden;}

#mobile #wrap article.a1 {float:left; width:100%; margin-bottom:10px;}

#mobile #wrap article.a2 {float:left; width:100%;}

#mobile #wrap article.a3 {float:left; width:100%; height:80px; display:none;}

#mobile #wrap aside {background:#6E6E6E; text-align:center; overflow:hidden; float:left; width:100%; margin-top:10px; height:50px;}

#mobile #wrap ooter {background:gray; text-align:center; height:30px; margin:10px 0; display:block; float:left; width:100%; padding:10px 0;}

#mobile #wrap article.a1 a { width:96%; display:block; color:#fff;}

#mobile #wrap article.a1 a:hover {color:skyblue;}

#mobile #wrap article.a1 strong.tit {text-align:left; display:block; padding-top:10px;}

#mobile #wrap article.a1 span.txt {display:none;}

#mobile #wrap article.a1 a img {max-width:100%; max-height:100px; height:auto; line-height:0; margin-right:10px; float:left;} 

#mobile #wrap article.a2 .shape1 {-webkit-border-radius:0.5em; -moz-border-radius:0.5em; border-radius:0.5em; background:red; width:25%; height:25%; margin:10px;}

#mobile #wrap article.a2 .shape1 .txt {font-weight:bold; font-family:Tahoma,Verdana,dotum; font-size:1.5em; letter-spacing:-0.08em; display:inline-block; line-height:1.2em; text-shadow:.1em .1em .10em #FFBFBF;}

#mobile #wrap article.a3 p {margin:2%; column-count:3; column-width:5em; column-gap:5em; column-rule:.1em yellow dotted; -webkit-column-count:3; -webkit-column-width:5em; -webkit-column-gap:5em; -webkit-column-rule:.1em yellow dotted; -moz-column-count:3; -moz-column-width:5em; -moz-column-gap:5em; -moz-column-rule:.1em yellow dotted; }


</style>

<link rel="shortcut icon" href="http://www.sbs.co.kr/favicon.ico">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>

<script type="text/javascript">

$(function(){

screenControl();


$(window).resize(function(){

screenControl();

});

});


function screenControl(){

var screenW=$("html, body").prop("clientWidth");

if(screenW<320 && screenW>1){//모바일

$("body").attr("id","mobile");

}else if(screenW<600 && screenW>321){//태블릿

$("body").attr("id","tablet");

}else{

$("body").attr("id","web");

}

}

</script>

</head>

<body>

<div id="wrap">

<header><h1><img src="images/logo.png">반응형웹 가이드</h1></header>

<nav>

<ul>

<li class="g1">메뉴1</li>

<li class="g2">메뉴2</li>

<li class="g3">메뉴3</li>

<li class="g4">메뉴4</li>

</ul>

</nav>

<div id="content">

<section>

<article class="a1">

<a href="#">

<img src="images/@img.jpg">

<strong class="tit">이런식으로 이미지 사이즈를 유동적으로하면 오퍼시티 보더라인 적용 불가</strong>

<span class="txt">유동적인 이미지 사이즈 대응을 하기 위해선 고퀄리티 이미지가 필요함.</span>

</a>

</article>

<article class="a2">

<div class="shape1"><span class="txt">NEW!</span></div>

<p>css로 만든 동그라미와 텍스트 그림자. 글자 각도</p>

</article>

<article class="a3">

<p>

가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가

</p>

</article>

</section>

<aside>부가영역</aside>

</div>

<footer>풋터</footer>

</div>

</body>

</html>



저작자표시

'10. HTML' 카테고리의 다른 글

[html] html,jsp,php,asp redirect - 언어별 리다이렉트 방법  (0) 2015.12.09
html 특수 문자 표현식  (0) 2015.02.09
[HTML]document.body.scrollTop 대체  (0) 2010.04.30
text 박스 테두리 없애기  (1) 2010.01.21
font-size, font-style등 폰트 스타일  (0) 2010.01.21


이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
공유하기 링크
'10. HTML' Related Articles more
Comments