From 70a4f1f5c159a93432a3afb340fa58d685fab2c2 Mon Sep 17 00:00:00 2001
From: BBoyeon <2boyeon2@gmail.com>
Date: Sat, 29 Mar 2025 23:50:22 +0900
Subject: [PATCH] =?UTF-8?q?3/27=20CSS=20=EA=B3=BC=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
"1\353\262\210 \352\263\274\354\240\234/1.css" | 12 ++++++++----
"2\353\262\210 \352\263\274\354\240\234/2.css" | 6 ++++--
"3\353\262\210 \352\263\274\354\240\234/3.css" | 18 ++++++++++++++++--
.../3.html" | 2 +-
4 files changed, 29 insertions(+), 9 deletions(-)
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..3fb39f8 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"
@@ -4,16 +4,20 @@
margin: 0;
}
.circle-container {
- background-color: beige;
- /* 코드 작성 */
+ background-color: rgb(255, 210, 210);
+ display : flex;
+ flex-wrap : wrap;
+ justify-content : center;
}
.circle {
border-radius: 50%;
- background-color: burlywood;
+ background-color: rgb(255, 96, 189);
width: 30vw;
height: 30vw;
margin-top: 1vw;
font-weight: bold;
font-size: 50px;
- /* 코드 작성 */
+ display : flex;
+ justify-content : center;
+ align-items: 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..d0f7edb 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"
@@ -8,7 +8,8 @@ body {
height: 100%;
display: flex;
flex-direction: column;
- /* 코드 작성 */
+ justify-content: center;
+ flex-direction: row-reverse;
}
.box {
@@ -20,7 +21,8 @@ body {
display: flex;
justify-content: center;
align-items: center;
- /* 코드 작성 */
+ flex-grow : 1;
+
}
.box-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..859dbfe 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,7 +1,12 @@
/* 아래 코드를 수정해주세요!! 수업 때 배운 grid를 최대한 활용해주세요 */
-#wrapper {
- width: 700px;
+#wrapper {
+ display : grid;
+ grid-template-columns : 1fr 1fr 1fr;
+ grid-template-rows : 1fr 2.2fr;
+ width: 100%;
+ height : 400px;
+
}
.box {
padding: 15px;
@@ -9,17 +14,26 @@
font-size: 20px;
font-weight: bold;
text-align: center;
+
}
.box1 {
background-color: #3689ff;
+ grid-column : 1/3;
+ grid-row : 1;
}
.box2 {
background-color: #00cf12;
+ grid-column : 1;
+ grid-row : 2;
}
.box3 {
background-color: #ff9019;
+ grid-column : 3/4;
+ grid-row : 1;
}
.box4 {
background-color: #ffd000;
+ grid-column : 3/4;
+ grid-row : 2;
}
\ 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번 문제