퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
제대로 배워보는 html과 css, 그리고 웹표준 13. 반응형 웹 알아보기
13.1 미디어쿼리 알아보기
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
color: #555;
font: 12px/1.5 'Trebuchet MS', sans-serif;
}
#wrap {
width: 970px;
margin: 0 auto;
padding: 0 15px;
box-sizing: border-box;
}
@media screen and (min-width: 1200px) {
#wrap {
width: 1200px;
}
}
@media screen and (max-width: 970px) {
#wrap {
width: auto;
}
}
@media screen and (max-width: 970px) and (min-width: 641px) {
body {
background-color: yellow;
}
}
/* 범위는 안 겹치는 게 좋다 */
@media screen and (max-width: 640px) {
body {
font-size: 14px;
}
}
@media screen and (orientation: portrait) {
h1:after {
content: ' portrait view';
font-size: .8em;
color: blue;
}
}
@media screen and (orientation: landscape) {
h1:after {
content: ' landscape view';
font-size: .8em;
color: red;
}
}
</style>
</head>
<body>
<div id="wrap">
<h1>LOGO</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit odio excepturi, voluptates totam cupiditate, delectus possimus, ratione sit quas dolorum officiis pariatur voluptatibus unde odit rerum similique libero animi.</p>
</div>
</body>
</html>.
13.2 반응형 웹 페이지 실습하기
기존 subcide 웹 페이지 실습에 respond.css 추가
/* medium size */
@media screen and (max-width: 860px) {
#wrap {
width: auto;
}
#footer dl.btm_menu{
float: none !important;
margin-bottom: 0;
}
}
/* small size */
@media screen and (max-width: 640px) {
#header {
padding-bottom: 15px;
background-image: none !important;
}
#header .logo {
position: static;
background-color: #272727;
text-align: center;
}
#header .logo a {
display: block;
padding: 5px 0;
}
#header .lnb {
padding-left: 0;
}
#header .lnb li {
float: none;
}
#header .lnb li a {
width: 100% !important;
height: 40px;
background-image: none !important;
font: bold 18px/40px 'Trebuchet MS', sans-serif;
text-decoration: none;
text-indent: 0;
text-align: center;
background-color: #444;
color: #999;
text-transform: uppercase;
border-bottom: 1px solid #555;
}
#header .lnb li a.on, #header .lnb li a:hover {
background: #666;
border-bottom-color: #777;
color: #fff;
}
#container #content {
float: none;
width: 100%;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
}
#container #aside {
float: none;
width: 100%;
}
#container #aside .inner {
padding-left: 25px;
}
}
'개발 공부 > html & css' 카테고리의 다른 글
| 제대로 배워보는 html과 css, 그리고 웹표준 14. 웹 사이트 제작 실습 (0) | 2020.09.24 |
|---|---|
| 제대로 배워보는 html과 css, 그리고 웹표준 12. css3 알아보기 (0) | 2020.09.23 |
| 제대로 배워보는 html과 css, 그리고 웹표준 11. 웹 페이지 만들어보기 실습 (0) | 2020.09.18 |
| 제대로 배워보는 html과 css, 그리고 웹표준 10. 예제 만들어보기(네이버 Nuli) (0) | 2020.09.17 |
| 제대로 배워보는 html과 css, 그리고 웹표준 9. EMS, 이벤트 제작 실습 (0) | 2020.09.11 |
