레이아웃05
이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정후에, float flex grid 방법중 하나를 선택해 구역을 나누어줍니다.
float을 이용한 레이아웃
float으로 인한 영역깨짐 방지법에는 세가지방법이있는데 그중 가상요소 clearfix 방법을 사용해 만들어보았다.
1. 깨지는 영역에 clear: both를 설정한다. 깨지는부분이 눈에보이지 않으므로 좋지않은방법
2. 부모 박스 영역에 overflow: hidden을 설정한다.
3. clearfix를 설정한다. (가상요소)
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#header {
width: 100%;
height: 100px;
background-color: #EEEBE9;
}
#nav {
width: 100%;
height: 100px;
background-color: #B9AAA5;
}
#main {
width: 100%;
height: 780px;
background-color: #886F65;
}
#footer {
width: 100%;
height: 100px;
background-color: #4E342E;
}
.container {
width: 1200px;
height: inherit;
margin: 0 auto;
background-color: rgba(0,0,0,0.3);
}
.contents .cont1 {
width: 100%;
height: 100px;
background-color: #74574A;
}
.contents .cont2 {
width: 100%;
height: 200px;
background-color: #684D43;
}
.contents .cont3 {
width: 50%;
height: 480px;
background-color: #594139;
float: left;
}
.contents .cont4 {
width: 50%;
height: 480px;
background-color: #4A352F;
float: left;
}
/*
float으로 인한 영역깨짐 방지법
1. 깨지는 영역에 clear: both를 설정한다. 깨지는부분이 눈에보이지 않으므로 좋지않은방법
2. 부모 박스 영역에 overflow: hidden을 설정한다.
3. clearfix를 설정한다. (가상요소)
*/
.clearfix::before,
.clearfix::after {
content: '';
display: block;
line-height: 0;
}
.clearfix::after {
clear: both;
}
@media (max-width : 1220px){
.container {
width: 96%;
}
.contents .cont1 {
width: 30%;
height: 780px;
float: left;
}
.contents .cont2 {
width: 70%;
height: 390px;
float: left;
}
.contents .cont3 {
width: 35%;
height: 390px;
}
.contents .cont4 {
width: 35%;
height: 390px;
}
}
@media (max-width : 768px){
.container {
width: 100%;
}
.contents .cont1 {
width: 30%;
height: 780px;
}
.contents .cont2 {
width: 70%;
height: 260px;
}
.contents .cont3 {
width: 70%;
height: 260px;
}
.contents .cont4 {
width: 70%;
height: 260px;
}
}
@media (max-width : 480px){
.contents .cont1 {
width: 100%;
height: 150px;
}
.contents .cont2 {
width: 100%;
height: 210px;
}
.contents .cont3 {
width: 100%;
height: 210px;
}
.contents .cont4 {
width: 100%;
height: 210px;
}
}
flex을 이용한 레이아웃
가운데 컨테이너 태그를 좌 우 두개의 태그로 나눈뒤에, 우측에 3개의 태그를 또 나누어 display:flex와 flex-wrap:wrap을 선언후 제작하였습니다.
화면의 크기마다 모양이 바뀌므로 미디어쿼리를 이용해서 max-width마다 새로 구조를 다시짠다는거로 생각하며 제작하면 쉽게 제작할수있습니다.
* {
margin: 0;
}
#wrap {}
#header {
height: 100px;
background-color: #EEEBE9;
}
#nav {
height: 100px;
background-color: #B9AAA5;
}
#main {
height: 780px;
background-color: #886F65;
}
#footer {
height: 100px;
background-color: #4E342E;
}
.container {
width: 1200px;
height: inherit;
background-color: rgba(0, 0, 0, 0.3);
margin: 0 auto;
}
.contents .left {}
.contents .left .con1 {
width: 100%;
height: 100px;
background-color: #74574A;
}
.contents .right {
display: flex;
flex-wrap: wrap;
}
.contents .right .con2 {
width: 100%;
height: 200px;
background-color: #684D43;
}
.contents .right .con3 {
width: 50%;
height: 480px;
background-color: #594139;
}
.contents .right .con4 {
width: 50%;
height: 480px;
background-color: #4A352F;
}
/* 미디어 쿼리 */
@media (max-width: 1220px) {
.container {
width: 96%;
}
.contents {
display: flex;
}
.contents .left {
width: 30%;
}
.contents .left .con1 {
width: 100%;
height: 780px;
}
.contents .right {
width: 70%;
}
.contents .right .con2 {
width: 100%;
height: 390px;
}
.contents .right .con3 {
width: 50%;
height: 390px;
}
.contents .right .con4 {
width: 50%;
height: 390px;
}
}
@media (max-width: 768px) {
.container {
width: 100%;
}
.contents .right .con2 {
width: 100%;
height: 260px;
}
.contents .right .con3 {
width: 100%;
height: 260px;
}
.contents .right .con4 {
width: 100%;
height: 260px;
}
}
@media (max-width: 480px) {
.contents {
flex-wrap: wrap;
}
.contents .left {
width: 100%;
height: 150px;
}
.contents .left .con1 {
height: 150px;
}
.contents .right {
width: 100%;
height: 630px;
}
.contents .right .con2 {
height: 210px;
}
.contents .right .con3 {
height: 210px;
}
.contents .right .con4 {
height: 210px;
}
}
grid을 이용한 레이아웃
마지막 grid방법입니다. 가장 만들기 쉬운방법이면서, grid-templaye-areas로 구역의 큰 틀을 잡고, grid-template-columns로 열의 비율을 맞추었으며, grid-template-rows로 행의 크기를 맞추어 제작했습니다. 또한 모바일 크기마다 구조가 계속 바뀌어 미디어쿼리에 크기마다 grid-template-areas를 사용해 구역을 재조정 하였습니다. 화면크기마다 새로 구조를 짠다고 생각을하면 제작하기 편하실겁니다.
* {
margin: 0;
}
#wrap {}
#header {
height: 100px;
background-color: #EEEBE9;
}
#nav {
height: 100px;
background-color: #B9AAA5;
}
#main {
height: 780px;
background-color: #886F65;
}
#footer {
height: 100px;
background-color: #4E342E;
}
.container {
width: 1200px;
height: inherit;
margin: 0 auto;
background-color: rgba(0,0,0,0.3);
}
.contents {
display: grid;
grid-template-areas:
"cont1 cont1"
"cont2 cont2"
"cont3 cont4"
;
grid-template-columns: 50% 50%;
grid-template-rows: 100px 200px 480px;
}
.contents .cont1 {
background-color: #74574A;
grid-area: cont1;
}
.contents .cont2 {
background-color: #684D43;
grid-area: cont2;
}
.contents .cont3 {
background-color: #594139;
grid-area: cont3;
}
.contents .cont4 {
background-color: #4A352F;
grid-area: cont4;
}
@media (max-width : 1220px){
.container {
width: 96%;
}
.contents {
display: grid;
grid-template-areas:
"cont1 cont2 cont2"
"cont1 cont3 cont4"
;
grid-template-columns: repea(3, 1fr); /* 1fr 작성시 공통적으로 3등분
/* grid-template-columns: repea(3, 33.33333%); 1fr 작성시 공통적으로 3등분 */
/* grid-template-columns: 1fr, 1fr, 1fr; 1fr 작성시 공통적으로 3등분 */
/* grid-template-columns: 33.33333% 33.33333% 33.33333% 1fr 작성시 공통적으로 3등분 */
grid-template-rows: repeat(2, 1fr);
}
}
@media (max-width : 768px){
.container {
width: 100%;
}
.contents {
display: grid;
grid-template-areas:
"cont1 cont2"
"cont1 cont3"
"cont1 cont4"
;
grid-template-columns: 30% 70%;
grid-template-rows: repeat(3, 1fr);
}
}
@media (max-width : 480px){
.contents {
display: grid;
grid-template-areas:
"cont1"
"cont2"
"cont3"
"cont4"
;
grid-template-columns: 100%;
grid-template-rows: 150px 210px 210px 210px;
}
}
댓글