css (5) 썸네일형 리스트형 [오류일지]14. CSS- 반응형을 고려하여 높이 지정 말고 overflow:auto;! 화면 크기를 줄였더니 다음과 같이 변했다. 내가 무슨 잘못을 해서 이렇게 된 걸까? 정답은 내가 div의 높이를 지정해버렸기 때문에 발생한 일이다! 이럴 때에는 반응형을 고려하여 높이를 고정하지 않고 overflow:auto;로 지정해야한다! [오류일지]12. z-index는 형제끼리의 싸움이다! 위는 내가 저지른 오류다. #lnb에 z-index:1000을 줘봤자 소용이 없다. 왜냐하면 z-index는 형제끼리 즉 같은 급에서의 싸움이기 때문이다. 이 상황에서는 header에 z-index를 줘야한다. 그래야 동급인 #subBack과 싸울 수 있다. [오류일지]10. 반응형 홈페이지의 .cen의 너비 및 반응형 사이트에서의 슬릭 이용법 화면의 크기를 줄였더니 헤더와 메인비주얼 크기가 갑자기 난리났다. 원인이 뭘까? 정답은 내가 .cen의 너비를 max-width가 아닌 그냥 width로 줬기 때문이다! 반응형 홈페이지를 만들 때에는 .cen의 너비는 max-width여야한다!!!! 그런데도 비슷한 문제가 생긴다? body에게 overflow-x:hidden;을 주자. 이렇게 하면 PC버전에서는 문제가 생기지 않는다. 그러나.. 모바일 버전에서 또 비슷한 문제가 발생했다. 원인은 슬릭에서 사용한 arrow 때문에 발생한 문제다. 이걸 어떻게 해결해야 할까? 정답. JS에서 responsive를 다음과 같이 추가해주자! breakpoint: ~px이 될때, settings:{ 다음과 같이 세팅해라 } 그런데..!!! 화면을 줄였다가 다시 .. [오류일지]8. #mainVisual에 overflow:hidden;을 넣자! 맨 오른쪽을 보면 분명히 width:100%여야 할 곳이 짤린 것을 볼 수 있다. 이렇게 된 이유는 내가 #mainVisual에 overflow:hidden;을 안 넣어서 이렇게 되었다! 이렇게 overflow: hidden;을 넣게 되면 이미지가 넘친 부분은 짤리므로, 아래와 같이 원하는 대로 돌아온다. [오류일지]6.CSS - ::befor, ::after는 기본적으로 inline이다. 내가 저질렀던 오류. 가상요소(::before, ::after)가 기본적으로 display:inline;이라는 사실을 모르고 크기를 지정했다. 이렇게 display: block;을 써주고 크기를 지정해주자! + 가상요소 (Pseudo-elements) ::before ::after 태그 안 쪽에 들어간다! 이전 1 다음
