[HTML, CSS] 여러가지 정렬 방법

이번 글에서는 CSS에서 사용할 수 있는 여러가지 정렬 방법에 대해서 설명하겠습니다. 

 

먼저 가로축을 기준으로 정렬하는 방법들입니다.

 

1-1) 요소 자체를 가운데 정렬

display 속성이 block인 요소들은 margin: auto;를 사용하여 가로축에서 가운데 정렬을 할 수 있습니다. 요소의 너비를 제외한 공간이 좌우로 나뉘어지기 때문에, width 속성이 설정되지 않거나 100% 이상일 경우에는 적용되지 않습니다. 

 

margin:auto;로 요소를 가운데 정렬

 

1-2) 요소 내부의 텍스트 가운데 정렬

요소 안에 있는 텍스트를 가운데 정렬하기 위해서는 text-align: center;를 사용하면 됩니다. 

 

text-align: center;로 텍스트 가운데 정렬

 

1-3) float 속성 사용

float 속성을 사용하여 왼쪽 정렬이나 오른쪽 정렬을 할 수 있습니다. 속성 값은 left, right, inline-start, inline-end, none 등을 사용할 수 있습니다. left와 right은 각각 왼쪽과 오른쪽 정렬을 뜻하며,  inline-start와 inline-end는 각각 요소가 자신을 포함하는 블록의 시작이나 끝 부분에 위치하게 됩니다. none은 디폴트 값으로 정렬되지 않고 코드에서 정해진 위치에 표시가 됩니다. 

* float 속성 사용시 다른 요소들에 영향을 줄 수 있기 때문에, float 속성을 사용하는 요소 이후에 등장하는 요소에 clear 속성을 사용하여 영향을 받지 않게 할 수 있습니다.

** float 속성을 사용한 요소의 컨테이너 요소에 overflow 속성을 사용해서 요소들이 넘치지 않게 할 수 있습니다. 다음 예시에서는 컨테이너 요소에 overflow: auto;를 적용하였습니다. 

 

Box 1
float: left;

Box 2
float: right;

 

1-4) position 속성 사용

position 속성을 사용해서 원하는 위치에 요소를 지정 및 정렬할 수 있습니다. 자세한 내용은 다음 글을 참고하시길 바랍니다. 

[HTML, CSS] position 속성

 

---

다음은 세로축을 기준으로 정렬하는 방법입니다. 

 

2-1) padding 속성 사용

padding 속성을 통해서 요소 내부를 정렬할 수 있습니다. 속성 값으로는 1개에서 4개의 값을 지정할 수 있습니다. 

- 속성 값이 1개일 경우 : 상하좌우의 여백을 모두 지정합니다.

- 속성 값이 2개일 경우 : 순서대로 상하의 여백과 좌우의 여백을 지정합니다. 

- 속성 값이 3개일 경우 : 순서대로 윗 여백, 좌우 여백, 아래 여백을 지정합니다.

- 속성 값이 4개일 경우 : 순서대로 상, 우, 하, 좌 여백을 지정합니다. (시계 방향으로 생각하면 쉽습니다.) 

 

padding: 30px 0px;으로 설정된 요소

 

2-2) line-height 속성 사용

line-height의 속성 값을 height 속성 값과 동일하게 설정하면 요소 내부는 세로로 가운데 정렬이 됩니다. 

 

line-height: 100px;으로 설정된 요소

 

2-3) transform 속성 사용

position: absolute;와 transform: translate(-50%, -50%);(요소의 위치를 이동시킴)를 사용해서 요소 내부를 가운데 정렬할 수 있습니다. 

 

transform: translate(-50%, -50%):으로 설정된 요소

 

2-4) Flexbox 사용

Flexbox를 사용해서 요소들을 정렬할 수 있습니다. 관련 내용은 다음 글들을 참고하시길 바랍니다. 

 

[HTML, CSS] 플렉스(Flex) 레이아웃 - 컨테이너 편

 

[HTML, CSS] 플렉스(Flex) 레이아웃 - 아이템 편