본문 바로가기
css

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

by 지구별에 2014. 4. 15.

 

 

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

 

 

div 태그는 하나 이상의 태그를 마치 그릇처럼 담아서 여러 스타일을 주기에 편리합니다.

 

즉 div는 여러 요소를 담는 박스라고 보시면 됩니다.

 

 

보통 div 1개를 쓰는 경우는 글 속에 삽입하는 경우가 많으므로, 

 

css 작성은 인라인 스타일로 작성했습니다.

 

[html/css기초] span, div

 

CSS란? (HTML과 CSS의 차이, CSS 작성법)

 

 

 

 div 만드는 법

 

 

<div> 내용 </div>

 

여는 태그와 닫는 태그 사이에 내용을 넣으면 됩니다.

 

 

함께 사용할 수 있는 속성

 

 

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)

 

text-align 속성으로 정렬하기 (left, right, center, justify)

 

 

 

 

 div 로 박스 만들기 연습

 

우선 너비 340px 높이 285px의 간단한 박스를 만들어 보겠습니다.

 

<div style="border: 1px dashed #BDBDBD; width: 340px; height: 285px;"> 내용 </div>

 

border: 1px dashed #BDBDBD 선굵기, 선모양, 선색상 순임.

 

선을 지정하지 않으려면 border: none;

      

 

내용

 

가장 기본 박스입니다....

 

이제 이 박스를 왼쪽, 중앙, 오른쪽 정렬해보겠습니다.

 

아래 예제에서는 빈박스에 이미지를 넣어 보았습니다.

 

 

 div 왼쪽, 중앙, 오른쪽 정렬하기

 

 

(1) div 왼쪽 정렬하기(기본값)

 

왼쪽은 기본 값으로, 아무런 설정을 하지 않으면 이렇게 나옵니다.

 

 

 

(2) div 왼쪽 정렬하기( float: left )

 

 

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

float 속성을 사용하면 글자가 div를 둘러싼 형태가 됩니다.

 

사용 예:

<div style="border: 1px dashed #BDBDBD; width: 340px; height: 285px; float: left;"> 내용 </div>

 

 

 

 (3) div 오른쪽 정렬하기( float: right)

 

사용 예:

<div style="border: 1px dashed #BDBDBD; width: 340px; height: 285px; float: right;"> 내용 </div>

 

 

 

 (4) div 오른쪽 정렬하기( float: right)

 

div 아래로 글자가 줄바꿈 되길 원하면 밑에 속성에 float를 취소하는 속성(clear)을 적용해야 합니다.

 

예:

 

<div style="border: none; background-color: #D1B2FF; width: 340px; height: 285px; float:right;
  padding: 5px;  text-align: center; line-height: 285px; vertical-align:middle;"> <img src="leaf.png" style="width: 337px; height: 280px;"> </div>

<p style="clear:both;">&nbsp;</p>


 

 clear 속성에 대해 배워 보자 (clear:none, right, left, both)

 

 

 

 

 

 (5) div 가운데 정렬하기

 

float엔 가운데 정렬 속성이 없기 때문에 margin 값으로 조정합니다.

 

margin: auto; 혹은 margin-right: auto; margin-left: auto;

 

사용 예:

<div style="border: 1px dashed #BDBDBD; width: 340px; height: 285px; margin: auto;"> 내용 </div>

 

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

 

 

 

 

 div 에 다양한 속성 적용하기

 

 

이제 여기에 배경색도 넣고,  박스 안에 있는 내용을 가로 세로 중앙 정렬해 보겠습니다.

 

사용 예:

<div style="border: 1px dashed #BDBDBD; background-color: #D1B2FF;  width: 340px; height: 285px; margin-left: auto; margin-right: auto; padding: 5px; text-align: center; line-height: 285px; vertical-align:middle;"> 내용 </div>

 

1 div 정렬하기.htm←html 작성파일 필요하시면 다운 받아 이용하세요

 

 

내용

 

 

 

글 작성시 박스가 중앙 정렬되어 보이지 않는다?

 

 

 

 

이번엔 내용에 이미지를 넣어보겠습니다.

 

내용 이라는 글자를 빼고 <img>태그를 넣어주면 됩니다. width와 height 속성도 같이 지정해주고요.

 

<div style="border: 1px dashed black; background-color: #D1B2FF; width: 340px; height: 285px;
 margin-left: auto; margin-right: auto; padding: 5px; text-align: center; line-height: 285px; vertical-align:middle;"> <img src="leaf.png" style="width: 337px; height: 280px;"> </div>

 

 

 

 

이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법)

 

[html/css] 수직으로 가운데 정렬 방법 (다섯 가지)

 

[html/css] 화면 상단/하단에 애드센스 광고 1개 넣기

 

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

 

반응형

댓글