CSS 를 이용해서 어떤 항목을 배열한다고 할 때 어려움이 많습니다.
만약 다음과 같은 형태로 출력 하고자 한다면???
고정된 크기로 출력을 하는 경우에는 너비를 지정해 주어서 출력하는 것도 좋은 방법입니다. 테이블을 사용하나 DIV를 사용하나 너비 지정하는 방법을 쓰면 효과적으로 작동합니다.
문제가 있다면, 전체 가로 너비가 변경되는 경우에는 다시 손을 봐줘야 한다는 점이죠!
자바스크립트를 이용하는 방법도 있습니다. 문제는 속도가 느려질 수 있다는 것?
그렇다면 웹 표준을 준수하면서 저런걸 할 수 있을까요?
우선은 각 DIV를 33.33%로 만들어 주면 3등분은 가능하겠네요~(정확히는 아니지만..) 그 다음엔?
생각보다 간단하게, 각 항목에 'margin-right:20px;' 을 적용시켜 주고, 전체를 감싸고 있는 DIV에 'margin-right:-20px;'을 넣어주면 됩니다.
전체 너비가 20px만큼 늘어난 효과를 주면서 내용물은 3등분 정렬에 우측 마진을 줬을 때 동일한 크기를 가지게 되는거죠~ 일종의 편법입니다. 그래도 유용하게 쓰일 수 있겠죠?
몹쓸 귀차니즘 때문에 코드와 자세한 설명은 생략하고, 방법만 올려 봅니다.
