티스토리 뷰

프로그래밍/HTML5

div 가로 정렬하기.

쇠주는참이슬 2012. 5. 25. 15:51

div를 이용해서 가로정렬을 하고 싶을 때 보통은 float:left;를 많이 사용하죠.
하지만 그 가로정렬한 div간에 조금의 틈도 없어야 할 때(예를 들어 이미지 두개를 A|B로 붙여야 할 때)에는 float를 사용할 수가 없어요 두 개의 div간에 2~3px?정도 틈이 생기기 때문이죠.
이해가 안 가신다면 간단한 방법으로 이유를 쉽게 설명하기 위해 html페이지에서 실습한번 해보세요.ㅎㅎ

우선 body까지 기본 코드를 적고선 가+enter+나 를 입력하고 익스플로어로 확인(html파일을 더블클릭)해보세요. 가와 나가 출력되겠죠? 그럼 여기서 가와 나를 드래그해보면 세로로 틈이 한줄 생기는 것을 볼 수 있어요. 이게 div에도 똑같이 이만큼이 벌어지는거예요.

이처럼 왼쪽 div를 가 라고 치고 오른쪽 div를 나 라고 친 격이라고 생각하고 대안책을 보자면...두둥!display:inline;을 사용하면 됩니다. 같은 라인상에 놓겠다(display 하겠다)라는 말이거든요.
그럼 소스상으로 예를 들어 볼게요ㅎㅎ

저는 div 세개를 가지고 이미지를 배열할건데, 하나는 위에 가로로, 나머지 두개는 아래에 왼쪽과 오른쪽으로 배치해서 이미지를 보여줄 거예요.? 대충 아래의 표와 같은 모양이죠ㅎ

main_top.jpg
main_bottom_left.jpgmain_bottom_right.jpg

 

<html>
   <head>
      <title>SK n MI</title>
      <style>
         * {
              margin:0px;
              padding:0px;

            }
      </style>
   </head>
   <body>
      <div><img src="images/main_top.jpg" border=0 /></div>
      <div>
         <div style="display:inline; width:541px;"><img src="images/main_bottom_left.jpg" border=0 />
         </div>
         <div style="display:inline; width:473px;"><img src="images/main_bottom_right.jpg" border=0 />
         </div>
      </div>
   </body>
</html>


출처 : http://seulkisr.tistory.com/entry/%EB%AF%B8%EB%AF%B8%EC%9B%94%EB%93%9C-div-%EA%B0%80%EB%A1%9C%EC%A0%95%EB%A0%AC%ED%95%98%EA%B8%B0

'프로그래밍 > HTML5' 카테고리의 다른 글

와이어프레임 제작 도구 7가지  (0) 2013.08.14
HTML5 Full Screen API 간단 구현(풀스크린)  (0) 2012.07.27
Drag & Drop (드래그 앤 드롭)(2)  (0) 2012.03.22
Drag & Drop (드래그 앤 드롭)(1)  (0) 2012.03.22
스토리지 (Storage) sessionStorage, localStorage  (0) 2012.03.22
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함