HTML DIV tag: 세 개의 DIV영역을 가로로 나란히 놓는 방법

DIV영역 여러개를 나란히 놓으려면, float 속성을 이용하면 된다.
창의 너비를 100%로 보았을 때, DIV영역의 갯수에 따른 상대적 비율을 DIV영역의 너비로 지정해 준다.

예컨데, DIV영역 세 개를 나란히 놓는다면, 하나의 영역 너비는 100%의 3분의 1인 33%가 된다. DIV영역 네 개를 나란히 놓는다면, 하나의 영역 너비는 100%의 4분의 1인 25%가 된다.

1.[태그 모양: 너비를 33%로 주었을 때]

[태그 모양]

[적용후의 모습]

첫번째 영역: 각각의 영역의 너비를 33%로 주었을 때, 세 영역이 나란히 놓인다.

두번째 영역: 각각의 영역의 너비를 33%로 주었을 때, 세 영역이 나란히 놓인다.

세번째 영역: 각각의 영역의 너비를 33%로 주었을 때, 세 영역이 나란히 놓인다.

1-1.[태그 모양: 너비를 33%로 주고, 안여백을 주었을 때]

[태그 모양]

[적용후의 모습]

첫번째 영역: 각각의 영역의 너비를 33%로 주고 안여백(padding)을 주면, 마지막 영역이 아래로 밀리는 현상이 나타난다.

두번째 영역: 각각의 영역의 너비를 33%로 주고 안여백(padding)을 주면, 마지막 영역이 아래로 밀리는 현상이 나타난다.

세번째 영역: 각각의 영역의 너비를 33%로 주고 안여백(padding)을 주면, 마지막 영역이 아래로 밀리는 현상이 나타난다.

위에서 보는 것처럼 여백을 주면 마지막 영역이 아래로 밀리는 현상이 나타난다. 이를 막기 위해서는 너비를 33%보다 조금 줄여서 30% 정도로 주면 나란히 놓인다.

2. 여백을 주었을 때와 주지 않았을 때의 전체 너비 비교

윗쪽은 너비를 33%로 주고 여백을 주지 않은 것이고, 가운데는 여백을 주고 너비를 30%로 줄여서 나란히 놓은 것이다. 아래쪽은 여백을 주고 너비를 30%로 주어 나란히 놓되 오른쪽 끝선을 맞추기 위해 마지막 영역의 float속성을 right로 지정한 것이다.

참고: 브라우저의 가로폭을 크게 넓히면 영역간의 차이가 잘 보인다.

[태그 모양]

[적용후의 모습]

첫번째 영역: 각각의 영역의 너비를 33%로 주고 여백을 주지 않았다

두번째 영역: 각각의 영역의 너비를 33%로 주고 여백을 주지 않았다

세번째 영역: 각각의 영역의 너비를 33%로 주고 여백을 주지 않았다

첫번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌

두번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌

세번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌

첫번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌.
마지막 영역의 float 속성을 right로 주어 오른쪽 끝으로 붙였다

두번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌
마지막 영역의 float 속성을 right로 주어 오른쪽 끝으로 붙였다

세번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌
마지막 영역의 float 속성을 right로 주어 오른쪽 끝으로 붙였다

위에서 보는 것처럼, 여백을 주고 너비를 30%로 줄인 두 번째 예의 전체 너비가 그렇지 않은 첫 번째 예의 전체 너비보다 조금 짧다.
세번째 예는 영역의 오른쪽 끝선을 맞추기 위해, 마지막 영역의 float속성을 right(오른쪽)으로 지정하였다. 따라서 세번째 예에서는 두번째 영역과 마지막 세번째 영역 사이에 공백이 생겼다.

3. DIV와 테이블 태그 비교

[태그 모양]

[실제 적용한 모습]
윗쪽은 DIV영역에 안여백을 주고 영역 너비를 30%로 준 모습이고, 가운데는 테이블의 데이타 셀을 각각 33%로 하여 세 개로 나눈 모습이다. 아래쪽은 DIV영역에 안여백을 주지 않고 영역 너비를 33%로 준 모습이다.
브라우저의 가로폭을 크게 넓혀서 DIV 영역과 테이블 영역의 전체 가로폭의 차이를 비교해 보기 바란다.

DIV 첫번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌

DIV 두번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌

DIV 세번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌

1번 데이타셀 : 각 데이타 셀(td)의 너비를 33%로 주었다

2번 데이타셀 : 각 데이타 셀(td)의 너비를 33%로 주었다

3번 데이타셀 : 각 데이타 셀(td)의 너비를 33%로 주었다

DIV 첫번째 영역: 각각의 영역의 너비를 33%로 주고 안여백을 주지 않았다

DIV 두번째 영역: 각각의 영역의 너비를 33%로 주고 안여백을 주지 않았다

DIV세번째 영역: 각각의 영역의 너비를 33%로 주고 안여백을 주지 않았다

>> 참고: HTML DIV tag: 두개의 영역(그림, 글자, 광고 등)을 나란히 놓기
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

Search This Blog

사용법어찌?

HTML DIV tag: 세 개의 DIV영역을 가로로 나란히 놓는 방법 - 테이블과 비교