7.4 KiB

Raw Permalink Blame History

CSS 리팩토링 과제

목표

테라리움 프로젝트를 현대적인 CSS 레이아웃 기법을 사용하도록 변환하세요! 현재 절대 위치 지정 방식을 리팩토링하여 유지보수가 쉽고 반응형 디자인을 구현하기 위해 Flexbox 또는 CSS Grid를 사용하세요. 이 과제는 테라리움의 시각적 매력을 유지하면서 최신 CSS 표준을 적용하는 도전을 제공합니다.

언제 어떤 레이아웃 방식을 사용하는지 이해하는 것은 현대 웹 개발에 있어 중요한 기술입니다. 이 연습은 전통적인 위치 지정 기법과 현대적인 CSS 레이아웃 시스템 사이를 연결합니다.

과제 지침

1단계: 분석 및 계획

현재 테라리움 코드를 검토하세요 - 절대 위치 지정을 사용 중인 요소를 식별합니다.
레이아웃 방식을 선택하세요 - Flexbox 또는 CSS Grid 중 디자인 목표에 더 적합한 방식을 결정합니다.
새로운 레이아웃 구조를 스케치하세요 - 컨테이너와 식물 요소들이 어떻게 구성될지 계획합니다.

2단계: 구현

테라리움 프로젝트의 새 버전을 별도의 폴더에 만드세요.
선택한 레이아웃 방식을 지원하도록 HTML 구조를 필요에 따라 업데이트하세요.
절대 위치 지정 대신 Flexbox 또는 CSS Grid를 사용하도록 CSS를 리팩토링하세요.
시각적 일관성 유지 - 식물과 테라리움 병이 동일한 위치에 나타나도록 합니다.
반응형 동작 구현 - 다양한 화면 크기에 부드럽게 적응하는 레이아웃이어야 합니다.

3단계: 테스트 및 문서화

크로스 브라우저 테스트 - Chrome, Firefox, Edge, Safari에서 디자인이 잘 작동하는지 확인하세요.
반응형 테스트 - 모바일, 태블릿, 데스크톱 화면 크기에서 레이아웃을 점검하세요.
문서화 - CSS에 레이아웃 선택 이유를 주석으로 추가하세요.
스크린샷 - 다양한 브라우저와 화면 크기에서 테라리움을 캡처하세요.

기술 요구사항

레이아웃 구현

하나 선택: Flexbox 또는 CSS Grid 중 하나를 구현하세요 (같은 요소에는 동시에 사용하지 않습니다).
반응형 디자인: 고정 픽셀 대신 상대 단위(rem, em, %, vw, vh)를 사용하세요.
접근성: 적절한 시맨틱 HTML 구조와 alt 텍스트를 유지하세요.
코드 품질: 일관된 명명 규칙을 사용하고 CSS를 논리적으로 구성하세요.

포함할 최신 CSS 기능

/* Example Flexbox approach */
.terrarium-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.plant-containers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
}

/* Example Grid approach */
.terrarium-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  gap: 1rem;
}

브라우저 지원 요구사항

Chrome/Edge: 최신 2버전
Firefox: 최신 2버전
Safari: 최신 2버전
모바일 브라우저: iOS Safari, Chrome Mobile

제출물

개선된 시맨틱 구조의 업데이트된 HTML 파일
현대 레이아웃 기법을 사용한 리팩토링된 CSS 파일
크로스 브라우저 호환성을 보여주는 스크린샷 모음:
- 데스크톱 뷰 (1920x1080)
- 태블릿 뷰 (768x1024)
- 모바일 뷰 (375x667)
- 최소 2가지 다른 브라우저
README.md 파일에 다음 내용 문서화:
- 선택한 레이아웃(Flexbox vs Grid) 및 이유
- 리팩토링 중 마주친 어려움
- 브라우저 호환성 관련 참고사항
- 코드 실행 방법 안내

평가 기준표

기준	우수 (4)	적절 (3)	개발 중 (2)	시작 (1)
레이아웃 구현	고급 기능을 포함한 Flexbox/Grid 완벽 사용; 완전 반응형	올바른 구현 및 우수한 반응형 동작	기본 구현, 경미한 반응형 문제	미완성 또는 잘못된 레이아웃 구현
코드 품질	깔끔하고 잘 조직된 CSS, 의미 있는 주석 및 일관된 명명	좋은 조직화, 일부 주석 포함	적절한 조직, 최소한의 주석	조직이 미흡하고 이해하기 어려움
크로스 브라우저 호환성	모든 필수 브라우저 간 완벽한 일관성, 스크린샷 포함	호환성 양호, 경미한 차이 문서화	일부 호환성 문제 있으나 기능에는 영향 없음	심각한 호환성 문제 또는 테스트 누락
반응형 디자인	뛰어난 모바일 우선 접근, 부드러운 브레이크포인트	우수한 반응형 동작, 적절한 브레이크포인트	기본 반응형 기능에 일부 레이아웃 문제	제한적이거나 깨진 반응형 동작
문서화	상세한 설명과 인사이트가 담긴 포괄적 README	모든 필수 요소를 포함한 좋은 문서화	최소한의 설명을 담은 기본 문서화	불완전하거나 문서화 누락

유용한 자료

레이아웃 방법 가이드

브라우저 테스트 도구

코드 품질 도구

추가 도전 과제

🌟 고급 레이아웃: 디자인의 다른 부분에 Flexbox와 Grid 둘 다 구현
🌟 애니메이션 통합: 새 레이아웃과 함께 작동하는 CSS 전환 또는 애니메이션 추가
🌟 다크 모드: CSS 커스텀 프로퍼티 기반 테마 스위처 구현
🌟 컨테이너 쿼리: 컴포넌트 수준 반응형을 위한 최신 컨테이너 쿼리 기법 사용

💡 기억하세요: 단순히 작동하는 것이 목표가 아니라, 선택한 레이아웃 방식이 왜 이 특정 디자인 과제에 최선의 해결책인지 이해하는 것이 중요합니다!

면책 조항:
이 문서는 AI 번역 서비스 Co-op Translator를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 있을 수 있음을 유의해 주시기 바랍니다. 원문은 해당 문서의 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우 전문적인 인간 번역을 권장합니다. 본 번역 사용으로 인해 발생하는 어떠한 오해나 잘못된 해석에 대해서도 당사는 책임을 지지 않습니다.

7.4 KiB Raw Permalink Blame History