[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>
<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 사용법)
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' 카테고리의 다른 글
| [html/css] 글꼴을 지정하는 font 속성 배우기 (1) | 2014.05.04 |
|---|---|
| [html/css] 스타일 적용 우선 순위와 속성 강제 적용 !important (1) | 2014.04.24 |
| [html/css]브라우저 기본값의 초기화 리셋(reset.css)의 개념 (1) | 2014.04.21 |
| [html/css] div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬) (0) | 2014.04.15 |
| [html/css] table 중앙 정렬하기 (1) | 2014.04.12 |
댓글