Study/Etc
포트폴리오 사이트 만들기 프로젝트 - float, flex, grid 레이아웃 유형별 연습3
posey
2023. 5. 5. 14:24
- 포트폴리오 사이트 만들기 프로젝트 - float, flex, grid 레이아웃 유형별 연습3
Review
- 포트폴리오 사이트 만들기 프로젝트 - float, flex, grid 레이아웃 유형별 연습3
1. layout03_01 - float 방식 레이아웃
- HTML
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main" class="clearfix">
<div id="aside"></div>
<div id="article1"></div>
<div id="article2"></div>
<div id="article3"></div>
</div>
<div id="footer"></div>
</div>
- CSS
* {
margin: 0;
padding: 0;
}
body {
background-color: #e1f5fe;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
height: 100px;
background-color: #b3e5fc;
}
#nav {
height: 100px;
background-color: #81d4fa;
}
#main {
width: 1200px;
}
#aside {
float: left;
width: 300px;
height: 780px;
background-color: #4fc3f7;
}
#article1 {
float: left;
width: 900px;
height: 260px;
background-color: #29b6f6;
}
#article2 {
float: left;
width: 900px;
height: 260px;
background-color: #03a9e4;
}
#article3 {
float: left;
width: 900px;
height: 260px;
background-color: #039be5;
}
#footer {
height: 100px;
background-color: #0288d1;
}
/* clearfix */
.clearfix::before, .clearfix::after {
content: '';
display: block;
line-height: 0;
}
.clearfix::after {
clear: both;
}
여기서 float: left;를 적용하면 footer의 height 값이 사라지는데, 이번에는 이를 방지하기 위해 clearfix
방식을 활용했다. CSS에 clearfix class를 만들고 나서 HTML에 적용시키면 된다.
2. layout03_02 - float 방식 반응형 레이아웃
- HTML
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main" class="clearfix">
<div id="aside"></div>
<div id="article1"></div>
<div id="article2"></div>
<div id="article3"></div>
</div>
<div id="footer"></div>
</div>
- CSS
* {
margin: 0;
padding: 0;
}
body {
background-color: #e1f5fe;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
height: 100px;
background-color: #b3e5fc;
}
#nav {
height: 100px;
background-color: #81d4fa;
}
#main {
}
#aside {
float: left;
width: 30%;
height: 780px;
background-color: #4fc3f7;
}
#article1 {
float: left;
width: 70%;
height: 260px;
background-color: #29b6f6;
}
#article2 {
float: left;
width: 70%;
height: 260px;
background-color: #03a9e4;
}
#article3 {
float: left;
width: 70%;
height: 260px;
background-color: #039be5;
}
#footer {
height: 100px;
background-color: #0288d1;
}
/* clearfix */
.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;
}
}
3. layout03_03 - flex 방식 레이아웃
- HTML
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<main id="main">
<aside id="aside"></aside>
<div id="article1"></div>
<div id="article2"></div>
<div id="article3"></div>
</main>
<footer id="footer"></footer>
</div>
flex 방식부터는 시멘틱 태그로 변경했다. article 태그는 123으로 나누어야 해서 그대로 div 태그를
이용했다.
- CSS
* {
margin: 0;
padding: 0;
}
body {
background-color: #e1f5fe;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#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 {
width: 70%;
height: 260px;
background-color: #03a9e4;
}
#article3 {
width: 70%;
height: 260px;
background-color: #039be5;
}
#footer {
height: 100px;
background-color: #0288d1;
}
사실 flex로 변경하려면 main 자체에서 left와 right로 나누어 각각의 박스를 만드는 것이 낫지만 여기서는
flex-direction: column;을 적용해서 변경했다.
4. layout03_04 - flex 방식 반응형 레이아웃
- HTML
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<main id="main">
<aside id="aside"></aside>
<div id="article1"></div>
<div id="article2">
<div id="article2-1"></div>
<div id="article2-2"></div>
</div>
</main>
<footer id="footer"></footer>
</div>
flex 반응형을 만들려니 이제 문제가 발생해서 결국 left, right로 나누어 레이아웃을 다시 짰다.
- CSS
* {
margin: 0;
padding: 0;
}
body {
background-color: #e1f5fe;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#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;
}
#article2-2 {
width: 50%;
height: 520px;
}
}
@media (max-width: 768px) {
#wrap {
width: 100%;
}
#article1 {
height: 390px;
}
#article2-1 {
width: 100%;
height: 390px;
}
#article2-2 {
display: none;
}
}
@media (max-width: 480px) {
#aside {
width: 100%;
height: 200px;
}
#article1 {
width: 100%;
height: 430px;
}
#article2-1 {
height: 150px;
}
}
5. layout03_05 - grid 방식 레이아웃
- HTML
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<main id="main">
<aside id="aside"></aside>
<div id="article1"></div>
<div id="article2"></div>
<div id="article3"></div>
</main>
<footer id="footer"></footer>
</div>
flex 방식으로 인해 코드가 지저분해져서 HTML은 원래 것으로 다시 되돌렸다.
- CSS
* {
margin: 0;
padding: 0;
}
body {
background-color: #e1f5fe;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#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: 300px 900px; /* 각 칼럼의 너비를 얼마로 할지 지정 */
grid-template-rows: 260px 260px 260px; /* 그리드 안의 줄 간격, 높이 지정 */
}
#aside {
grid-area: aside;
background-color: #4fc3f7;
}
#article1 {
grid-area: article1;
background-color: #29b6f6;
}
#article2 {
grid-area: article2;
background-color: #03a9f4;
}
#article3 {
grid-area: article3;
background-color: #039be5;
}
#footer {
height: 100px;
background-color: #0288d1;
}
아직도 grid가 헷갈린다. 정말 간단한 것인데 영어 단어 외우듯이 가로, 세로, 너비가 헷갈린다. 호에엥
6. layout03_06 - grid 방식 반응형 레이아웃
- HTML
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<main id="main">
<aside id="aside"></aside>
<div id="article1"></div>
<div id="article2"></div>
<div id="article3"></div>
</main>
<footer id="footer"></footer>
</div>
- CSS
* {
margin: 0;
padding: 0;
}
body {
background-color: #e1f5fe;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#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 {
grid-area: aside;
background-color: #4fc3f7;
}
#article1 {
grid-area: article1;
background-color: #29b6f6;
}
#article2 {
grid-area: article2;
background-color: #03a9f4;
}
#article3 {
grid-area: article3;
background-color: #039be5;
}
#footer {
height: 100px;
background-color: #0288d1;
}
/* 미디어쿼리 */
@media (max-width: 1300px) {
#wrap {
width: 96%;
}
#main {
grid-template-areas:
"aside article1 article1"
"aside article2 article3";
grid-template-columns: 30% 35% 35%;
grid-template-rows: 260px 520px;
}
}
@media (max-width: 768px) {
#wrap {
width: 100%;
}
#main {
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 {
grid-template-areas:
"aside"
"article1"
"article2";
grid-template-columns: 100%;
grid-template-rows: 200px 430px 150px;
}
}
grid 방식이 반응형으로 만들 때 정말 재밌다. 인테리어 하듯이 공간 활용을 해야해서 그런지 흥미롭다.
반응형