[html/css] div 2개 정렬하기 (오른쪽, 왼쪽, 중앙 정렬)

 

 

[html/css] div 2개 정렬하기 (오른쪽, 왼쪽, 중앙 정렬)

 

 

얼마 전에 div 1개 정렬하는 방법을 알아 보았습니다.

 

[html/css] div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬)

 

이번 시간에는 div 2개 정렬하는 방법에 대해 알아 볼게요.

 

 

div가 2개일 때는 조금 더 복잡합니다.

 

2개 이상의 div는 문장 속에 삽입되는 경우도 있지만, 대부분은 레이아웃을 할 때 자주 사용되지요

 

그래서, 예제도 레이아웃 중심으로 배워 보겠습니다.

 

 

 

 STEP 0. 브라우저 기본값 초기화하기(reset)

 

 

각 브라우저마다 기본값이 달라, 여백에 약간씩의 오차가 발생하는데..

 

브라우저 기본값의 초기화 리셋(reset.css)의 개념

 

모든 브라우저에서 통일된 화면을 볼 수 있도록 초기화(reset) 하는 과정이 필요합니다.

 

 

body{

padding: 0px;

margin: 0px;

}

 

 

 

 STEP 1. 레이아웃 그리기

 

div 2개를 따로 따로 움직이기보다, 이 2개를 하나의 div로 묶어서 정렬하면 더 편리합니다.

(아래 그림 참조)

 

 STEP 2. div 이름 정하기

 

직관적으로 알아듣기 쉬운 이름으로 정합니다.

단, 숫자로 시작하지 않음

 

예)

본문 : contents

사이드바 : sidebar

둘러싸는 div : wrapper

 

 

 STEP 3. 너비, 높이, margin, padding, border 값 정하기

 

저는 티스토리에서 사용되는 가장 표준적인 크기로 정했습니다.

본문 width 800px

사이드바 width 200px

height는 글에 따라 상대적으로 높이가 정해지도록, 따로 지정하지 않았고요.

박스 내용 과 선 사이 여백 10px

객체와 객체 사이 여백 10px

선은 1px로 지정

 

 

 STEP 4. 레이아웃 위치 지정

 

상단은 10px, 가로 화면은 중앙 정렬를 해보겠습니다.

 

html 파일 다운 받아 사용하세요

 

two divs.htm

 

 

 

 

(1) html 작성

 <!DOCTYPE html>
<html>
 <head>

</head>

<body>

 


<div id="wrapper">
  <div id="contents">
  본문
  </div>
  <div id="sidebar">
  사이드바
  </div>
</div>

 

</body>
</html>

 

 

(2) css 작성

 

#wrapper{
border: 1px solid #FFBB00;
width:1054px;
padding: 10px;
position: absolute;
top: 10px;
left: 50%;
margin-left: -533px;
overflow: hidden; 

}


#contents{
border: 1px solid #487BE1;
width:800px;
float: left;
padding: 10px; 

}


#sidebar{
border: 1px solid #487BE1;
width:200px;
float: left;
padding: 10px;
margin-left: 10px;

}

 

 

셜명☞

 

#wrapper는 주황색 선으로 그렸고 border: 1px solid #FFBB00;

#contents와 #sidebar는 파랑색 선으로 그림. border: 1px solid #487BE1;

#contents 너비는 800px #sidebar 너비는 200px 지정 

#contents와 #sidebar는 float: left로 위치시킴(float 속성을 적용하지 않으면, 사이드바가 옆에 붙지 않으므로...)

박스 안의 내용과 박스 사이의 padding 간격 10px을 줌

#sidebar에서 margin-left 10px는 #contents와의 거리 확보

overflow: hidden은 글이 넘치면 보이지 않도록 설정함

 

border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)

 

[css 기초] float 속성에 대하여

 

margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법)

 

padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom)

 

oveflow 속성 (oveflow: visible, hidden, scroll, auto 차이)

 

 

 

div 중앙 정렬 방법!

 

div 가운데 정렬 방법은 일단 wrapper를 정 중앙에 위치시킨후, 다시 margin-left로 wrapper의 너비의 반값을 빼는 것입니다.

 

position 속성으로 정렬하기 (static, relative, absolute, fixed 차이) 참조

 

공식

position: absolute;

top: 10px;                              상단 위치 수정 가능

left: 50%;

margin-left:  - wrapper width/2 

 

*wrapper 너비를 구하는 공식은: wrapper width+좌우padding+좌우margin+좌우border

(위에서 작성한 css를 기준으로 하면1054px+ 20px + 2px = 1076px)

margin-left: -538px;

 

실행 화면입니다. 원하는대로 가운데 정렬되었죠?

 

 

 

div 왼쪽 정렬 방법

 

#wrapper position에서 left 왼쪽 여백을 지정해주면 됩니다.

 

#wrapper{
border: 1px solid #FFBB00;
width:1054px;
padding: 10px;
position: absolute;
top: 10px;
left:10px;
overflow: hidden;
}

 

 

div 오른쪽 정렬 방법

 

#wrapper position에서 right 오른쪽 여백을 지정해주면 됩니다.

 

#wrapper{
border: 1px solid #FFBB00;
width:1054px;
padding: 10px;
position: absolute;
top: 10px;
right:10px;
overflow: hidden;
}

 

 

div 안에 있는 내용(문자나 이미지)을 정렬하는 방법

 

text-align 속성을 사용하면 됩니다.

text-align은 블록 요소 안에 있는 인라인 요소를 정렬하는 속성임

 

 

 

 

 

지구별에
css 2014.04.23 15:21
Powerd by Tistory, designed by criuce