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

Keroppi

작성한 질문수

GSAP의 ScrollTrigger를 활용한 포트폴리오 제작

반응형 가로스크롤 겔러리_1024모드 제작

가로스크롤 갤러리 반응형에서 scrollTrigger 동작 문제

작성

안녕하세요 선생님. 강의 정말 잘 듣고 있습니다.

다름이 아니라, 가로 스크롤 반응형 제작중

갤러리 형태를 세로 방향으로 바꾸는 과정에서 scrollTrigger 를 없애기 위해서 li 를 padding: 0; 으로 바꿔주면 된다고 하셨는데,

저는 적용이 되지 않아 반응형에서도 갤러리들이 가로방향으로 스크롤이 되는 문제가 생깁니다..

도저히 이유를 모르겠어서 질문 올립니다

감사합니다.

.work {
  position: relative;
  height: 100vh;
  border: 2px solid tomato;
}
.work ul {
  display: flex;
  padding: 3% 30%;
  box-sizing: border-box;
}
.work ul li {
  width: 600px;
  padding: 100px;
  box-sizing: border-box;
  flex-shrink: 0 !important;
}

 @media screen and (max-width: 1024px) {
.work {
    height: auto;
  }
  .work ul {
    padding: 0% 5%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .work ul li {
    padding: 0;
    width: 45%;
    margin-top: 150px;
  }
}

HTML/CSS 포트폴리오 반응형-웹 gsap scrolltrigger

답변 1

인프런 AI 인턴

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

질문해주신 반응형 웹 디자인에서 발생하는 갤러리의 세로 방향 전환 문제에 대해 몇 가지 지침을 제공하겠습니다. 우선 Flexbox를 이용한 레이아웃에서 요소의 크기 및 위치 조정을 위한 기본적인 설정이 올바르게 적용되지 않을 때, 예상과 다른 결과가 발생할 수 있습니다.

중요한 고려 사항:

플렉스 박스 설정 확인: 반응형 변화를 위해 flex-wrap을 설정해주셨는데, wrap이 제대로 작동하지 않으면 가로 스크롤 문제가 발생할 수 있습니다. 이는 부모 요소인 ul에 적용되어야 정상 작동합니다.
패딩 및 마진 조정: 상위 ul의 패딩 및 모든 자식의 마진 관련 설정이 변하지 않아야 li 요소들이 가로로 정렬되지 않습니다. 현재 설정에서는 패딩이 0이 되도록 설정하셨습니다.
브라우저와 디바이스 간 검사: CSS가 디바이스에 제대로 적용되고 있는지를 여러 기기와 브라우저에서 테스트해보시길 바랍니다. 미디어 쿼리는 특정 조건에 따라 작동하므로 화면 크기에 따라 변화하는지 확인해야 합니다.

유사 질문 답변 참고 링크:

이와 유사한 문제를 처리한 사례를 아래 질문 답변에서 확인해볼 수 있습니다.
- gSAP과 ScrollTrigger를 이용한 FAQ 제작 관련 질문 - Flexbox를 사용한 레이아웃 전환 및 스크롤 관련 문제를 해결한 답변입니다.

부디 이 답변이 도움이 되기를 바랍니다. 추가적인 코드 스니펫과 화면 상황(예: 콘솔 오류)을 더 제공해주시면 좀 더 상세한 분석과 지원이 가능합니다.

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

Keroppi

작성한 질문수

전체 Q&A

질문하기