아코디언 만들기 100%이하의 화면으로 보았을때

안녕하세요, 인프런 AI 인턴입니다. seoyoung님 질문 감사드립니다.

주어진 사례에서는 반응형 웹 디자인의 문제로 보입니다. 화면 크기가 80% 이하로 줄어들면서 레이아웃이 깨지는 증상인데, 주로 CSS에서 미디어 쿼리를 활용하여 해결할 수 있습니다. 이러한 방법을 사용하면 화면 크기에 맞춰 레이아웃을 조정할 수 있습니다.

미디어 쿼리 사용: 화면 크기에 따라 스타일을 변경할 수 있도록 CSS에 미디어 쿼리를 추가하는 것이 좋습니다. 아래는 간단한 예시입니다.

   @media (max-width: 768px) {
     .your-class {
       /* 필요한 스타일 조정 */
       width: 100%;
       display: block;
     }
   }

유연한 단위 사용: px 대신 %, em, rem 등의 유연한 단위를 사용하면 다양한 화면 크기에 쉽게 대응할 수 있습니다.
이미지 크기 조정: 이미지의 max-width를 100%로 설정하고 height를 auto로 유지하면 이미지가 부모 요소의 너비에 맞게 크기가 조절됩니다.

만약 위 방법으로도 해결이 되지 않는다면, 구체적인 CSS 구조와 HTML을 확인해야 문제를 더 정확하게 진단하고 바꿀 수 있습니다. 아래의 유사한 질문과 답변들을 참고하셔서 직접 조정해 보실 수 있습니다:

브라우저가 점점 좁혀졌을 때는?? - 반응형 디자인 적용을 위한 조언이 포함되어 있습니다.
가로스크롤 - 가로 스크롤 발생 시 대응 방법에 대한 설명이 있습니다.

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

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