CSS 입문 | CSS 위치 속성 | 정렬 (align)

Tags:

정렬(align)

블록(block) 타입의 요소를 정렬하기 위해서는 다음과 같은 방법을 사용할 수 있다.

  1. margin 속성을 이용한 가운데 정렬
  2. position 속성을 이용한 좌우 정렬
  3. float 속성을 이용한 좌우 정렬

margin 속성을 이용한 가운데 정렬

margin 속성값을 auto로 설정하면, 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬이 된다.

이때 해당 요소는 특정한 너비를 가져야 하며, 너비를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백으로 만들어진다.
따라서 이 방법을 사용하기 위해서는 반드시 해당 요소의 width 속성값을 먼저 설정해야만 한다.

<style>
    div { width: 300px; margin: auto; }
</style>

익스플로러 8과 그 이전 버전에서는 HTML 문서에 태그가 삽입되어 있어야 margin 속성이 제대로 표현된다.

position 속성을 이용한 좌우 정렬

절대 위치 지정 방식으로 위치한 요소는 정상적인 레이아웃에서 벗어나 다른 요소와 겹칠 수 있게 된다. 따라서 이 특성을 이용하면 HTML 요소를 수평 방향으로 좌우 정렬할 수 있다.

position 속성을 이용하여 정렬할 경우에는 <body>요소에 margin과 padding 속성값을 설정하는 것이 좋다.
이렇게 함으로써 웹 브라우저마다 레이아웃이 다르게 보이는 것을 미리 방지할 수 있다.

<style>
    div { width: 300px; padding: 10px; margin: 0; position: absolute; right: 0; }
</style>

익스플로러 8과 그 이전 버전에서는 HTML 문서에 <!DOCTYPE html>태그가 삽입되어 있어야 position 속성이 제대로 표현된다.

float 속성을 이용한 좌우 정렬

float 속성을 이용하면 수평 방향으로 좌우 정렬할 수 있다.

float 속성을 이용하여 정렬할 경우에는 <body>요소에 margin과 padding 속성값을 설정하는 것이 좋다. 이렇게 함으로써 웹 브라우저마다 레이아웃이 다르게 보이는 것을 미리 방지할 수 있다.

<style>
    div { width: 350px; padding: 10px; margin: 0; }
    div.left { float: left }
    div.right { float: right }
</style>

익스플로러 8과 그 이전 버전에서는 HTML 문서에 <!DOCTYPE html> 태그가 삽입되어 있어야 float 속성이 제대로 표현된다.




최종 수정 : 2021-08-27