[오류일지]10. 반응형 홈페이지의 .cen의 너비 및 반응형 사이트에서의 슬릭 이용법

화면의 크기를 줄였더니 헤더와 메인비주얼 크기가 갑자기 난리났다. 원인이 뭘까?

 

 

왼쪽, 수정 전.  오른쪽, 수정 후.

정답은 내가 .cen의 너비를 max-width가 아닌 그냥 width로 줬기 때문이다!

 

반응형 홈페이지를 만들 때에는 .cen의 너비는 max-width여야한다!!!!

 

그런데도 비슷한 문제가 생긴다?

body에게 overflow-x:hidden;을 주자.

 

 

이렇게 하면 PC버전에서는 문제가 생기지 않는다.

 

그러나..

 

모바일 버전에서 또 비슷한 문제가 발생했다.

원인은 슬릭에서 사용한 arrow 때문에 발생한 문제다.

이걸 어떻게 해결해야 할까?

 

 

정답. JS에서 responsive를 다음과 같이 추가해주자!

 

breakpoint: ~px이 될때,

settings:{

다음과 같이 세팅해라

}

 

 

 

그런데..!!!

 

화면을 줄였다가 다시 너비가 커질 때, Arrow들이 이미지가 아니라 글씨로 나오게 되었다. 이게 어떻게 된 일일까?

 

 

 

정답. 화살표를 slick();에서 정하지 않고 밖에서 정했기 때문이다!

 

다음과 같이 slick();안이 아니라 바깥에서 줬기 때문에 생긴 문제점이다.

 

슬릭 안에 다음과 같이 추가해주자!

prevArrow:"<button type='button' class='slick-prev'><img src='images/btn_arrow.png'/></button>",
nextArrow:"<button type='button' class='slick-next'><img src='images/btn_arrow.png'/></button>",

적용한 이미지.

이렇게 slick();안에 넣어주면 문제가 생기지 않는다!