HTML DIV tag: 아랫글 올려 붙이기 - float: left/right
DIV영역의 가로폭이 그리 넓지 않을 때에는, 아래 글이나 그림을 DIV영역과 나란히 되도록 올려 붙이는 것이 전체적으로 모양새가 나은 때가 있다.방법은 DIV에 플로우트(float: 무엇이 무엇 위에 떠다) 속성을 지정하면 된다.
float: left <= DIV영역을 왼쪽에 놓음
float: right <= DIV영역을 오른쪽에 놓음
1.[태그 모양 : float 속성을 주지 않음]
<div style="border: 3px solid gold; height: auto; padding: 10px; width: 150px;">
여기는 DIV 영역이다
</div>
여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다. DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다.
여기는 DIV 영역이다
</div>
여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다. DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다.
1-1.[실제로 보이는 모양]
여기는 DIV 영역이다
여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다. DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다. 2.[태그 모양 : DIV영역의 오른쪽 빈 공간으로 아래의 글을 나란히 올려 붙임]
<div style="border: 3px solid gold; height: auto; padding: 10px; width: 150px; float: left;">
여기는 DIV 영역이다
</div>
여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다. DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다.
여기는 DIV 영역이다
</div>
여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다. DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다.
2-1.[실제로 보이는 모양 : DIV 영역 오른쪽 옆으로 올려 붙임]
여기는 DIV 영역이다
여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다.DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다.
3.[태그 모양 : DIV영역의 오른쪽과 아래쪽에 바깥 여백을 줌]
<div style="border: 3px solid gold; height: auto; padding: 10px; width: 150px; float: left; margin: 0px 15px 5px 0px;">
여기는 DIV 영역이다
</div>
여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다. DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다.
여기는 DIV 영역이다
</div>
여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다. DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다.
3-1.[실제로 보이는 모양 : DIV 영역 오른쪽 옆으로 올려 붙이고 여백을 줌]
여기는 DIV 영역이다
여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다.
DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다.4.[태그 모양 : DIV영역의 왼쪽으로 올려 붙이고 여백을 줌 : float: right ]
<div style="border: 3px solid gold; height: auto; padding: 10px; width: 150px; float: right; margin: 0px 0px 5px 15px;">
여기는 DIV 영역이다
</div>
여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다. DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다.
여기는 DIV 영역이다
</div>
여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다. DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다.
4-1.[실제로 보이는 모양 : DIV 영역 왼쪽으로 올려 붙이고 여백을 줌]
여기는 DIV 영역이다
여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다.
DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다.>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...