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..a358c6d 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" @@ -3,9 +3,13 @@ padding: 0; margin: 0; } -.circle-container { - background-color: beige; - /* 코드 작성 */ + .circle-container { + background-color: beige; + /* 코드 작성 */ + display:grid; + grid-template-columns: 100px 100px 100px ; + grid-template-rows: 100px 100px 100px ; + gap: 120px; } .circle { border-radius: 50%; @@ -16,4 +20,8 @@ font-weight: bold; font-size: 50px; /* 코드 작성 */ + display: flex; + align-items: center; + justify-content: center; + } \ No newline at end of file diff --git "a/1\353\262\210 \352\263\274\354\240\234/1.html" "b/1\353\262\210 \352\263\274\354\240\234/1.html" index 03311d8..4a9ff36 100644 --- "a/1\353\262\210 \352\263\274\354\240\234/1.html" +++ "b/1\353\262\210 \352\263\274\354\240\234/1.html" @@ -8,15 +8,15 @@
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
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..7243ed7 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" @@ -1,3 +1,4 @@ + html, body { height: 100%; @@ -7,11 +8,16 @@ body { .container { height: 100%; display: flex; - flex-direction: column; + /* 코드 작성 */ + + flex-direction : row-reverse; + } .box { + + flex-grow: 1; text-align: center; color: white; font-family: sans-serif; @@ -20,18 +26,22 @@ body { display: flex; justify-content: center; align-items: center; - /* 코드 작성 */ + + } .box-1 { background-color: rgb(248, 223, 227); + } .box-2 { background-color: rgb(247, 194, 202); + } .box-3 { background-color: rgb(246, 142, 158); + } 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..2599e5a 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,8 +2,16 @@ #wrapper { width: 700px; + + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + } .box { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; padding: 15px; color: #fff; font-size: 20px; @@ -13,13 +21,25 @@ .box1 { background-color: #3689ff; + display: grid; + grid-column: 1 / 3; + grid-row: 1 / 2; } .box2 { background-color: #00cf12; + display: grid; + grid-column: 1 / 2; + grid-row: 2 / 4; } .box3 { background-color: #ff9019; + display: grid; + grid-column: 3 / 4; + grid-row: 1 / 2; } .box4 { background-color: #ffd000; + + grid-column: 3 / 4; + grid-row: 2 / 4; } \ No newline at end of file