[LAB-6] white-space: nowrap을 줌에 따른 이미지 크기

[SSY1203]

질문 작성자

신선영

문제 상황

위처럼 하면 아무 문제는 없는데, 아래처럼 span에 white-space:nowrap을 적용하게 되면 아래와 같이 이미지가 뒤죽박죽으로 크기가 제각각이 됩니다.

이미지에는 변화를 주지 않았는데 왜 저럴까요ㅠ 좋은 해결 방법이 있을까요?

• 질문 내용을 자세하고 명확하게 풀어 이해할 수 있도록 작성합니다.
• 상황 이해를 돕기 위한 이미지 첨부가 필요한 경우 작성합니다. (권장)
• 이미지, GIF, 비디오 파일을 입력 필드로 끌어 옮기면 자동 삽입됩니다.

프로젝트 저장소 URL

• 공개된 GitHub 프로젝트 저장소 URL을 여기에 남깁니다.
• develop 브랜치
• 6lossom-develop.zip
• env 파일

환경 정보

• 운영체제 정보 (Windows)
• Node.js 정보 (예: v16.14.0)
• 라이브러리 정보 (예: React v18.0.2)

[yamoo9]

문제 분석

span 요소에 white-space: nowrap을 적용하게 되면 이미지 크기가 일정하지 않는데 방법이 있을까요?

문제 해결

Flower.module.scss 파일을 열어 button 요소 스타일에 width, height 값을 설정해보세요. 😊

.flower {
  // ...
  button {
    // ...
    width: 108px;
    height: 100px;
  }

  span {
    font-size: 12px;
    white-space: nowrap;
  }
}

그러면 아래처럼 렌더링 됩니다.