레이아웃05
이번 레이아웃은 화면 크기가 줄어들때 영역 한칸이 보이지 않게 되는 구조입니다.
float을 이용한 레이아웃
float 속성은 특히 국내 실무 내에서 레이아웃 설계하는 과정에서 많이 사용하는 속성입니다.
복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성입니다.
다시 말해, float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법입니다.
여기서 '부유하다' 라는 의미는 요소가 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말합니다.
이 플로팅 모델을 이용하면 문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있습니다.
<style>
* {
margin: 0;
}
#wrap {
width: 100%;
}
#header {
width: 100%;
height: 100px;
background-color: #EEEBE9;
}
#banner {
width: 100%;
height: 100px;
background-color: #B9AAA5;
}
#section {
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(255,255,255,0.3);
overflow: hidden;
}
.container .header{
height: inherit;
background-color: #D5CCC9;
}
.container .banner{
height: inherit;
background-color: #9D8980;
}
.container .footer{
height: inherit;
background-color: #3E2723;
}
.container .cont1{
height: 100px;
background-color: #74574A;
}
.container .cont2{
height: 200px;
background-color: #684D43;
}
.container .cont3{
width: 50%;
height: 480px;
float: left;
background-color: #594139;
}
.container .cont4{
width: 50%;
height: 480px;
float: left;
background-color: #4A352F;
}
/* float으로 인한 영역깨짐 방지법
1. 깨지는 영역에 clear:both를 설정한다.
2. 부모 박스 영역에 overflow : hidden을 설정한다.
3. clearfix를 설정한다.
*/
.clearfix::before,
.clearfix::after{
content : '';
line-height: 0;
}
.clearfix::after{
clear: both;
}
@media(max-width : 1220px){
.container{
width: 96%;
overflow: hidden;
}
.container .cont1{
width: 30%;
height: 780px;
float: left;
}
.container .cont2{
width: 70%;
height: 390px;
float: left;
}
.container .cont3{
width: 35%;
height: 390px;
float: left;
}
.container .cont4{
width: 35%;
height: 390px;
float: left;
}
}
@media(max-width : 768px){
.container{
width: 100%;
}
.contents .cont1{
width: 40%;
height: 780px;
background-color: #74574A;
float: left;
}
.contents .cont2{
width: 60%;
height: 33.33%;
background-color: #684D43;
}
.contents .cont3{
width: 60%;
height: 33.33%;
background-color: #594139;
}
.contents .cont4{
width: 60%;
height: 33.33%;
background-color: #4A352F;
}
}
@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;
}
}
<style>
결과
flex를 이용한 레이아웃
Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이다.
요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다.
복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있다.
이해를 돕기 위해 간단한 flexbox 레이아웃을 만들어 보자.
<style>
* {
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 {}
.contents .left {}
.contents .left .cont1 {
width: 100%;
height: 100px;
background-color: #74574A;
}
.contents .right {
display: flex;
flex-wrap: wrap;
}
.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) {
.container {
width: 96%;
display: flex;
}
.contents .left {
width: 30%;
}
.contents .left .cont1 {
width: 100%;
height: 780px;
}
.contents .right {
width: 70%;
}
.contents .right .cont2 {
width: 100%;
height: 390px;
}
.contents .right .cont3 {
width: 50%;
height: 390px;
}
.contents .right .cont4 {
width: 50%;
height: 390px;
}
}
@media (max-width: 768px) {
.container {
width: 100%;
}
.contents .right .cont2 {
width: 100%;
height: 260px;
}
.contents .right .cont3 {
width: 100%;
height: 260px;
}
.contents .right .cont4 {
width: 100%;
height: 260px;
}
}
@media (max-width: 480px) {
.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{
grid-template: 210px;
}
.contents{
display: flex;
flex-wrap: wrap;
}
}
</style>
결과
Flexbox의 장점을 정리해 보면 아래와 같다.
1줄의 코드 추가로 수평 정렬이 가능하다.
요소의 상하좌우 정렬, 순서 변경 간격 조절이 간단하다.
서로 다른 height를 갖는 요소의 수평정렬 시, 간단히 상하중앙 정렬이 가능하다.
비교적 최신 브라우저가 아니면 벤더 프리픽스를 사용하여야 하고 IE계열은 IE8,9의 경우 지원하지 않고 IE10,11의 경우도 일부 지원하므로 주의가 필요하다.
IE계열에서 Flexbox를 사용하기 위해서는 flexibility.js를 사용하면 편리하다.
grid 이용한 레이아웃
CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는
데 아주 탁월합니다.
테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다.
하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다.
예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다.
그리드 레이아웃을 구성 시에는 반드시 .row(행)를 먼저 배치하고 행 안에 .col(열)을 필요한 갯수만큼 배치한다.
즉, container 내에 .row(행)을 먼저 배치하고 그 안에 .col(열)을 배치한다.
그리고 콘텐츠는 .col(열)내에 배치한다.
<style>
* {
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;
margin: 0 auto;
height: inherit;
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;
}
}
</style>