div 가로 2개, 3개 나란히 정렬 방법(티스토리 2단 스킨 제작 팁?)

div 태그는 division : 구역을 나누는 개념입니다.
div의 기본 display 속성은 block 이에요. 가로폭 전체를 차지하는 block이죠.
장난감 블록을 떠올려 봅시다. 위로만 쌓아지죠? 가로로는 이어붙일 수 없습니다. 같은 개념인 겁니다.

 

첫번째 div를 길게 만들어 첫째 줄에 놓고, 둘째 줄에는 그보다 폭이 좁은 div 2개를 배열하고, 셋째 줄에는 첫번째 div와 같은 폭의 div 태그를 배열하면 얼마나 좋을까요?

 

▲ 대략 이런 식으로 말이지요.

 

검색을 해보니 inline-block 속성을 이용하는 방법과 float 속성을 이용하는 방법이 있었는데, inline-block 속성을 통해 가로 2개 정렬을 구현하면 약간의 여백이 생기는 단점이 있다고 하더군요.

https://blog.naver.com/thdbsgh3443/221229545494

▲ 관련 내용은 위의 글을 참고하세요.

▼ 그래서 float 속성을 이용하는 방법이 많이 쓰이는 것 같은데, float 속성에 대한 개념 설명은 아래 글에 잘 되어 있어서 도움을 받았습니다.

https://study-zone.tistory.com/14

 

그래서 이 글에서도 float 속성을 활용해서 div 2개 정렬하는 사례를 보여드릴 텐데, 티스토리에서 2단 스킨을 만들려면 우측 사이드바 폭은 고정/본문 폭은 가변형으로 설계하면 좋잖아요? 그렇게 목업 설계를 할 수 있는 사례를 보여드리겠습니다.

 

https://www.w3schools.com/tryit/tryit.asp?filename=tryhtml_hello 

https://www.tutorialspoint.com/online_html_editor.php

▲ 구글에서 online html editor 정도로 검색하면 이런 홈페이지들이 나오는데, 접속해서 따라해 보시면 좋을 것 같아요.

 

 

▼ 우선, 이해를 돕기 위해 style 태그로 div의 공통 속성을 지정했습니다. 500픽셀로 테스트 할게요. 1픽셀의 테두리가 눈에 보이도록!

<style>
div {max-width: 500px; border : 1px solid;}
</style>

<div id="div1" style="border-color: black;">1번 영역 입니다.</div>
<div id="div2" style="border-color: blue;">2번 영역 입니다.</div>
<div id="div3" style="border-color: red;">3번 영역 입니다.</div>
<div id="div4" style="border-color: green;">4번 영역 입니다.</div>

▲ div 박스 4개 생성.

 

▼ 웹브라우저에서 이렇게 표현되겠죠?

▲ 2번 영역, 3번 영역의 폭을 좁혀서 한 줄에 담는 것이 목표입니다.

 

▼ 2번 영역+3번 영역 폭의 합을 100%라고 가정하고 임의로 폭을 배분해 봤는데요, border : 1px 의 테두리가 위아래양옆에 있기 때문에 안전하게 1% 줄인 99%로 한 것입니다.

<style>
div {max-width: 500px; border : 1px solid;}
</style>

<div id="div1" style="border-color: black;">1번 영역입니다.</div>
<div id="div2" style="border-color: blue; width: 50%;">2번 영역입니다.</div>
<div id="div3" style="border-color: red; width: 49%;">3번 영역입니다.</div>
<div id="div4" style="border-color: green;">4번 영역입니다.</div>

 

▼ 2번 영역, 3번 영역의 가로폭이 줄긴 했는데... 500픽셀(max-width 값)을 기준으로 비율이 계산된 것 같습니다. 2행 3행을 한줄에 배열하더라도 500px을 넘어갈 것 같죠? 이것은 의도한 바가 아닌데, 폭 조절은 나중에 생각하고 한줄에 2행 3행 배열하는 것에 집중할게요.

 

▼ 2번 영역 div에 float: left; 속성을 추가해 줬습니다. (float: left; 속성을 가진 div 태그를 추가하는만큼 칸이 생깁니다.)

<style>
div {max-width: 500px; border : 1px solid;}
</style>

<div id="div1" style="border-color: black;">1번 영역입니다.</div>
<div id="div2" style="border-color: blue; width: 50%; float: left;">2번 영역입니다.</div>
<div id="div3" style="border-color: red; width: 49%;">3번 영역입니다.</div>
<div id="div4" style="border-color: green;">4번 영역입니다.</div>

 

▼ 어이쿠. 2번 3번 영역이 겹쳐져 버렸네요? 3번 영역 위로 2번 영역이 올라탄 꼴입니다. 3번 영역에 조치를 취해야 될 것 같습니다.

 

▼ 3번 영역 div에 overflow: hidden; 속성을 추가하였습니다.

<style>
div {max-width: 500px; border : 1px solid;}
</style>

<div id="div1" style="border-color: black;">1번 영역입니다.</div>
<div id="div2" style="border-color: blue; width: 50%; float: left;">2번 영역입니다.</div>
<div id="div3" style="border-color: red; width: 49%; overflow: hidden;">3번 영역입니다.</div>
<div id="div4" style="border-color: green;">4번 영역입니다.</div>

 

