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..2627fab 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,10 @@ } .circle-container { background-color: beige; - /* 코드 작성 */ + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 20px; + padding: 20px; } .circle { border-radius: 50%; @@ -15,5 +18,16 @@ margin-top: 1vw; font-weight: bold; font-size: 50px; - /* 코드 작성 */ -} \ No newline at end of file + + display: flex; + justify-content: center; + align-items: center; +} +.circle:nth-child(1) {background-color: green;} +.circle:nth-child(2) {background-color: palegreen;} +.circle:nth-child(3) {background-color: chartreuse;} +.circle:nth-child(7) {background-color: violet;} +.circle:nth-child(8) {background-color: fuchsia;} +.circle:nth-child(9) {background-color: deeppink;} + + 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..d80ddee 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,13 +7,16 @@ body { .container { height: 100%; display: flex; - flex-direction: column; - /* 코드 작성 */ + flex-direction: row; + height: 100%; + display: flex; + flex-direction: row; } .box { + flex-grow: 1; text-align: center; - color: white; + color: black; font-family: sans-serif; font-size: 36px; padding: 20px; 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..dec9368 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,6 +2,10 @@ #wrapper { width: 700px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: repeat(6, 1fr); + gap: 0px; } .box { padding: 15px; @@ -13,13 +17,21 @@ .box1 { background-color: #3689ff; + grid-column: 1 / 3; + grid-row: 1 / 3; } .box2 { background-color: #00cf12; + grid-column: 1; + grid-row: 3 / span 3; } .box3 { background-color: #ff9019; + grid-column: 3; + grid-row: 1 / 3; } .box4 { background-color: #ffd000; + grid-column: 3; + grid-row: 3 / span 3; } \ No newline at end of file