height: auto와 height: 100%
화면의 크기를 줄일 때, 반응형의 슬라이더 컨테이너 높이를 줄이기 위해서 height: auto를 주었지만 아래와 같이 이미지만 줄어들고 슬라이더의 높이는 그대로 되면서 absolute로 위치를 잡았던 좌우 버튼과 점들이 따로 놀게 되는 상황이 생기게 되었다.
위의 상황은 vw값으로 해결할 수 있긴 했지만 height: auto은 부모의 높이에 따라 알아서 조절하는 옵션으로 알고 있었는데 잘못알고 있었다는 것을 알게되었다.
@media (max-width: 743px) {
height: 60vw;
max-height: 410px;
}
stackoverflow에서는 다음과 같이 설명한다.
height: 100% gives the element 100% height of its parent container.
height: auto means the element height will depend upon the height of its children.
height: 100%은 부모의 높이에 영향을 받는 것은 맞지만
height: auto의 옵션을 주면 해당 요소의 높이는 자식들의 높이에 영향을 받는다고 한다.
아래와 같은 예시가 있을 때,
<div style="height: 50px">
<div id="innerDiv" style="height: 100%">
</div>
</div>위의 경우에는 #innerDiv의 요소는 height: 50px 값을 가진다.
height: auto
<div style="height: 50px">
<div id="innerDiv" style="height: auto">
<div id="evenInner" style="height: 10px">
</div>
</div>
</div>하지만 위의 경우에는 #innerDiv의 요소는 height: 10px 값을 가지게 된다.
모바일 반응형
현재는 모바일 화면에 맞게 css만 수정한 상태이다. 기존의 버튼들은 click 이벤트로 되어있는데 모바일에서는 이 click이벤트가 늦게 발생하기 때문에 touchstart와 touchend를 활용해야 한다고 한다.
Reference
