HTML DIV tag: 두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - float:left/right
블로그나 웹페이지를 보면, 그림이나 광고 등을 좌우로 나란하게 배치해 놓은 것을 볼 수 있다. 표(table)를 이용하여도 되고, 아래와 같이 DIV태그를 사용하여도 된다.방법은 DIV 영역을 2개 만든 다음, 두 영역을 나란히 붙히는 것이다.
1. 영역 2개 만들기
[태그 모양]
<div style="width:150px; height:150px; border:1px solid red;">
첫번째 영역:
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:150px; height:150px; border:1px solid green;">
두번째 영역:
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
첫번째 영역:
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:150px; height:150px; border:1px solid green;">
두번째 영역:
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
[적용후 모습]
첫번째 영역:
여기에 그림이나 글자 또는 광고 등을 넣음
두번째 영역:
여기에 그림이나 글자 또는 광고 등을 넣음
2. 두번째 영역을 첫번째 영역 옆에 올려 나란히 붙이기
위의 태그에 "float:left 또는 right;"를 추가한다.
[태그 모양]
<div style="width:200px; height:150px; border:1px solid red; float:left;">
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:200px; height:150px; border:1px solid green; float:left;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:200px; height:150px; border:1px solid green; float:left;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
[적용후의 모습]
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
두 영역사이를 띄우려면, margin(바깥 여백)을 준다.
첫번째 영역의 오른쪽에 여백을 주어도 되고, 두번째 영역의 왼쪽에 여백을 주어도 된다. 여기서는 첫번째 영역의 오른쪽에 여백을 준다.
[태그 모양]
<div style="width:200px; height:150px; border:1px solid red; float:left; margin-right:10px;">
첫번째 영역:
왼쪽에 위치시킴 => float:left
오른쪽에 바깥여백을 줌 => margin-right:10px;
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:200px; height:150px; border:1px solid green; float:left;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
첫번째 영역:
왼쪽에 위치시킴 => float:left
오른쪽에 바깥여백을 줌 => margin-right:10px;
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:200px; height:150px; border:1px solid green; float:left;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
[적용후의 모습]
첫번째 영역:
왼쪽에 위치시킴 => float:left
오른쪽에 바깥여백을 줌 => margin-right:10px;
여기에 그림이나 글자 또는 광고 등을 넣음
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
3.두 영역을 나란히 놓되, 첫번째 영역은 왼쪽에 붙이고, 두번째 영역은 오른쪽으로 붙이기
[태그 모양]
<div style="width:200px; height:150px; border:1px solid red; float: left;">
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:200px; height:150px; border:1px solid green; float: right;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:200px; height:150px; border:1px solid green; float: right;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
[적용후의 모습]
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:right
여기에 그림이나 글자 또는 광고 등을 넣음
※ 영역 아래의 글이 따라 올라가는 것 막기
위와 같이 영역을 설정하고 나면, 그 아래에 있는 글이나 그림이 영역 옆으로 딸려 올라가게 된다. 이것을 막는 방법은 몇 가지가 있는데, 그 가운데 가장 편한 방법은 두번째 영역을 지정한 </div>에 바로 붙여서 <div style="clear:both:"></div>를 추가하는 것이다.
[태그 모양]
<div style="width:200px; height:150px; border:1px solid red; float: left;">
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:200px; height:150px; border:1px solid green; float: right;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div><div style="clear:both:"></div>
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:200px; height:150px; border:1px solid green; float: right;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div><div style="clear:both:"></div>
※ 너비주기
실제로는 영역의 높이(height) 그리고 테두리(border:~)를 설정할 필요가 없는 경우가 많다. 그림이나 글씨 등을 넣게 되면, 높이는 그에 따라 자동으로 맞추어 지기 때문이다.
너비(width)는 두개의 영역이 나란히 놓여야 하므로 지정을 해주어야 한다.
전체 너비는 100%이므로, 왼쪽 오른쪽의 너비를 알맞은 비율(%)로 주어도 되고
예) width: 30%
비율이 아닌 고정너비(px)단위로 지정을 해주어도 된다.
예) 250px
[태그 모양: 왼쪽 영역의 너비는 30%를 주고, 오른쪽 영역의 너비는 65%를 줌, 두 영역 사이는 자동으로 5%(=100% - 30% - 65%)가 됨 ]
<div style="width: 30%; height:150px; border:1px solid red; float: left;">
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width: 65%; height:150px; border:1px solid green; float: right;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width: 65%; height:150px; border:1px solid green; float: right;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
[적용후의 모습]
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:right
여기에 그림이나 글자 또는 광고 등을 넣음
※ 테두리와 안의 내용을 모두 지우고 나면 다음과 같다.
[태그 모양]
<div style="width: 30%; height:150px; float: left;">
</div>
<div style="width: 65%; height:150px; float: right;">
</div>
</div>
<div style="width: 65%; height:150px; float: right;">
</div>
참고: HTML DIV tag: 세 개의 DIV영역을 가로로 나란히 놓는 방법 - 테이블과 비교
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...