728x90
레이아웃05
이번 레이아웃은 레이아웃 03번이랑 유사합니다. 공부하실 때 레이아웃03번도 참고하면 도움이 될 것입니다.
float을 이용한 레이아웃
float이란, 페이지에서 이미지와 텍스트를 인라인으로 어우러지게 할 수 있는 기능입니다.(구버전)
※ float 속성을 적용하면 그 다음 요소에도 float가 적용되어 버그가 생길 수 있습니다. 이럴 때 사용할 수 있는 속성이 "clear" 입니다.
사용 방법
div태그는 block특성을 가지고 있기 때문에 세로로 나타납니다. 이를 가로로 정렬시켜주는 것이 float입니다.
*{
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#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 {
margin: 0 auto;
width: 1200px;
height: inherit;
background-color: rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.contents .con1 {
width: 100%;
height: 100px;
background-color: #74574A;
}
.contents .con2 {
width: 100%;
height: 200px;
background-color: #684D43;
}
.contents .con3 {
width: 50%;
height: 480px;
float: left;
background-color: #594139;
}
.contents .con4 {
width: 50%;
height: 480px;
float: left;
background-color: #4A352F;
}
/*
float으로 인한 영역깨짐 방지법
1. 깨지는 영역에 clear:both를 설정한다. ->But, 구조가 복잡해지면 문제가 생길 수 있음.
2. 부모 박스 영역에 overflow: hidden을 설정한다. ->완벽한 방법은 아님
3. clearfix를 설정한다.
*/
/* clearfix */
.clearfix::before,
.clearfix::after {
content: '';
display: block;
line-height: 0;
}
.clearfix::after {
clear: both;
}
@media (max-width: 1220px){
.container {
margin: 0 auto;
width: 96%;
height: inherit;
background-color: rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.contents .con1 {
width: 30%;
height: 780px;
float: left;
}
.contents .con2 {
width: 70%;
height: 390px;
float: left;
}
.contents .con3 {
width: 35%;
height: 390px;
}
.contents .con4 {
width: 35%;
height: 390px;
}
}
@media (max-width: 768px){
.container {
width: 100%;
}
.contents .con1 {
width: 30%;
height: 780px;
float: left;
}
.contents .con2 {
width: 70%;
height: 260px;
float: left;
}
.contents .con3 {
width: 70%;
height: 260px;
}
.contents .con4 {
width: 70%;
height: 260px;
}
}
@media (max-width: 480px){
.contents .con1 {
width: 100%;
height: 150px;
}
.contents .con2 {
width: 100%;
height: 210px;
float: left;
}
.contents .con3 {
width: 100%;
height: 210px;
}
.contents .con4 {
width: 100%;
height: 210px;
}
}
결과
flex을 이용한 레이아웃
flex란, 유연성을 뜻하며 레이아웃 배치 전용 기능으로 고안되었습니다. (신버전)
flex 아이템들은 가로 방향으로 배치되고 inline 요소들 처럼 아이템들의 width만큼을 차지하게 됩니다.
사용 방법
display: flex;
아이템들을 더 이상 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성 : flex-wrap
flex-wrap: wrap;
* {
margin: 0;
}
#wrap {
width: 100%;
}
#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 {
margin: 0 auto;
width: 1200px;
height: inherit;
background-color: rgba(0, 0, 0, 0.3);
}
.contents .left {
width: 100%;
}
.contents .left .con1 {
height: 100px;
background-color: #74574A;
}
.contents .right {
height: 680px;
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;
flex-wrap: wrap;
}
.contents .left {
width: 30%;
height: 780px;
}
.contents .left .con1 {
width: 100%;
height: 780px;
}
.contents .right {
width: 70%;
height: 780px;
}
.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 {
width: 100%;
height: 210px;
}
.contents .right .con3 {
width: 100%;
height: 210px;
}
.contents .right .con4 {
width: 100%;
height: 210px;
}
}
결과
grid을 이용한 레이아웃
grid는 2차원(행과 열)의 레이아웃 시스템을 제공합니다. 위의 방법들과는 달리, 더 복잡한 레이아웃을 만들기 위해서는 grid방법을 사용하는 것이 편리합니다.
사용 방법
display: grid;
table처럼 행과 열을 나눠준 후에 area를 정해주면 됩니다.
*{
margin: 0;
}
#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;
}
.contents {
display: grid;
grid-template-areas:
"cont1 cont2 cont2"
"cont1 cont3 cont4";
grid-template-columns: 1fr 1fr 1fr; /* 동등하게 3등분*/
/* grid-template-columns: repeat(3, 1fr); 동등하게 3등분
grid-template-columns: repeat(3, 33.3333% ); 동등하게 3등분
grid-template-columns: 33.3333% 33.3333% 33.3333%; 동등하게 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%; /* 동등하게 3등분*/
grid-template-rows: repeat(2, 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;
}
}
댓글