<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T09:07:20+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "ko"
}
-->
# CSS 리팩토링 과제

## 목표

테라리움 프로젝트를 **Flexbox** 또는 **CSS Grid**를 사용하여 레이아웃을 리팩토링하세요. 현대적이고 반응형 디자인을 구현하기 위해 HTML과 CSS를 업데이트하세요. 드래그 가능한 요소를 구현할 필요는 없습니다—레이아웃과 스타일링에만 집중하세요.

## 지침

1. **테라리움 앱의 새 버전**을 만드세요. 레이아웃을 위해 Flexbox 또는 CSS Grid를 사용하도록 마크업과 CSS를 업데이트하세요.
2. **원본 버전과 동일하게** 아트와 요소가 제자리에 있는지 확인하세요.
3. **디자인을 테스트**하세요. 최소 두 개의 다른 브라우저(예: Chrome, Firefox, Edge)에서 테스트하세요.
4. **각 브라우저에서 테라리움의 스크린샷을 찍어** 크로스 브라우저 호환성을 증명하세요.
5. **업데이트된 코드와 스크린샷을 제출**하세요.

## 평가 기준

| 기준       | 우수함                                                                 | 적절함                              | 개선 필요                              |
|------------|-----------------------------------------------------------------------|-------------------------------------|----------------------------------------|
| 레이아웃   | Flexbox 또는 CSS Grid를 완전히 사용하여 리팩토링됨; 시각적으로 매력적이고 반응형 | 일부 요소 리팩토링; Flexbox 또는 Grid 부분적 사용 | Flexbox 또는 Grid 거의 사용하지 않음; 레이아웃 변경 없음 |
| 크로스 브라우저 | 여러 브라우저에서 스크린샷 제공; 일관된 외관                     | 한 브라우저에서 스크린샷 제공; 약간의 불일치 | 스크린샷 없음 또는 주요 불일치         |
| 코드 품질   | 깔끔하고 잘 정리된 HTML/CSS; 명확한 주석 포함                        | 일부 정리됨; 주석 거의 없음          | 정리되지 않은 코드; 주석 부족          |

## 팁

- [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)와 [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) 가이드를 검토하세요.
- 브라우저 개발자 도구를 사용하여 반응형 디자인을 테스트하세요.
- 코드의 명확성을 위해 주석을 추가하세요.

---

**면책 조항**:  
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서의 원어 버전을 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.