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

 

 

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

 

 

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

 

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

 

 

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

 

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

 

[html/css기초] span, div

 

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

 

 

 

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 작성파일 필요하시면 다운 받아 이용하세요

 

 

내용

 

 

 

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

 

위에서는 margin으로 auto를 해주었는데, 이 글을 작성하는 화면에서는 중앙 정렬돼 보이지 않습니다....

 

하지만 글을 등록 후 다시 보면 중앙 정렬된 것을 확인이 가능한데요.

 

margin: auto 속성 같은 경우는 doctype 선언을 해 주어야 하는데, 이 글을 작성하는 html 안에는 doctype이 선언돼 있지

 

않습니다.. 하지만 티스토리 스킨 자체에는 doctype이 선언돼 있으므로 완성된 화면에서는 중앙 정렬이 되는 것입니다..

 

 

 

 

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

 

내용 이라는 글자를 빼고 <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개 정렬하기 (오른쪽, 왼쪽, 중앙 정렬)