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..5529379 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,16 @@ } .circle-container { background-color: beige; - /* 코드 작성 */ + display: grid; + /* 3x3 정렬을 위한 그리드 레이아웃 */ + grid-template-columns: repeat(3,1fr); + /* 3개 동일 너비 열 */ + justify-items: center; + /* 가로에서 가운데 정렬 */ + align-content: center ; + /* 세로에서 가운데 정렬 */ + + } .circle { border-radius: 50%; @@ -15,5 +24,10 @@ 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..a898dd6 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,11 +7,12 @@ body { .container { height: 100%; display: flex; - flex-direction: column; - /* 코드 작성 */ + flex-direction: row; + } .box { + flex: 1; text-align: center; color: white; font-family: sans-serif; @@ -20,7 +21,7 @@ body { display: flex; justify-content: center; align-items: center; - /* 코드 작성 */ + } .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..62ef848 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,43 @@ -/* 아래 코드를 수정해주세요!! 수업 때 배운 grid를 최대한 활용해주세요 */ - #wrapper { - width: 700px; - } - .box { - padding: 15px; - color: #fff; - font-size: 20px; - font-weight: bold; - text-align: center; - } + width: 720px; + height: 480px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 240px; + gap: 0; +} + +.box { + color: #fff; + font-size: 20px; + font-weight: bold; + text-align: center; + display: flex; + justify-content: center; + align-items: flex-start; + padding-top: 15px; +} + +.box1 { + background-color: #3689ff; + grid-column: 1 / 3; + grid-row: 1 / 2; +} + +.box3 { + background-color: #ff9019; + grid-column: 3 / 4; + grid-row: 1 / 2; +} + +.box2 { + background-color: #00cf12; + grid-column: 1 / 2; + grid-row: 2 / 3; +} - .box1 { - background-color: #3689ff; - } - .box2 { - background-color: #00cf12; - } - .box3 { - background-color: #ff9019; - } - .box4 { - background-color: #ffd000; - } \ No newline at end of file +.box4 { + background-color: #ffd000; + grid-column: 3 / 4; + grid-row: 2 / 3; +}