▼ 2행 3행을 한줄에 배열... 성공했습니다. 하지만 웹브라우저 전체 폭을 100%로 하여 각각의 비율이 계산되더군요. 그리고 결정적인 문제는...

 

▼ 웹브라우저 가로폭을 많이 줄이면 한줄에 정렬한 것이 풀려버립니다. 2번/3번 영역의 가로세로 테두리가 각각 1픽셀씩 차지하니까(총 4px)... 50% + 49% + 4px의 합이 가로폭 100%를 넘는 경우면 이렇게 되는 것이죠.

 

▼ 그리고 2번을 본문, 3번을 사이드바로 활용한다면 3번 영역의 폭은 고정시킬 필요가 있겠죠? 그래서 3번의 폭을 300px로 고정하면서 2번의 폭은 가변적으로 대응되도록 바꿔 봤습니다.

<style>
div {max-width: 500px; border : 1px solid;}
</style>

<div id="div1" style="border-color: black;">1번 영역입니다.</div>
<div id="div2" style="border-color: blue; width: calc(100% - 304px); float: left;">2번 영역입니다.</div>
<div id="div3" style="border-color: red; width: 300px; overflow: hidden;">3번 영역입니다.</div>
<div id="div4" style="border-color: green;">4번 영역입니다.</div>

▲ 2번 영역의 폭을 304px 제외한 이유는? border : 1px가 2번/3번 영역에 있으니까 4px를 더해서 빼준 것이죠.

 

▼ 넓은 폭에서 3번 영역 폭이 300px로 고정 성공. 하지만...

 

▼ 좁은 폭에서 2번이 4번 영역을 침범하는 문제가 있었습니다. 4번 영역에서 대응해야 되겠습니다.

 

▼ 4번 영역에 clear: both; 속성을 추가하였습니다. 상황에 따라 clear 속성의 옵션을 적당히 선택하여 넣으면 됩니다. 그러면 해당 줄부터는 float 속성이 풀리는 것입니다. 만약 5번 영역을 추가한다면? 5번 div에는 clear 속성을 넣지 않아도 됩니다.

<style>
div {max-width: 500px; border : 1px solid;}
</style>

<div id="div1" style="border-color: black;">1번 영역입니다.</div>
<div id="div2" style="border-color: blue; width: calc(100% - 304px); float: left;">2번 영역입니다.</div>
<div id="div3" style="border-color: red; width: 300px; overflow: hidden;">3번 영역입니다.</div>
<div id="div4" style="border-color: green; clear: both;">4번 영역입니다.</div>

 

▼ 4번 영역이 다음 줄에 표현되는 결과를 얻었습니다. 가로폭이 좁으면 아래 스샷처럼 깔끔하게 보이지만...

 

▼ 가로 너비가 500픽셀을 넘어가면 두번째 줄이 늘어지는 문제가 있습니다. 이것을 해결하기 위해...

 

▼ 2번+3번+4번 영역을 div 태그로 묶었습니다. 해당 태그의 id는 container 라고 정했으니 확인하시고, 5번 영역은 임의로 넣었습니다. div 가운데 정렬 방법으로 쓰이는 margin 속성도 추가하였습니다.

<!DOCTYPE html>
<html>

<head>

  <style>
    div {max-width: 500px; border : 1px solid; margin-left: auto; margin-right: auto;}
  </style>

</head>

 

<body>

<div id="div1" style="border-color: black;">1번 영역입니다.</div>

<div id="container" style="border-color: pink;">
  <div id="div2" style="border-color: blue; width: calc(100% - 304px); float: left;">2번 영역입니다.</div>
  <div id="div3" style="border-color: red; width: 300px; overflow: hidden;">3번 영역입니다.</div>
  <div id="div4" style="border-color: green; clear: both;">4번 영역입니다.</div>
</div>

<div id="div5" style="border-color: green;">5번 영역입니다.</div>

 

</body>
</html>

▲ 취향에 따라 1번 영역~5번 영역 전체를 container ID의 div태그로 묶어도 될 것입니다.

 

▼ 완성!

▲ 4번 영역을 푸터로 쓰면 될 것 같네요. 2번 영역을 다시 나누어 본문/댓글 등으로 구분하면 되겠고요.

 

 

▼ 이것도 가로폭이 극단적으로 좁아지면 아래처럼 되긴 하는데, 이것은 미디어쿼리로 대응해야 될 것 같습니다.

 

저만 몰랐던 것일 수도 있겠네요.ㅠㅠ

코드를 최대한 해독하기 좋게 만들어 봤는데, 전달이 잘 되었으려나 모르겠습니다.

이 코드를 실제로 도입할 때에는 border 관련 속성을 전부 지우고 본인의 취향에 맞게 꾸미면 좋을 것 같네요. 테두리가 뻘겋고 퍼렇고 하면 이상할 테니.

 

※ 참고할만한 글

 - CSS 기초(정의, 링크, 문법, 우선순위)

 - HTML 요소 참고서 - mozilla 재단