본문으로 건너뛰기

TIL : 23-06-26

오늘 한 일​

  • 테오 스프린트

테오 스프린트​

.swiper-pagination 관련​

현재 pagination이 글씨를 가리는 문제가 있음.

image
.swiper-pagination {
  top: calc(var(--vh, 1vh) * 75) !important;

  @media (max-height: 768px) {
    top: calc(var(--vh, 1vh) * 65) !important;
  }

  @media (max-height: 1100px) {
    top: calc(var(--vh, 1vh) * 60) !important;
  }
}

위 코드를 아래와 같이 수정하면 위 문제는 해결됨.

.swiper-pagination {
  top: calc(var(--vh, 1vh) * 75) !important;

  // @media (max-height: 768px) {
    // top: calc(var(--vh, 1vh) * 65) !important;
  // }

  // @media (max-height: 1100px) {
    // top: calc(var(--vh, 1vh) * 60) !important;
  // }
}

뷰포트 높이에 따라 .swiper-pagination의 위치를 조정하는 코드로 이해하고 있는데,
(현재 주석처리한)일부 코드를 제거하면
반응형 대응을 하지 못 하게 됨.

.swiper-pagination {
  top: calc(var(--vh, 1vh) * 75) !important;

  @media (min-height: 1080px) {
    top: calc(var(--vh, 1vh) * 60) !important;
  }
}

따라서 위의 코드를 통해, 앞서 언급한 (pagination이 글씨를 가리는)문제와 반응형 대응을 하고자 함.

참고자료 : https://log.designichthus.com/11, https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/