레이아웃02
이번 레이아웃은 article 블록이 하나 더 추가된 형태로 반응형 시 추가된 article 블록이 레이아웃01과 조금 다르지만 비슷한 방식으로 반응형을 완성할 수 있습니다.
float을 이용한 레이아웃
float 방식은 옮겨야 할 블록에 float:left로 정렬을 하고 clear:both를 통해 플로팅을 닫아 형태를 완성합니다.
많이 쓰이는 방식이나 복잡한 구조일수록 사용하기 힘든 단점이 있습니다.
float 방식은 clear, overflow, clearfix 세가지 방식이 있습니다.
이번 방식은 ovrerflow 방식입니다.
* {
margin: 0;
padding: 0;
}
body {
background-color: #E8F5E9;
height: 100%;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
background-color: #C8E6C9;
}
#nav {
width: 100%;
height: 100px;
background-color: #A5D6A7;
}
#main {
width: 100%;
}
#aside {
width: 25%;
height: 780px;
background-color: #81C784;
float: left;
}
#section {
width: 50%;
height: 780px;
background-color: #66BB6A;
float: left;
}
#article {
width: 25%;
height: 780px;
background-color: #4CAF50;
float: left;
}
#footer {
width: 100%;
height: 100px;
background-color: #43A047;
clear: both;
}
@media (max-width: 1300px){
#wrap {
width: 96%;
}
}
@media (max-width: 768px){
#wrap {
width: 100%;
}
#aside {
width: 30%;
height: 780px;
background-color: #81C784;
}
#section {
width: 70%;
height: 780px;
background-color: #66BB6A;
}
#article {
width: 100%;
height: 150px;
background-color: #4CAF50;
}
}
@media (max-width: 480px){
#wrap {
width: 100%;
}
#aside {
width: 100%;
height: 200px;
background-color: #81C784;
}
#section {
width: 100%;
height: 430px;
background-color: #66BB6A;
}
#article {
width: 100%;
height: 150px;
background-color: #4CAF50;
}
}
flex를 이용한 레이아웃
flex 방식은 정렬해야 할 블록에 flex-wrap을 주어 떨어진 블록을 붙이면서 정렬시키는 방식입니다.
간단한 코드만으로 형태를 완성할 수 있는 장점이 있지만 복잡한 구조에선 추가 작업이 필요하며 익스플로러 등의 일부
브라우저에선 호환이 안되는 단점이 있습니다.
* {
margin: 0;
padding: 0;
}
body {
background-color: #E8F5E9;
height: 100%;
}
#wrap {
width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
#header {
width: 100%;
height: 100px;
background-color: #C8E6C9;
}
#nav {
width: 100%;
height: 100px;
background-color: #A5D6A7;
}
#main {
width: 100%;
display: flex;
flex-wrap: wrap;
}
#aside {
width: 25%;
height: 780px;
background-color: #81C784;
}
#section {
width: 50%;
height: 780px;
background-color: #66BB6A;
}
#article {
width: 25%;
height: 780px;
background-color: #4CAF50;
}
#footer {
width: 100%;
height: 100px;
background-color: #43A047;
}
@media (max-width: 1300px){
#wrap {
width: 96%;
}
}
@media (max-width: 768px){
#wrap {
width: 100%;
}
#aside {
width: 30%;
height: 780px;
background-color: #81C784;
}
#section {
width: 70%;
height: 780px;
background-color: #66BB6A;
}
#article {
width: 100%;
height: 150px;
background-color: #4CAF50;
}
}
@media (max-width: 480px){
#wrap {
width: 100%;
}
#aside {
width: 100%;
height: 200px;
background-color: #81C784;
}
#section {
width: 100%;
height: 430px;
background-color: #66BB6A;
}
#article {
width: 100%;
height: 150px;
background-color: #4CAF50;
}
}
grid를 이용한 레이아웃
gird 방식은 블록을 테이블처럼 구역별로 나누어 부모 요소가 자식 요소를 컨트롤 함으로써 형태를 완성하는 방식입니다.
비교적 많은 코드가 필요하지만 부모 요소만 조절하면 모든 블록을 조절할 수 있어 복잡한 구조일수록 편해집니다.
* {
margin: 0;
padding: 0;
}
body {
background-color: #E8F5E9;
height: 100%;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
background-color: #C8E6C9;
}
#nav {
width: 100%;
height: 100px;
background-color: #A5D6A7;
}
#main {
width: 100%;
display: grid;
grid-template-areas:
"aside section article"
;
grid-template-columns: 25% 50% 25%;
grid-template-rows: 780px;
}
#aside {
background-color: #81C784;
grid-area: aside;
}
#section {
background-color: #66BB6A;
grid-area: section;
}
#article {
background-color: #4CAF50;
grid-area: article;
}
#footer {
width: 100%;
height: 100px;
background-color: #43A047;
}
@media (max-width: 1300px){
#wrap {
width: 96%;
}
}
@media (max-width: 768px){
#wrap {
width: 100%;
}
#main {
grid-template-areas:
"aside section"
"article article"
;
grid-template-columns: 40% 60%;
grid-template-rows: 630px 150px;
}
}
@media (max-width: 480px){
#main {
grid-template-areas:
"aside"
"section"
"article"
;
grid-template-columns: 100%;
grid-template-rows: 200px 430px 150px;
}
}
댓글