- div 높이 같게
- div 같은 높이
1 개요[ | ]
수평으로 배열된 div들의 높이를 똑같이 하고자 한다. 물론 기본적으로 div들의 높이를 똑같이 지정하는 방법을 생각해볼 수 있으나, 이렇게 할 경우 내부에 들어가는 내용의 양에 따라 높이가 동적으로 변화할 수 없게 된다. 높이를 고정하지 않고 적용할 수 있는 방법 3가지를 알아보자.
2 컨테이너 배경색[ | ]
바깥 div(컨테이너)에 배경색을 주면 내부 div들을 모두 포함한 사각형 영역에 적용된다. (실제로 div의 높이가 같아지는 것이 아니지만 효과는 유사하다.)
html
Copy
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>DIV 높이 같게</title>
</head>
<style type="text/css">
#container { float:left; background:#ccc; }
#container div { float:left; width: 100px; }
</style>
<body>
<div id='container'>
<div>다람쥐 헌 쳇바퀴에 타고파.</div>
<div>다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파.</div>
<div>다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파.</div>
</div>
</body>
</html>
3 컨테이너 배경그림[ | ]
위 문단과 같은 방법으로는 div별로 다른 배경색을 지정할 수 없다. 따라서 div별로 다른 배경을 넣고 싶다면, 배경색 대신 배경그림을 사용해야 한다.
html
Copy
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>DIV 높이 같게</title>
</head>
<style type="text/css">
#container { float:left; background:url(http://upload.wikimedia.org/wikipedia/commons/8/8d/RGBR.png) repeat-y; }
#container div { float:left; width: 100px; }
</style>
<body>
<div id='container'>
<div>다람쥐 헌 쳇바퀴에 타고파.</div>
<div>다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파.</div>
<div>다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파.</div>
</div>
</body>
</html>
4 컨테이너 오버플로우(개별 색상)[ | ]
html
Copy
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>DIV 높이 같게</title>
</head>
<style type="text/css">
#container { overflow: hidden; }
#container > div {
float: left;
background: #ccc;
width: 100px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
</style>
<body>
<div id='container'>
<div style='background:#f00'>다람쥐 헌 쳇바퀴에 타고파.</div>
<div style='background:#0f0'>다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파.</div>
<div style='background:#00f'>다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파.</div>
</div>
</body>
</html>
5 같이 보기[ | ]
6 참고[ | ]
편집자 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.