[LAB-11] 타이틀 컴포넌트 쏠림 현상 (CSS 레이아웃 이슈)

[kyuran6]

질문 작성자

김진희

문제 상황

• 컴포넌트를 불러와서 메인 페이지 배치를 하고 있는 상황입니다 경로: src/pages/Home/Homepage

• CategoryTitle 컴포넌트가 뒤로 쏠려보이는 현상이 있습니다. 경로 : src/components/CategoryTitle

• 100%로 볼때도 배치가 이상하고

• 축소시에도 저렇게 뒤로 빠져서 붙어있습니다.
• 카테고리 컴포넌트를 재사용한 RecentImageTitle도 동일합니다.
• 계속 수정을 해봤지만 해결이 되지않아 질문합니다.

프로젝트 저장소 URL

• 공개된 GitHub 프로젝트 저장소 URL을 여기에 남깁니다.
• feature/main-MainSwiper
• 트러블 슈팅을 위해 node_modules 폴더를 제외한 나머지를 압축해 이 곳에 첨부하세요. Asparagus 2.zip

환경 정보

• macOS
• Node.js v19.7.0
• 라이브러리 정보 (예: React v18.0.2)

[yamoo9]

CSS 레이아웃 이슈

CategoryTitle 컴포넌트 요소가 한쪽으로 쏠린 이유는 너비를 100vw로 설정했기 때문입니다. 외부 컨테이너도 아니고 내부에 포함된 요소가 뷰포트 너비(viewport width)를 모두 사용하는 경우는 적절한 스타일이 아닙니다.

Category 컴포넌트 요소에 왼쪽 마진 값을 고정 값으로 설정한 것 또한 적절한 레이아웃(배치)가 아닙니다.

각 컴포넌트 내부에 포함된 스타일이 문제 원인입니다.

문제 해결

CSS 레이아웃에 대한 이해와 활용 능력을 키워야 합니다. 😥 그리고 구현해야 할 디자인 시안을 함께 제공해야 디자인 분석 후 레이아웃 방법에 대해 제시할 수 있습니다. 슬비쌤(@seulbinim)과 함께 공부 했던 이전 학습 자료를 다시 살펴보시길 바랍니다. 😊

[kyuran6]

자세한 답변 정말 감사합니다!! 🥺👍