css align 정렬

정렬(align)

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

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

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

• 이때 해당 요소는 특정한 너비를 가져야 하며, 너비를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백으로 만들어집니다.

• 따라서 이 방법을 사용하기 위해서는 반드시 해당 요소의 width 속성값을 먼저 설정해야만 합니다.

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

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

1. position 속성을 이용한 좌우 정렬

• 절대 위치 지정 방식으로 위치한 요소는 정상적인 레이아웃에서 벗어나 다른 요소와 겹칠 수 있게 됩니다.

• 이 특성을 이용하면 HTML 요소를 수평 방향으로 좌우 정렬할 수 있습니다.

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

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

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

1. float 속성을 이용한 좌우 정렬

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

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

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

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