You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
3.1 KiB
41 lines
3.1 KiB
<!--
|
|
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)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서의 원어 버전을 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다. |