레이아웃05
이번 레이아웃은 전체 영역이 들어간 구조입니다.
실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서
가운데 영역을 설정합니다.
조금 복잡해진 유형입니다.
Float을 이용한 레이아웃
float 방식 레이아웃은 구버전 익스플로어 등과의 호환을 위해 사용한다.
float는 속성이 상속되어 float 속성을 사용한 요소의 다음 요소에게 영향을 미치며,
이전 요소를 밀고 올라오게 되는데 clear: both로 해결 가능하지만, 복잡한 구조의 경우 한계가 있기 때문에
더 나은 방법으로 부모 요소에 overflow :hidden을 주는 방법이 있다.
그러나 overflow도 한계가 있는데 이를 위해 나온 방법이 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;
}
@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;
}
}
/*
float으로 인한 영역깨짐 방지법
1. 깨지는 영역에 clear:both를 설정한다.
2. 부모 박스 영역에 overflow: hidden을 설정한다.
3. clearfix를 설정한다.
*/
/* clearfix */
.clearfix::before{
zoom: 1;
}
.clearfix::before,
.clearfix::after {
content : '';
display: block;
line-height: 0;
}
.clearfix::after{
clear: both;
}
}
Flex방식 레이아웃
Flex 방식 레이아웃은 Flex는 레이아웃 배치 전용 기능으로 고안 되었다.
그래서 레이아웃을 만들 때 딱히 사용할게 없어서 쓰던 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많은 편이다.
이번 유형같이 조금 복잡한 레이아웃은 flex를 좌 우로 나누어 배치해야 하기때문에 번거로운편이며, 그리드 방식이 더 유리하다
{
*{
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#header {
height: 100px;
background-color: #EEEBE9;
}
#nav {
height: 100px;
background-color: #B9AAA5;
}
#section {
height: 780px;
background-color: #886F65;
}
#footer {
height: 100px;
background-color: #4E342E;
}
.container {
width: 1200px;
background-color: rgba(0, 0, 0, 0.3);
margin: 0 auto;
height: inherit;
}
.contents {
flex-wrap: wrap;
display: flex;
}
.contents .left {
width: 100%;
height: 100px;
}
.contents .left .cont1 {
width: 100%;
height: 100px;
background-color: #74574A;
}
.contents .right {
width: 100%;
height: 680px;
flex-wrap: wrap;
display: flex;
}
.contents .right .cont2 {
width: 100%;
height: 200px;
background-color: #684D43;
}
.contents .right .cont3 {
width: 50%;
height: 480px;
background-color: #594139;
}
.contents .right .cont4 {
width: 50%;
height: 480px;
background-color: #4A352F;
}
@media (max-width: 1220px){
.contents .left {
width: 30%;
height: 780px;
}
.contents .left .cont1 {
width: 100%;
height: 780px;
background-color: #74574A;
}
.contents .right {
width: 70%;
height: 780px;
flex-wrap: wrap;
display: flex;
}
.contents .right .cont2 {
width: 100%;
height: 390px;
background-color: #684D43;
}
.contents .right .cont3 {
width: 50%;
height: 390px;
background-color: #594139;
}
.contents .right .cont4 {
width: 50%;
height: 390px;
background-color: #4A352F;
}
}
@media (max-width: 768px){
.contents .left {
width: 30%;
height: 780px;
}
.contents .left .cont1 {
width: 100%;
height: 780px;
background-color: #74574A;
}
.contents .right {
width: 70%;
height: 780px;
flex-wrap: wrap;
display: flex;
}
.contents .right .cont2 {
width: 100%;
height: 260px;
background-color: #684D43;
}
.contents .right .cont3 {
width: 100%;
height: 260px;
background-color: #594139;
}
.contents .right .cont4 {
width: 100%;
height: 260px;
background-color: #4A352F;
}
}
@media (max-width: 480px){
.contents .left {
width: 100%;
height: 150px;
}
.contents .left .cont1 {
width: 100%;
height: 780px;
background-color: #74574A;
}
.contents .right {
width: 100%;
height: 630px;
flex-wrap: wrap;
display: flex;
}
.contents .right .cont2 {
width: 100%;
height: 210px;
background-color: #684D43;
}
.contents .right .cont3 {
width: 100%;
height: 210px;
background-color: #594139;
}
.contents .right .cont4 {
width: 100%;
height: 210px;
background-color: #4A352F;
}
}
Grid방식 레이아웃
레이아웃을 구현할 때 Flex 방식을 사용하면 간단하게 일을 처리할 수 있지만, 이번 유형같이 조금 복잡한 구조의 레이아웃을 짤때는 그리드방식 레이아웃이 좀 더 유리하다.
그리드 방식의 값들은 부모 요소에서 설정하면 자식요소에 적용된다.
{
* {
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 {
grid-template-areas:
"cont1 cont2 cont2"
"cont1 cont3 cont4";
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
}
@media (max-width: 768px){
.container {
width: 100%;
}
.contents {
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 {
grid-template-areas:
"cont1"
"cont2"
"cont3"
"cont4";
grid-template-columns: 100%;
grid-template-rows: 150px 210px 210px 210px;
}
}
댓글