두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - float:left/right

1. 영역 2개 만들기

[태그 모양]

<div style="width:150px; height:150px; border:1px solid red;">
첫번째 영역:
여기에 그림이나 글자 또는 광고 등을 넣음
</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 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 첫번째 영역 옆에 나란히 붙임 => 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; 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 첫번째 영역 옆에 나란히 붙임 => 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 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 첫번째 영역 옆에 나란히 붙임 => 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>

※ 너비주기
실제로는 영역의 높이(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 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 첫번째 영역 옆에 나란히 붙임 => float:right 여기에 그림이나 글자 또는 광고 등을 넣음

 

 

 

 

 

 

 

 

 

 

 

 

 

 

출처

 

https://ojji.wayful.com/2013/12/HTML-set-Two-Parallel-DIVs-columns.html

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.