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

 

div 만드는 법

 

 

<div> 내용 </div>

 

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

 

 

함께 사용할 수 있는 속성

 

접기

width 너비

height 높이

margin 객체와 객체 사이의 공간 (여기서는 박스를 정렬할 때 사용하기도 함)

padding 선과 내용사이의 공간

text-align 박스 안에 있는 요소의 가로 정렬(left, right, center, justify 가 있음)

vertical-align 박스 안에 있는 요소의 세로 정렬

 (단, line-height 값도 같이 지정해주어야 함, line-height값은 박스 높이와 같은값)

border 선 굵기, 선 형태, 선 색 지정

background-color: 배경색 지정

 

접기

 

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개 정렬하기 (오른쪽, 왼쪽, 중앙 정렬)