이미지를 겹치는 방법에 대한 질문입니다.

Question

안녕하세요. 강의를 듣다가 궁금한 점이 생겨서 질문을 남깁니다!

bxslider 이미지 위에 도트 이미지를 겹칠 때, position:absolute 대신 float를 쓰면 왜 안될까요?(강의와 동일한 코드인데, 도트 이미지 속성에만 position대신 float: left를 썼습니다.)

도트 이미지한테 float:left를 주고, bxslider에겐 아무것도 주지 않으면, 도트 이미지만 float로 붕 뜨게 되고, bxslider가 밑에 깔려야되는게 아닐까요?

아래 사진(https://amaze9001.tistory.com/62)처럼 생각하고 해봐도 안되네요.. 두 이미지가 각각 줄 씩 차지하게 됩니다.

bxslider와 도트 이미지 둘 다 width:100%, height:100% 이라 float를 써도 넘쳐버리는 걸까요?ㅜㅠ

CSS 플로트(float)

Answer

안녕하세요.

이게 글로 설명하기에는 제대로 전달되지 않을 것 같아 걱정이지만 설명을 해드리도록 하겠습니다.

HTML 요소가 웹 브라우저에 표시되기 위해서는 고유한 위치의 기준 값이 있습니다.

이런 위치의 기준값은 일반적으로 크게 블럭과 인라인으로 구분할 수 있으며 블럭 요소를 사용하면 요소가 줄바꿈이 되어서 작성되고(div, hn, p 태그 등등) 인라인 요소를 사용하면 요소가 가로 공간이 허용하는 한 한줄로 쭉 나열됩니다.(a, span 등등..)

그리고 모든 요소는 왼쪽 정렬이 기본이라서 아마 태그를 사용하시면 항상 웹브라우저의 왼쪽 부분에서부터 요소들이 시작하는 것도 느끼셨을 겁니다.

이처럼 원래 모든 HTML 요소는 이런 일반적인 위치 개념을 벗어나지 않지만, float나 position을 사용하면 예외가 발생하게 됩니다.

float는 가로 한줄에서의 좌/우 정렬이라고 생각하시면 됩니다. float 속성이 위치를 변경해봐야 자신이 속해있는 가로 한 줄을 벗어날 수 없습니다.

반면 position을 absolute로 지정하게되면 위치값이 아예 새로 계산됩니다. 보통 별도의 relative, absolute, fixed를 부모를 만나지 않으면 브라우저의 최상단 왼쪽 위가 0, 0으로 계산되어서 이동됩니다.

본 강의에서는 도트 이미지가 가지고 있던 좌표를 새로 계산하기 위해서 position을 사용합니다. float를 사용하면 기껏 움직일 수 있는 범위가 가로 한 줄안에서 국한되기 때문입니다.

제가 지금 답변을 적으면서도 어렵다고 잘 이해가 안되실지도 모른다고 느끼는데요. 혹시 이해가 안되시면 추가적으로 position과 float 속성을 구글링하여 검색한 뒤 공부하시면 도움이 되지 않으실까 생각합니다 :)