diff --git "a/1\353\262\210 \352\263\274\354\240\234/1.css" "b/1\353\262\210 \352\263\274\354\240\234/1.css"
index 127ba49..d0b2ed2 100644
--- "a/1\353\262\210 \352\263\274\354\240\234/1.css"
+++ "b/1\353\262\210 \352\263\274\354\240\234/1.css"
@@ -5,7 +5,9 @@
}
.circle-container {
background-color: beige;
- /* 코드 작성 */
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
}
.circle {
border-radius: 50%;
@@ -15,5 +17,8 @@
margin-top: 1vw;
font-weight: bold;
font-size: 50px;
- /* 코드 작성 */
+ align-items: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
\ No newline at end of file
diff --git "a/2\353\262\210 \352\263\274\354\240\234/2.css" "b/2\353\262\210 \352\263\274\354\240\234/2.css"
index ab6d4d0..6121954 100644
--- "a/2\353\262\210 \352\263\274\354\240\234/2.css"
+++ "b/2\353\262\210 \352\263\274\354\240\234/2.css"
@@ -6,9 +6,9 @@ body {
.container {
height: 100%;
+ width: 100%;
display: flex;
- flex-direction: column;
- /* 코드 작성 */
+ flex-direction: row-reverse;
}
.box {
@@ -20,18 +20,20 @@ body {
display: flex;
justify-content: center;
align-items: center;
- /* 코드 작성 */
}
.box-1 {
background-color: rgb(248, 223, 227);
+ flex-grow: 1;
}
.box-2 {
background-color: rgb(247, 194, 202);
+ flex-grow: 2;
}
.box-3 {
background-color: rgb(246, 142, 158);
+ flex-grow: 1;
}
diff --git "a/3\353\262\210 \352\263\274\354\240\234/3.css" "b/3\353\262\210 \352\263\274\354\240\234/3.css"
index e309823..d2be324 100644
--- "a/3\353\262\210 \352\263\274\354\240\234/3.css"
+++ "b/3\353\262\210 \352\263\274\354\240\234/3.css"
@@ -2,7 +2,9 @@
#wrapper {
width: 700px;
- }
+ display: grid;
+ grid-template: 1fr 2fr / 1fr 1fr 1fr;
+}
.box {
padding: 15px;
color: #fff;
@@ -13,13 +15,22 @@
.box1 {
background-color: #3689ff;
+ grid-row: 1 / 2;
+ grid-column: 1 / 3;
}
.box2 {
background-color: #00cf12;
+ grid-row: 2 / 3;
+ grid-column: 1 / 2;
}
.box3 {
background-color: #ff9019;
+ grid-row: 1 / 2;
+ grid-column: 3 / 4;
+
}
.box4 {
background-color: #ffd000;
+ grid-row: 2 / 3;
+ grid-column: 3 / 4;
}
\ No newline at end of file
diff --git "a/3\353\262\210 \352\263\274\354\240\234/3.html" "b/3\353\262\210 \352\263\274\354\240\234/3.html"
index 7768e14..a4acb97 100644
--- "a/3\353\262\210 \352\263\274\354\240\234/3.html"
+++ "b/3\353\262\210 \352\263\274\354\240\234/3.html"
@@ -3,7 +3,7 @@
- 3번 문제제
+ 3번 문제