TIL 04. Float에 대해서

Float는 HTML, CSS에서 사진 등을 정렬 하는데 쓰인다.
우리가 흔히 웹페이지에서 자연스럽게 보는 Float는 Vertical Float라고 할수 있다. 내용을 위에서 아래로 순서대로 보기 때문.
하지만 왼쪽에서 오른쪽으로 내용을 본다면 Horizontal Float를 적용해야하는데, 그러면 float property 를 적용해야 한다.

최근에는 Flex를 더 많이 사용한다고는 하지만 Float에 대해서 알아본다면

left: 요소를 왼쪽에 떠 있도록 설정
right: 요소를 오른쪽에 떠 있도록 설정
none: 기본값, 특정한 방향을 부여하지 않음

<img width="200px" height="200px" src="https://bit.ly/3tEMB2f">
<div>
 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.
</div>

해당 화면과 같이 출력이 완료된다.

이제 Float 특성을 적용시켜본다.

Float Left

<p><img style="float:left" src="https://bit.ly/3tEMB2f" width="200px" height="200px" /></p>
<div>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.</div>

사진이 글의 왼쪽에 출력되었다.

Float Right

<p><img style="float:right" src="https://bit.ly/3tEMB2f" width="200px" height="200px" /></p>
<div>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.</div>

사진이 글의 오른쪽에 출력되었다.