레이아웃03
이전 유형보다 조금 복잡해졌지만 여전히 단순한 구조입니다.
Float방식 레이아웃
float 방식 레이아웃은 구버전 익스플로어 등과의 호환을 위해 사용한다.
float는 속성이 상속되어 float 속성을 사용한 요소의 다음 요소에게 영향을 미치며,
이전 요소를 밀고 올라오게 되는데 clear: both로 해결 가능하지만, 복잡한 구조의 경우 한계가 있기 때문에
더 나은 방법으로 부모 요소에 overflow :hidden을 주는 방법이 있다.
그러나 overflow도 한계가 있는데 이를 위해 나온 방법이 clearfix값을 클래스로 지정하여 뿌려주는것이다. 귀찮다는 점을 빼면 딱히 단점이 없기때문에 많이 쓰이고 있다.
{
*{
margin: 0;
padding: 0;
}
#wrap{
width: 1200px;
margin: 0 auto;
}
/* 100%는 생략가능 */
#header{
height: 100px;
background-color: #b3e5fC;
}
#nav{
height: 100px;
background-color: #81D4FA;
}
#main{
}
#aside{
width: 30%;
height: 780px;
background-color: #4FC3F7;
float : left;
}
#article1{
width: 70%;
height: 260px;
background-color: #29B6F6;
float : left;
}
#article2{
width: 70%;
height: 260px;
background-color: #03A9F4;
float : left;
}
#article3{
width: 70%;
height: 260px;
background-color: #039BE5;
float : left;
}
#footer{
height: 100px;
background-color: #0288D1;
}
.clearfix::before,
.clearfix::after{
content: '';
display: block;
line-height: 0;
}
.clearfix::after{
clear:both;
}
/* 미디어 쿼리 */
@media(max-width: 1300px){
#wrap{
width: 96%;
}
#article2{
width: 35%;
height: 520px;
}
#article3{
width: 35%;
height: 520px;
}
}
@media(max-width: 768px){
#wrap{
width: 100%;
}
#article1{
width: 70%;
height: 390px;
}
#article2{
width: 70%;
height: 390px;
}
#article3{
display: none;
}
}
@media(max-width: 480px){
#aside{
width: 100%;
height: 200px;
}
#article1{
width: 100%;
height: 430px;
}
#article2{
width: 100%;
height: 150px;
}
#article3{
display: none;
}
}
Flex방식 레이아웃
Flex 방식 레이아웃은 Flex는 레이아웃 배치 전용 기능으로 고안 되었다.
그래서 레이아웃을 만들 때 딱히 사용할게 없어서 쓰던 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많은 편이다.
{
*{
margin: 0;
padding: 0;
}
#wrap{
width: 1200px;
margin: 0 auto;
}
/* 100%는 생략가능 */
#header{
height: 100px;
background-color: #b3e5fC;
}
#nav{
height: 100px;
background-color: #81D4FA;
}
#main{
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 780px;
}
#aside{
width: 30%;
height: 780px;
background-color: #4FC3F7;
}
#article1{
width: 70%;
height: 260px;
background-color: #29B6F6;
}
#article2-1{
width: 100%;
height: 260px;
background-color: #03A9F4;
}
#article2-2{
width: 100%;
height: 260px;
background-color: #039BE5;
}
#footer{
height: 100px;
background-color: #0288D1;
}
/* 미디어 쿼리 */
@media(max-width: 1300px){
#wrap{width: 96%;
}
#article2{
display: flex;
}
#article2-1{
width: 50%;
height: 520px;
background-color: #03A9F4;
}
#article2-2{
width: 50%;
height: 520px;
background-color: #039BE5;
}
}
@media(max-width: 768px){
#wrap{width: 100%;
}
#aside{
width: 30%;
height: 780px;
}
#article1{
width: 70%;
height: 390px;
}
#article2{
display: flex;
}
#article2-1{
width: 100%;
height: 390px;
background-color: #03A9F4;
}
#article2-2{
display: none;
}
}
@media(max-width: 480px){
#aside{
width: 100%;
height: 200px;
}
#article1{
width: 100%;
height: 430px;
}
#article2{
display: flex;
}
#article2-1{
width: 100%;
height: 150px;
}
}
Grid방식 레이아웃
레이아웃을 구현할 때 Flex 방식을 사용하면 간단하게 일을 처리할 수 있지만, 복잡한 구조의 레이아웃을 짤때는 그리드방식 레이아웃이 좀 더 유리하다.
그리드 방식의 값들은 부모 요소에서 설정하면 자식요소에 적용된다.
{
*{
margin: 0;
padding: 0;
}
#wrap{
width: 1200px;
margin: 0 auto;
}
/* 100%는 생략가능 */
#header{
height: 100px;
background-color: #b3e5fC;
}
#nav{
height: 100px;
background-color: #81D4FA;
}
#main{
display:grid;
grid-template-areas:
"aside article1 article1 "
"aside article2 article2 "
"aside article3 article3";
grid-template-columns: 30% 70%;
grid-template-rows:260px 260px 260px;
}
#aside{
background-color: #4FC3F7;
grid-area: aside;
}
#article1{
background-color: #29B6F6;
grid-area: article1;
}
#article2{
background-color: #03A9F4;
grid-area: article2;
}
#article3{
background-color: #039BE5;
grid-area: article3;
}
#footer{
height: 100px;
background-color: #0288D1;
}
/* 미디어 쿼리 */
@media(max-width: 1300px){
#wrap{
width: 96%;
}
#main{
display:grid;
grid-template-areas:
"aside article1 article1 "
"aside article2 article3 "
"aside article2 article3 "
;
grid-template-columns: 30% 35% 35%;
grid-template-rows: 260px 520px;
}
}
@media(max-width: 768px){
#wrap{
width: 100%;
}
#main{
display:grid;
grid-template-areas:
"aside article1"
"aside article2"
;
grid-template-columns: 30% 70%;
grid-template-rows: 390px 390px;
}
#article3{
display: none;
}
}
@media(max-width: 480px){
#main{
display:grid;
grid-template-areas:
"aside "
"article1 "
"article2"
;
grid-template-columns: 100%;
grid-template-rows: 200px 430px 150px;
}
}
댓글