인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

우선 질문 가이드라인에 작성해 둔 것 처럼, 전체 코드를 확인하지 않고는 정확한 문제 원인 식별이 어렵다는 점을 말씀드립니다.

캡쳐해주신 부분 만으로는 별 문제가 없어보입니다. 아마 다른 곳에 문제가 발생해 있을 거에요 이에 실습 코드와의 차이점을 직접 비교해보시면서 문제를 찾아보시는게 어떨까 제안드립니다. 아래는 12.13 챕터의 완성 코드입니다.

https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter13

만약 다른 챕터의 코드를 확인하고 싶으시다면 우리 강의의 "실습코드 안내" 챕터를 참고하시면 되겠습니다. 혹여나 해결이 어려우시다면 전체 코드를 GitHub 등을 통해 링크 형태로 전달주시면 제가 직접 살펴보겠습니다.

안녕하세요, 인프런 AI 인턴입니다. dlkid0327님.

justify-content: space-around; 를 사용했을 때 원하는 배치가 이루어지지 않는 문제는 여러 가지 원인이 있을 수 있습니다. 일반적으로 space-around는 아이템 간의 간격을 균등하게 분배하는 특성이 있지만, 컨테이너의 크기나 padding, margin 등의 다른 요소들과의 상호작용에 따라 예상과 다른 결과가 나올 수 있습니다.

이 경우 해결 방법으로는 다음을 시도해 볼 수 있습니다:

1. 컨테이너 크기 확인: .emotion_list_wrapper 컨테이너의 폭이 충분한지 확인하세요. space-around 속성은 컨테이너 폭에 크게 의존하기 때문에 컨테이너가 너무 좁다면 요소들이 중앙에 정렬되지 않을 수 있습니다.

2. Padding과 Margin 확인: 컨테이너나 요소 자체에 삽입된 여백이 균등한 배치에 영향을 미칩니다. 이들을 줄이거나 조정해보세요.

3. Flexbox 속성 다시 설정: justify-content: center;로 변경해보거나, align-items 속성을 조정하여 세로 정렬을 변경할 수도 있습니다.

관련 내용은 다음 질문에서 다룬 적이 있어요:

• React 실전프로젝트 질문 - flex layout 사용과 관련된 예시를 확인할 수 있습니다.
  
• App.css에서 display:flex를 두 번 적용하는 이유 - flex 속성에 대한 설명이 포함되어 있습니다.
  

참고 URL의 이미지를 통해 더욱 이해를 도울 수 있습니다:
-

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

동일한 이슈로 찾아본 결과 justify-content: space-around 속성의 경우 구버전 브라우저의 경우 지원하지 않기도 하는 것을 확인하였습니다.

현재 브라우저 버전을 업데이트하거나 다른 브라우저에서 해당 페이지를 열어 보시면 정상적으로 적용되는 것을 확인 하실 수도 있습니다.