BOX 안에서 row,col 균등배분을 하고자

[송효진]

합니다.

이것만 알면 제가 생각하는것을 xhtml + css 로 모두 표현할 수 있을것 같네요.

Code: Select all

<div id="menu">
  <div class="menuitem">menu1</div>
  <div class="menuitem">menu2</div>
  <div class="menuitem">menu3</div>
  <div class="menuitem">menu4</div>
  <div class="menuitemBR">menu5</div>
  <div class="menuitem">menu6</div>
  <div class="menuitem">menu7</div>
  <div class="menuitem">menu8</div>
</div>

id menu 를 400x200 으로 지정하면,
안의 div 들은 자동으로 그 안에 꽉 차게 되는것을 원합니다.
class menuitemBR은 줄바꿈을 위해 넣었습니다.

[eouia]

합니다.

이것만 알면 제가 생각하는것을 xhtml + css 로 모두 표현할 수 있을것 같네요.

Code: Select all

<div id="menu">
  <div class="menuitem">menu1</div>
  <div class="menuitem">menu2</div>
  <div class="menuitem">menu3</div>
  <div class="menuitem">menu4</div>
  <div class="menuitemBR">menu5</div>
  <div class="menuitem">menu6</div>
  <div class="menuitem">menu7</div>
  <div class="menuitem">menu8</div>
</div>

.menuitem {
width:25%;
height:50%;
float:left;
}


그런데, 메뉴는 ul/li를 써야 하지 않을까 생각해봅니다.

[송효진]

답변 감사합니다.
ul li 도 마찬가지겠지요.
실제 적용할 때는 메뉴에 ul li 사용할겁니다.^^

제가 균등배분을 원한것은 100 을 정수로 균등하게 나눌 수 없는경우
즉 33% 33% 34% 로 표현해야 하는 경우 등에도
동일하게 적용하고 싶어서 입니다.
33% 로만 했을 경우 1%의 여백이 꽤 크게 보입니다.

그래서 그냥 꽉차게 하는 속성이 있는지를 여쭌겁니다.^^

%를 사람이 계산하지 않고 그냥 꽉 차게 하는 속성을 원합니다.

[hyeonseok]

원하시는 속성은 제가 알기로는 없습니다.
CSS 가 동적인 것 까지는 지원하지 않습니다.

[박민권]

답변 감사합니다.
ul li 도 마찬가지겠지요.
실제 적용할 때는 메뉴에 ul li 사용할겁니다.^^

혹시나 모르시는 분들을 위해서 참고사항을 하나 적어놓겠습니다.
ul, ol, li, dl, dt, dd등의 목록 태그는 브라우저마다 기본 margin과 padding이 다르므로
정확하게 초기화를 해줘야 같게 표현됩니다.

저는 아예 기본 공통 css파일에
ul, ol, li, dl, dt, dd{margin: 0; padding: 0;}
을 선언해 놓습니다.

그리고나서 필요한 부분에 가서 다시 margin, padding을 맞춥니다.