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..13af6ff 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,9 +5,15 @@ } .circle-container { background-color: beige; - /* 코드 작성 */ + display: grid; + grid-template-columns: repeat(3,33%); + grid-template-rows: repeat(3,33%); + gap:10px; } .circle { + display:flex; + justify-content: center; + align-items: center; border-radius: 50%; background-color: burlywood; width: 30vw; @@ -15,5 +21,4 @@ margin-top: 1vw; font-weight: bold; font-size: 50px; - /* 코드 작성 */ } \ 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..c1ec74b 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..d2192b2 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" @@ -7,8 +7,7 @@ body { .container { height: 100%; display: flex; - flex-direction: column; - /* 코드 작성 */ + flex-direction: row-reverse; } .box { @@ -20,18 +19,20 @@ body { display: flex; justify-content: center; align-items: center; - /* 코드 작성 */ } .box-1 { + flex:1; background-color: rgb(248, 223, 227); } .box-2 { + flex:2; background-color: rgb(247, 194, 202); } .box-3 { + flex:1; 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..46b6c81 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" @@ -1,25 +1,36 @@ /* 아래 코드를 수정해주세요!! 수업 때 배운 grid를 최대한 활용해주세요 */ #wrapper { - width: 700px; - } - .box { - padding: 15px; - color: #fff; - font-size: 20px; - font-weight: bold; - text-align: center; - } + width: 700px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows:100px 300px; +} +.box { + padding: 15px; + color: #fff; + font-size: 20px; + font-weight: bold; + text-align: center; +} - .box1 { - background-color: #3689ff; - } - .box2 { - background-color: #00cf12; - } - .box3 { - background-color: #ff9019; - } - .box4 { - background-color: #ffd000; - } \ No newline at end of file +.box1 { + grid-column: 1/3; + grid-row:1/2; + background-color: #3689ff; +} +.box2 { +grid-column: 1/2; +grid-row:2/3; + background-color: #00cf12; +} +.box3 { + grid-column: 3/4; + grid-row:1/2; + background-color: #ff9019; +} +.box4 { +grid-column: 3/4; +grid-row:2/3; + background-color: #ffd000; +} \ 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..5820db5 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" @@ -10,9 +10,7 @@
box1
box2
-
box3
-
box4