정렬
정렬(align)
블록(block) 타입의 요소를 정렬하기 위해서는 다음과 같은 방법을 사용할 수 있습니다.
1. margin 속성을 이용한 가운데 정렬
2. position 속성을 이용한 좌우 정렬
3. float 속성을 이용한 좌우 정렬
margin 속성을 이용한 가운데 정렬
margin 속성값을 auto로 설정하면, 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬이 됩니다.
이때 해당 요소는 특정한 너비를 가져야 하며, 너비를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백으로 만들어집니다.
따라서 이 방법을 사용하기 위해서는 반드시 해당 요소의 width 속성값을 먼저 설정해야만 합니다.
position 속성을 이용한 좌우 정렬
절대 위치 지정 방식으로 위치한 요소는 정상적인 레이아웃에서 벗어나 다른 요소와 겹칠 수 있게 됩니다.
따라서 이 특성을 이용하면 HTML 요소를 수평 방향으로 좌우 정렬할 수 있습니다.
position 속성을 이용하여 정렬할 경우에는 <body>요소에 margin과 padding 속성값을 설정하는 것이 좋습니다.
이렇게 함으로써 웹 브라우저마다 레이아웃이 다르게 보이는 것을 미리 방지할 수 있습니다.
예제
<style>
div { width: 300px; padding: 10px; margin: 0; position: absolute; right: 0; }
</style>
float 속성을 이용한 좌우 정렬
float 속성을 이용하면 수평 방향으로 좌우 정렬할 수 있습니다.
float 속성을 이용하여 정렬할 경우에는 <body>요소에 margin과 padding 속성값을 설정하는 것이 좋습니다.
이렇게 함으로써 웹 브라우저마다 레이아웃이 다르게 보이는 것을 미리 방지할 수 있습니다.
예제
<style>
div { width: 350px; padding: 10px; margin: 0; }
div.left { float: left }
div.right { float: right }
</style>
