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.
3.1 KiB
3.1 KiB
CSS 리팩토링 과제
목표
테라리움 프로젝트를 Flexbox 또는 CSS Grid를 사용하여 레이아웃을 리팩토링하세요. 현대적이고 반응형 디자인을 구현하기 위해 HTML과 CSS를 업데이트하세요. 드래그 가능한 요소를 구현할 필요는 없습니다—레이아웃과 스타일링에만 집중하세요.
지침
- 테라리움 앱의 새 버전을 만드세요. 레이아웃을 위해 Flexbox 또는 CSS Grid를 사용하도록 마크업과 CSS를 업데이트하세요.
- 원본 버전과 동일하게 아트와 요소가 제자리에 있는지 확인하세요.
- 디자인을 테스트하세요. 최소 두 개의 다른 브라우저(예: Chrome, Firefox, Edge)에서 테스트하세요.
- 각 브라우저에서 테라리움의 스크린샷을 찍어 크로스 브라우저 호환성을 증명하세요.
- 업데이트된 코드와 스크린샷을 제출하세요.
평가 기준
| 기준 | 우수함 | 적절함 | 개선 필요 |
|---|---|---|---|
| 레이아웃 | Flexbox 또는 CSS Grid를 완전히 사용하여 리팩토링됨; 시각적으로 매력적이고 반응형 | 일부 요소 리팩토링; Flexbox 또는 Grid 부분적 사용 | Flexbox 또는 Grid 거의 사용하지 않음; 레이아웃 변경 없음 |
| 크로스 브라우저 | 여러 브라우저에서 스크린샷 제공; 일관된 외관 | 한 브라우저에서 스크린샷 제공; 약간의 불일치 | 스크린샷 없음 또는 주요 불일치 |
| 코드 품질 | 깔끔하고 잘 정리된 HTML/CSS; 명확한 주석 포함 | 일부 정리됨; 주석 거의 없음 | 정리되지 않은 코드; 주석 부족 |
팁
면책 조항:
이 문서는 AI 번역 서비스 Co-op Translator를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서의 원어 버전을 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.