Top
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>responsible web</title>
<style>
body {
color: #555;
font: 12px/1.5 'Trebuchet MS', sans-serif;
}
#wrap {
width: 970px;
margin: 0 auto;
padding-top: 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: 481px) {
body {
background-color: yellow;
}
}
@media screen and (max-width: 480px) {
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. Omnis consequuntur doloremque optio, quia rem doloribus fuga, iure deleniti libero. Maiores voluptates debitis iusto accusamus aliquid sunt excepturi necessitatibus, eos dolor vel officia neque velit illum consequatur aspernatur sequi iste commodi culpa eaque praesentium hic quaerat earum autem. Voluptate eos error sed, corporis esse blanditiis odit consequatur magnam minus voluptatem minima voluptatibus, quis quo obcaecati explicabo quisquam ex. Aliquid in laborum sed temporibus nesciunt assumenda officiis earum autem numquam quibusdam! Doloremque ipsum sed nihil tempora tempore, sunt commodi ad deleniti quam illo aspernatur molestiae, sint atque est laboriosam, dolores. Ipsum, pariatur?</p>
</div>
</body>
</html>
미디어 쿼리를 활용한 반응형 웹
폭이 특정 픽셀 값 아래로 가면 겉을 감싸는 wrap의 폭이 없어지고
세로모드(높이가 폭보다 길 때)일때는 노란 배경
모바일처럼 폭이 좁을 때는 폰트가 커지게 함
/* medium size */
@media screen and (max-width: 760px) {
#wrap {
width: 100%;
}
#footer .btm_menu {
float: none;
margin-bottom: 10px;
}
}
/* small size */
@media screen and (max-width: 480px) {
body,h1,h2 {
font-size: 14px;
}
#header {
padding-bottom: 0;
background-image: none !important;
/* 우선 순위가 낮을때 !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: auto !important;
height: 40px;
border-bottom: 1px solid #555;
background-image: none !important;
background-color: #444;
color: #999;
font: bold 18px/40px 'Trebuchet MS',sans-serif;
text-align: center;
text-transform: uppercase;
text-decoration: none;
text-indent: 0;
}
#header .lnb li a.on,
#header .lnb li a:hover {
border-bottom-color: #777;
background-color: #666;
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;
}
}
지난 번에 했던 subcide 예제에 반응형을 적용한 모습
폭이 줄어들면 로고의 위치가 옮겨지고 footer의 텍스트들의 float가 해지되고
모바일 수준의 폭까지 줄어들면 메뉴도 이미지에서 텍스트로 바뀌고 상하로 바뀐다.
그리고 본문과 aside 내용도 float가 해지된다.
반응형은 오히려 조건도 폭 기준으로 하면 되고
크게 어려운 부분은 없었다.
폭 기준으로 아예 새로 짠다는 느낌이랄까
오히려 XD로 반응형 구현하려고 하던게 더 골치 아팠던 것 같다.
반응형
'Daily Study > Web Dev' 카테고리의 다른 글
| 028 웹사이트 예제 실습 (2) css 적용 (0) | 2021.03.18 |
|---|---|
| 027 웹사이트 예제 실습 (1) html 마크업 (0) | 2021.03.15 |
| 025 CSS3 공부 (4) transform, filter (0) | 2021.03.05 |
| 024 CSS3 공부 (3) transition, transform, animation (0) | 2021.03.04 |
| 023 CSS3 공부 (2) multi columns, rounded box, box-sizing, flex (0) | 2021.03.02 |
Daily Study/Web Dev
