| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- 영어
- android
- 안드로이드 2.0 개발
- 구글안드로이드
- 하루한마디영어
- 안드로이드
- 구글 안드로이드 개발
- 구글 안드로이드
- 스카이 안드로이드폰 시리우스 K양 동영상
- 안드로이드 개발 2.0
- 안드로이드개발
- 하루 한마디 영어
- sky 시리우스폰
- Form Stuff
- 아이폰 바탕화면
- 안드로이드 개발 2.0 강좌
- 안드로이드 개발 강좌
- 안드로이드2.0
- 안드로이드 배경화면
- 안드로이드폰
- 안드로이드 개발
- MapView
- objective-c
- SKY 시리우스
- 아이폰 배경화면
- 인기있는 블로그 만들기
- 스마트폰 배경화면
- 안드로이드 바탕화면
- 스카이 안드로이드폰 시리우스
- 안드로이드2.0개발
- Today
- Total
moozi
반응형 웹 샘플 본문
반응형 웹 샘플
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 웹페이지 연습</title>
<style type="text/css">
* {
box-sizing: border-box; /* 박스의 width에 padding,border포함 */
padding:0px;
margin:0px;
}
ul.topnav {
list-style-type: none; /* 기호 없애기 */
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumvioletred;
opacity:0.98;
}
ul.topnav li {
float: left; /* 메뉴 항목을 옆으로 펼침 */
}
ul.topnav li a {
display: block; /* 한항목씩 출력 */
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none; /* 밑줄없애기 */
}
ul.topnav li a:hover:not(.active) {
background-color: #111;
}
ul.topnav li a.active {
background-color: #4CAF50;
}
ul.topnav li.right {
float: right; /* 오른쪽 끝으로 배치 */
}
#toRight{
float: right;
}
/* 767px 이하 */
@media screen and (max-width:767px){
#toRight{
float: none;
}
ul.topnav{
position: fixed;
width:100%;
z-index: 10;
}
.header{
padding-top: 55px !important;
}
[class*="col-"] {
width: 100%; /* 가로폭 100% */
}
ul.topnav li:not(:first-child) {
display: none;/* 첫번째 항목을 제외한 나머지는 안보이게 */
}
ul.topnav li.icon {
float: right;/* 오른쪽 끝에 위치 */
display: inline-block !important; /* 메뉴 아이콘이 보이게 */
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none; /* 목록 아이템이 밑으로 */
display: inline;
}
ul.topnav.responsive li a {
display: block; /* 보이게 */
text-align: left;
}
}
/* 783px ~ 959px */
@media screen and (min-width:768px) and (max-width:959px){
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
/* 960px 이상 */
@media screen and (min-width:960px){
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
.row::after {
content: "";
clear: both;
display: block;
}
/* 클래스명이 'col-'이 들어가는 것을 찾아서 적용 */
[class*="col-"] {
float: left; /* 옆으로 배치 */
padding: 15px;
}
ul.topnav li.icon {
display: none; /* 처음에 메뉴 아이콘이 안보이게 */
}
}
</style>
</head>
<body>
<ul class="topnav">
<div id="toRight">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li class="right"><a href="#about">About</a></li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
</li>
</div>
</ul>
<div class="header">
<h1>TIS정보기술교육센터</h1>
</div>
<div class="row">
<div class="col-3 col-m-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6 col-m-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>
<div class="col-3 col-m-12 right">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
<script type="text/javascript">
function myFunction(){
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");/* responsive클래스를 적용/미적용 반복 */
}
</script>
</div>
</body>
</html>
'TIS_2016 > 주말반_4기' 카테고리의 다른 글
| loader.html (0) | 2016.09.10 |
|---|---|
| 반응형 웹페이지 샘플 - photo (0) | 2016.09.10 |
| 9/3 수업파일 (0) | 2016.09.03 |
| layout05.html (0) | 2016.09.03 |
| layout04.html (0) | 2016.09.03 |