Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
Tags
- 그럼에도불구하고
- react-router-dom
- 코딩테스트
- git
- node
- webpack
- node.js
- max-width
- 자바문제풀이
- 자바
- JavaScript
- cleancode
- media query
- react
- 코드업
- coding
- 반응형 페이지
- 프론트엔드
- 변수
- CSS
- frontend
- @media
- 그럼에도 불구하고
- Servlet
- TypeScript
- redux
- HTML
- java
- JS
- github
Archives
- Today
- Total
그럼에도 불구하고
[Responsive web] 반응형 페이지 layout 만들기 Ver_5 본문
layout 만들기 Ver_5
소스코드
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout5</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #fffde7;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
header {
width: 100%;
height: 100px;
background-color: #b0b0ea;
}
.top-article {
width: 100%;
height: 300px;
background-color: #9090ed;
}
aside {
float: left;
width: 33.333333%;
height: 350px;
background-color: #6f6fbc;
}
.middle-article {
float: left;
width: 66.666666%;
height: 175px;
}
.middle-article1 {
background-color: #6464be;
}
.middle-article2 {
background-color: #4a4a8f;
}
.bottom-article {
float: left;
width: 33.333333%;
height: 200px;
}
.bottom-article1 {
background-color: #9c9cea;
}
.bottom-article2 {
background-color: #8383eb;
}
.bottom-article3 {
background-color: #4f4fea;
}
section {
clear: both;
width: 100%;
height: 200px;
background-color: #bebee8;
display: flex;
justify-content: space-around;
align-items: center;
}
section>div {
width: 15%;
margin: 5%;
height: 80%;
background-color: #9090ed;
border-radius: 20px;
}
footer {
width: 100%;
height: 100px;
background-color: #8383eb;
}
/* 화면 너비 0 ~ 1200px */
@media (max-width: 1220px) {
#wrap {
width: 100%;
}
.bottom-article {
width: 50%;
}
.bottom-article2 {
display: none;
}
section>div {
width: 21.333333%;
}
section>div:nth-child(4) {
display: none;
}
}
/* 화면 너비 0 ~ 768x */
@media (max-width: 768px) {
section {
height: 150px;
}
}
/* 화면 너비 0 ~ 480x */
@media (max-width: 480px) {
section {
height: 100px;
}
.bottom-article {
width: 100%;
}
}
/* 화면 너비 0 ~ 320x */
@media (max-width: 320px) {
section {
height: 360px;
display: block;
padding: 10px 0;
}
section>div {
width: 90%;
height: 100px;
}
}
</style>
</head>
<body>
<div id="wrap">
<header></header>
<article class="top-article"></article>
<aside></aside>
<article class="middle-article middle-article1"></article>
<article class="middle-article middle-article2"></article>
<article class="bottom-article bottom-article1 "></article>
<article class="bottom-article bottom-article2 "></article>
<article class="bottom-article bottom-article3 "></article>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<footer></footer>
</div>
</body>
</html>
화면 너비 1220px 초과
section {
clear: both;
width: 100%;
height: 200px;
background-color: #bebee8;
display: flex;
justify-content: space-around;
align-items: center;
}
section>div {
width: 15%;
margin: 5%;
height: 80%;
background-color: #9090ed;
border-radius: 20px;
}
화면 너비 1220px 이하
/* 화면 너비 0 ~ 1200px */
@media (max-width: 1220px) {
#wrap { width: 100%; }
.bottom-article { width: 50%; }
.bottom-article2 {display: none; }
section>div {width: 21.333333%;}
section>div:nth-child(4) {display: none;}
}
1. 기존 bottom-article 3개에서 bottom-article2를 display:none;
남은 bottom-article의 width : 33.333333%에서 50%로 변경
2. 기존 section안 div 4개에서 section > div:nth:child(4)의 display를 none으로 변경
남은 div의 너비를 15%에서 21.333333%로 변경
화면 너비 768px 이하
/* 화면 너비 0 ~ 768x */
@media (max-width: 768px) {
section { height: 150px; }
section>div {width: 21.333333%; }
}
section 높이 200px에서 150px로 변경
화면 너비 480px 이하
/* 화면 너비 0 ~ 480x */
@media (max-width: 480px) {
section { height: 100px; }
.bottom-article { width: 100%; }
}
1. section 높이 150px에서 100px로 변경
2. bottom-article의 너비를 50%에서 100%로 변경
화면 너비 320px 이하
/* 화면 너비 0 ~ 320x */
@media (max-width: 320px) {
section {
height: 360px;
display: block;
padding: 10px 0;
}
section>div {
width: 90%;
height: 100px;
}
}
1. section의 높이 100px에서 300px로 변경
2. section display:flex를 block으로 변경 ( 가로 정렬 )
3. section안의 div의 너비를 90%로 변경
'HTML, CSS > Responsive web' 카테고리의 다른 글
[Responsive web] max-(width/height)과 min-(width/height) 그리고 반응형 웹 (0) | 2023.02.02 |
---|---|
[Responsive web] 반응형 페이지 layout 만들기 Ver_4 (0) | 2023.01.19 |
[Responsive web] cloneCoding Elarm Artists (0) | 2023.01.19 |
[Responsive web] 반응형 페이지 layout 만들기 Ver_3 (0) | 2023.01.18 |
[Responsive web] 반응형 페이지 layout 만들기 Ver_2 (0) | 2023.01.18 |
Comments