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

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

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

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


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

[태그 모양] 

[적용후의 모습]

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

[태그 모양] 

[적용후의 모습]

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


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

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

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

[태그 모양] 

[적용후의 모습]

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

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


3. DIV와 테이블 태그 비교

[태그 모양] 

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

[출처] https://ojji.wayful.com/2014/01/HTML-DIV-to-Float-Three-Divs-side-by-side.html