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..83c832e 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,11 @@ } .circle-container { background-color: beige; - /* 코드 작성 */ + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + place-items: center; + } .circle { border-radius: 50%; @@ -15,5 +19,7 @@ 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..d47e97a 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,8 @@ body { .container { height: 100%; display: flex; - flex-direction: column; - /* 코드 작성 */ + flex-direction: column; + flex-direction: column-reverse; } .box { @@ -20,7 +20,7 @@ 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..a720685 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,24 +2,39 @@ #wrapper { width: 700px; + display: grid; + grid-template-columns: repeat(3,1fr); + grid-template-rows: 2.5fr 5.5fr; + } .box { - padding: 15px; + padding: 30px; color: #fff; font-size: 20px; font-weight: bold; text-align: center; + display: flex; + justify-content: center; + align-items: flex-start; } .box1 { background-color: #3689ff; + grid-column: 1/ span 2; + grid-row: 1; } .box2 { background-color: #00cf12; + grid-column: 1; + grid-row: 2 ; } .box3 { background-color: #ff9019; + grid-column: 3; + grid-row: 1; } .box4 { background-color: #ffd000; + grid-row: 2; + grid-column: 3; } \ No newline at end of file