Task 1
첫 문제는 간단한 그리드 모양 만드는 문제였다.
grid1-download.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Grid: task 1</title>
<link rel="stylesheet" href="../styles.css" />
<style>
body {
background-color: #fff;
color: #333;
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
.grid > * {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: #fff;
padding: 0.5em;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
</style>
</head>
<body>
<div class="grid">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<!-- 여기서부터 임의로 추가한 박스입니다. -->
<div>Five</div>
<div>Six</div>
<div>Seven</div>
</div>
</body>
</html>결과
Task 2
그리드 격자 문제였다. row와 column만 잘알아도 해결할 수 있는 문제였다. 아래의 그림에서 볼 수 있듯이 이번 문제 불때는 약어를 사용해서 풀었다. grid-row-start, grid-row-end, grid-column-start, grid-column-end가 아닌 grid-area 요소를 활용하면서 한 줄에 넣었다.
grid2-download.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Grid: task 2</title>
<link rel="stylesheet" href="../styles.css" />
<style>
body {
background-color: #fff;
color: #333;
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
.grid > * {
border-radius: 0.5em;
color: #fff;
padding: 0.5em;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px;
gap: 10px;
}
.item1 {
grid-area: 1 / 1 / 3 / 4;
background-color: rgb(74 102 112 / 70%);
border: 5px solid rgb(74 102 112 / 100%);
}
.item2 {
grid-area: 2 / 2 / 4 / 5;
background-color: rgb(214 162 173 / 70%);
border: 5px solid rgb(214 162 173 / 100%);
}
</style>
</head>
<body>
<div class="grid">
<div class="item1">One</div>
<div class="item2">Two</div>
</div>
</body>
</html>
결과
Task 3
그저 grid-template-areas와 grid-area를 활용하는 문제였다. 보이는 그대로 2차원 배열 활용하면 되고 그리고 보이는 그대로 grid-area를 지정하면 되는 문제였다.
grid3-download.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Grid: task 3</title>
<link rel="stylesheet" href="../styles.css" />
<style>
body {
background-color: #fff;
color: #333;
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
.grid > * {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: #fff;
padding: 0.5em;
}
.grid {
display: grid;
grid-template-areas:
"one one one one"
"two three three three"
". four four four";
gap: 10px;
}
.one {
grid-area: one;
}
.two {
grid-area: two;
}
.three {
grid-area: three;
}
.four {
grid-area: four;
}
</style>
</head>
<body>
<div class="grid">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
</body>
</html>
결과
Task 4
이 문제는 풍선 사진들이 없어서 따로 적어 놓을게요! html 문서는 안 바꿔서 css만 올립니다.
이번 문제는 그리드와 flex-box 두 개의 레이아웃을 활용하는 문제였다. 처음 그리드는 gap만 잘 지키고 기본 틀만 잘 만들어 주면 되었고 flex 박스는 안에 정렬과 사진보다 버튼이 나오지 않도록 하는 flex-wrap 요소를 활용하였다. 이는 아래와 같다.
css
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50% 50%;
gap: 10px;
}
.tags {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
}
결과
목차 템플릿을 만들어 봤는데 tistory 내의 코드가 강렬하네요! 다음엔 좀 더 나아진 목차를 만들어 볼게요.
오류 있으면 댓글 달아주세요. 감사합니다!
728x90
'Computer > HTML, CSS, Javascript' 카테고리의 다른 글
| [CSS] 과제: 레이아웃 (2) | 2024.10.24 |
|---|---|
| [CSS] 과제: 미디어 쿼리 (4) | 2024.10.23 |
| [CSS] 과제: 커뮤니티 대학 홈페이지 레이아웃 (0) | 2024.10.21 |
| [CSS] 과제: 멋지게 보이는 박스 (0) | 2024.10.21 |
| [CSS] 과제: 멋진 편지지 양식 만들기 (2) | 2024.10.19 |
