| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- 안드로이드 바탕화면
- 구글 안드로이드
- 안드로이드폰
- sky 시리우스폰
- 안드로이드2.0
- 스마트폰 배경화면
- 안드로이드2.0개발
- 안드로이드 개발 강좌
- SKY 시리우스
- 안드로이드
- Form Stuff
- 구글 안드로이드 개발
- 아이폰 배경화면
- 아이폰 바탕화면
- 구글안드로이드
- 영어
- 안드로이드 개발
- 하루 한마디 영어
- 안드로이드 배경화면
- 하루한마디영어
- 안드로이드 개발 2.0
- 안드로이드개발
- 스카이 안드로이드폰 시리우스 K양 동영상
- 스카이 안드로이드폰 시리우스
- android
- 인기있는 블로그 만들기
- objective-c
- 안드로이드 2.0 개발
- 안드로이드 개발 2.0 강좌
- MapView
- Today
- Total
moozi
layout10 본문
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> ex2_step3 </title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="js/prefixfree.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
position: fixed;
left:0;
width:15%;
height: 100%;
float: left;
background: #eeeeee;
}
nav{
position: relative;
left:15%;
width:85%;
height: 50px;
background: black;
float:left;
}
section{
position: relative;
width: 85%;
left: 15%;
float:left;
}
article{
position: relative;
float:left;
height: 250px;
}
article:nth-child(1){width:60%;height:500px;background: gray;}
article:nth-child(2){width:40%;background: #dddddd;}
article:nth-child(3){width:20%;background: #eeeeee;}
article:nth-child(4){width:20%;background: olive;}
article:nth-child(5){width:20%;background: #ececec;}
article:nth-child(6){width:40%;background: #dddddd;}
article:nth-child(7){width:20%;background: #cecece;}
article:nth-child(8){width:20%;background: #ededed;}
article:nth-child(9){width:40%;background: #dedede;}
article:nth-child(10){width:20%;background: #efefef;}
article:nth-child(11){width:20%;background: #dddddd;}
article:nth-child(12){width:20%;background:olive;}
@media screen and (max-width:1599px){
header{
width: 100%;
height:150px;
top:0;
}
nav{
width: 100%;
left:0;
top:150px;
}
section{
width:100%;
left:0;
top:150px;
}
}
@media screen and (max-width:992px){
article:nth-child(1){width:75%;height:500px;background: gray;}
article:nth-child(2){width:25%;background: #dddddd;}
article:nth-child(3){width:25%;background: #eeeeee;}
article:nth-child(4){width:25%;background: olive;}
article:nth-child(5){width:50%;background: #ececec;}
article:nth-child(6){width:25%;background: #dddddd;}
article:nth-child(7){width:25%;background: #cecece;}
article:nth-child(8){width:25%;background: red;}
article:nth-child(9){width:50%;background: aqua;}
article:nth-child(10){width:25%;background: #efefef;}
article:nth-child(11){width:25%;background: #dddddd;}
article:nth-child(12){width:25%;background:olive;}
}
@media screen and (max-width:600px){
article:nth-child(1){width:100%;height:500px;background: gray;}
article:nth-child(2){width:50%;background: #dddddd;}
article:nth-child(3){width:50%;background: #eeeeee;}
article:nth-child(4){width:50%;background: olive;}
article:nth-child(5){width:50%;background: #ececec;display: none}
article:nth-child(6){width:50%;background: #dddddd;}
article:nth-child(7){width:50%;background: #cecece;display:none}
article:nth-child(8){width:50%;background: red;}
article:nth-child(9){width:50%;background: aqua;display:none}
article:nth-child(10){width:50%;background: #efefef;}
article:nth-child(11){width:50%;background: #dddddd;display: none;}
article:nth-child(12){width:50%;background:olive;display:none;}
}
</style>
</head>
<body>
<header>
</header>
<nav>
</nav>
<section>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
</section>
</body>
</html>
'TIS_2018 > 응용sw2018_2기' 카테고리의 다른 글
| movie index.html (0) | 2018.09.28 |
|---|---|
| html연습문제07 (0) | 2018.09.27 |
| html연습문제06 (0) | 2018.09.20 |
| html연습문제05 (0) | 2018.09.19 |
| html연습문제04 (0) | 2018.09.18 |