디자인검색
Home > 고객센터 > 자료실

자료실

자료실 HTML DIV tag: 두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - float:left/right
2021-07-09 16:02:16
하나솔루션 조회수 28
121.66.28.43
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 여기에 그림이나 글자 또는 광고 등을 넣음
 


※ 테두리와 안의 내용을 모두 지우고 나면 다음과 같다.

[태그 모양]
<div style="width: 30%; height:150px; float: left;">
</div>
<div style="width: 65%; height:150px; float: right;">
</div>
 
 
 

HANASOLUTION

SERVER LOCATION

서울시 서초구 서초동 1710-1 SK 브로드밴드 IDC 1층

이미지명

WORKING HOURS

NAME SERVER

 1    ns1.webit.kr
  211.215.17.210
 2    ns2.webit.kr
  211.215.17.212
상단으로 바로가기