728x90
레이아웃01
이번 레이아웃은 전체 영역이 들어간 구조이며, 실제 사이트에서 이런 구조를 많이 사용하며,
컨테이너를 만들어서 가운데 영역을 설정합니다.
float을 이용한 레이아웃
float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법 입니다
*{
margin: 0;
}
body{
background-color: #fff3e0;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
background-color: #ffe0b2
}
#nav {
width: 100%;
height: 100px;
background-color: #ffcc80;
}
#aside {
width: 30%;
height: 780px;
background-color: #ffb74d;
float: left;
}
#section {
width: 70%;
height: 780px;
background-color: #ffa726;
float: left;
}
#footer {
width: 100%;
height: 100px;
background-color: #ff9800;
clear: both;
}
@media(max-width:1280px){
#wrap {
width: 96%;
margin: 0 auto;
}
}
@media(max-width:768px){
#wrap {
width: 100%;
}
#aside {
width: 30%;
height: 780px;
float: left;
}
#section {
width: 70%;
height: 780px;
float: left;
}
}
@media(max-width:480px){
#wrap {
width: 100%;
}
#aside {
width: 100%;
height: 300px;
}
#section {
width: 100%;
height: 480px;
}
}
결과 (HTML + CSS)
grid을 이용한 레이아웃
그리드(Grid)란 사전적으론 격자, 바둑판의 눈금을 의미하며 디자인에서는 디자인 영역을 일정하게 구획하는 것을 의미.
*{
margin: 0;
}
#wrap {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-areas:
"header header"
"nav nav"
"aside section"
"footer footer"
;
grid-template-columns: 25% 75%;
grid-template-rows: 100px 100px 780px 100px;
}
body{
background-color: #fff3e0;
}
#header {
grid-area: header;
background-color: #FFE082;
}
#nav {
grid-area: nav;
background-color: #ffcc80;
}
#aside {
grid-area: aside;
background-color: #ffb74d;
float: left;
}
#section {
grid-area: section;
background-color: #ffa726;
float: left;
}
#footer {
grid-area: footer;
background-color: #ff9800;
}
@media(max-width:1280px){ /* 창 최대 크기가 1280px이 되었을때 */
#wrap {
width: 96%;
}
}
@media(max-width:768px){ /* 창 최대 크기가 1280px이 되었을때 */
#wrap {
width: 100%; /* width(넓이) 값을 1280의 96%만 사용합니다. */
grid-template-columns: 22% 78%;
grid-template-rows: 100px 100px 780px 100px;
}
}
@media(max-width:480px){ /* 창 최대 크기가 1280px이 되었을때 */
#wrap {
/* width: 100%; 해석 : 어차피 창 크기가 768에 도달했을때 width:100%가 실행되었으니까 또 쓸 필요가 없다 */
grid-template-areas: /* 이제 한줄이니까 하나씩 */
"header"
"nav"
"aside"
"section"
"footer"
;
grid-template-columns: 100%;
grid-template-rows: 100px 100px 300px 480px 100px;
}
}
결과 (HTML + CSS)
flex을 이용한 레이아웃
flex(플렉스)는 레이아웃 배치 전용 기능으로 고안되었는데 레이아웃을 만들 때 딱히 사용할게 없어서 쓰던 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많다.
* {
margin: 0;
}
body {
background-color: #FFF3E0
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
background-color: #FFE0B2;
}
#nav {
width: 100%;
height: 100px;
background-color: #FFCC80;
}
#main {
display: flex;
}
#aside {
width: 400px;
height: 780px;
background-color: #FFB74D;
}
#section {
width: 800px;
height: 780px;
background-color: #FFA726;
}
#footer {
width: 100%;
height: 100px;
background-color: #FF9800;
@media(max-width:1280px){
#wrap{
width: 96%;
}
}
@media(max-width:768px){
#wrap{
width: 100%;
}
}
@media(max-width:480px){
#wrap{
width: 100%;
}
#main {
flex-direction: column;
}
#aside {
height: 300px;
background-color: #FFB74D;
}
#section {
height: 480px;
background-color: #FFA726;
}
}
결과 (HTML + CSS)
728x90
반응형
'LAYOUT' 카테고리의 다른 글
레이아웃 배치 방법 05 : [float,grid,flex] (4) | 2022.07.31 |
---|---|
레이아웃 배치 방법 04 : [float,grid,flex] (6) | 2022.07.29 |
레이아웃 배치 방법 03 : [float,grid,flex] (4) | 2022.07.29 |
레이아웃 배치 방법 02 : [float,grid,flex] (4) | 2022.07.29 |
댓글