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..7dfd440 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" @@ -6,6 +6,9 @@ .circle-container { background-color: beige; /* 코드 작성 */ + display: flex; + flex-wrap: wrap; + } .circle { border-radius: 50%; @@ -16,4 +19,9 @@ 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..c39eeac 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" @@ -9,6 +9,9 @@ body { display: flex; flex-direction: column; /* 코드 작성 */ + flex-direction: row-reverse; + + } .box { @@ -21,6 +24,8 @@ body { 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..cf4f3cb 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,9 @@ #wrapper { width: 700px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 200px; } .box { padding: 15px; @@ -9,17 +12,36 @@ font-size: 20px; font-weight: bold; text-align: center; + + } .box1 { background-color: #3689ff; + grid-column-start: 1; + grid-column-end: 3; + grid-row-start: 1; + grid-row-end: 2; } .box2 { background-color: #00cf12; + grid-column-start: 1; + grid-column-end: 2; + grid-row-start: 2; + grid-row-end: 3; } .box3 { background-color: #ff9019; + grid-column-start: 3; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 2; + } .box4 { background-color: #ffd000; + grid-column-start: 3; + grid-column-end: 4; + grid-row-start: 2; + grid-row-end: 3; } \ No newline at end of file