html 가운데 정렬 방법은 html 문서의 레이아웃을 잡는데 많이 쓰이는데 정말 다양한 방법이 있다. 이 방법들을 모두 알 필요는 없는데 이것은 마치 서울역에서 용산역까지 가는 방법과 마찬가지기 때문이다. 아마 서울역에서 미국까지 갔다가 다시 한국으로 와서 용산역까지 가는 것도 하나의 방법일 수 있기 때문이다.
html 상에서 가운데 정렬을 하는 것은 브라우저를 기준으로 잡던지, 아니면 부모요소를 기준으로 잡던 기준이 되는 요소 내부 공간의 중앙에 표시하는 것이다. 따라서 어떤 방법을 쓰던지 가운데에 위치만 시키면 되기 때문에 다양한 방법이 존재한다.
모든 방법을 다 나열할 수는 없겠지만 그래도 가장 심플하고 최적화된 방법이라 생각되는 것들 몇가지만 정리하려고 한다.
html/css 가운데 정렬
가운데 정렬 방법에는 수평선 상에서 중앙에 정렬하는 방법과 수직선 상에서 중앙에 위치하는 방법, 그리고 수직과 수평선 내에서 모두 중앙 정렬하는 방법이 있다.
수평 정렬은 그냥 단순히 center 태그로 둘러 쌓아주면 되므로 매우 간단하지만 수직 정렬은 까다롭다.
우선 아무런 정렬도 하지 않은 html 문서로 시작하겠다.
컨테이너가 되는 div 태그의 background-color를 노란 색으로 했으며 내부에 2개의 div 태그가 있는 형태다. div 태그는 기본 display:block; 속성이므로 한줄에 하나씩 배치되는 점도 눈여겨 보도록 하자.
수평정렬
아무튼 이 상태에서 center태그를 주는 것 만으로 수평정렬이 가능하다.
가운데 정렬임을 정확히 테스트하기 위해 id가 item인 녀석들의 width를 container의 50%로 만들도록 하겠다.
그런데 center 태그는 내부의 div 태그 내에 있는 텍스트까지 중앙정렬을 시킨다. 이를 없애려면 text-align:left를 해주면 되겠다.
그런데 위 방법은 뭔가 비효율적으로 보인다. 따라서 수평 정렬을 하는데 가장 유명한 방법을 소개하겠다.
margin: 0 auto;
magin : 0 auto 0 auto; 와 동일하며 이 방법은 수평정렬을 하는 가장 간단한 방법이므로 그냥 구문처럼 외워두자.
앞의 코드에서 center 태그를 제거하고 css의 text-align:left;도 제거하자. 그리위 위 코드를 내부 div에 적용해보자.
단, 이 방법에서 주의할 점은 중앙 정렬할 요소의 width 값을 적절하게 조절해 줘야 한다는 것이다.
결과는 이전과 동일하다.
만약 여기에서 내부 텍스트를 정렬하고 싶다면 그때가서 text-align 속성을 주면 될 것이다.
position, transform 속성 사용하기
CSS의 transform 속성은 요소의 위치를 변경하는데 1차원 이동, 2차원 이동, 3차원 이동까지 가능하다. 이동 방법은 행렬을 통한 변환이라고 생각하면 되는데 여기에서는 1차원 이동을 하므로 깊은 설명은 생략한다.
이 속성은 단순히 위치를 옮긴는 것이므로 생각보다 간단하다. 하지만 이 속성을 쓰기전에 사전 조건이 있는데 transform속성을 사용하려는 요소는 position 속성이 relative가 되어야 한다. (참고 : 모든 요소의 position 속성은 static이 기본이다.)
이렇게 position 속성을 relative로 주면 top, left, right, bottom 속성으로 자신의 원래(현재) 위치로 부터 상대적인 위치를 지정할 수 있다. left:10px;이라고 하면 자신의 원래(현재)위치에서 오른쪽으로 10px만큼 이동한다. 전달값을 %로 할 때 100%를 자신의 부모의 가로 또는 세로 길이가 된다. 따라서 위 코드는 부모 요소의 가로 너비의 절반만큼 오른쪽으로 이동하라는 뜻이다.
그런데 이동 결과를 보면 정 중앙이 아니고 왼쪽 위 모서리가 정중앙에 위치한다. 왼쪽 위 모서리가 아닌 자신의 가로 너비의 중앙 지점이 중앙으로 와야 하므로 transform 속성으로 다음과 같이 왼쪽으로(-x축 방향) 이동시키도록 한다.
이 상태에서 transform : translateY( ) 속성을 사용하여 열 방향으로 중앙정렬도 가능하다. 이 부분은 직접 해보길 바란다. 주의할 점은 요소의 개수에 따라서 translateY(?)에 들어가는 수치가 달라지게 된다는 것이다.
수직정렬 연속배치
그런데 어떤 경우는 "안녕"과 "만나서 반가워"를 같은 줄에 연속으로 배치시키길 원할 수도 있다. 이런 경우 가운데 정렬은 수평정렬은 큰 의미없고 수직정렬을 해야 한다.
우선 div 요소를 같은 줄에 배치시키는 방법은 display:block; 속성을 없애는 것과 float 속성을 주는 방법이 있다. 우선 display : inline; 또는 display : inline:block;을 주는 방법은 다음과 같이 요소간에 알수없는 간격이 생긴다는 단점?이 있다.
inline-block 으로 해도 마찬가지다. 차이점은 inline 속성은 width, height 속성이 없기 때문에 위와 같이 width 속성이 적용되지 않는 것이다.
따라서 float 속성을 사용해보기로 해보겠다.
이 상태에서 수직 정렬을 해보도록 하겠다.
앞에서 배운 transform을 이용하면 되는데 방법은 동일하다.
수평, 수직 가운데 정렬 동시에 하기
사실 transform을 사용해서 수평, 수직 두 방향을 동시에 중앙 정렬하기에는 까다로운 구석이 있다. 위 예에서 수평 중앙 정렬을 추가해 보고 요소의 개수를 하나씩 늘려보면 왜 까다로운지 알 수 있을 것이다.
그래서 필자가 사용하는 방법을 소개한다. 이 방법은 flex를 사용하는 방법인데 브라우저에 따라서 표시가 달라보일 수 있으니 확인하도록 하자. 필자의 경우는 큰 문제는 없었다.
정렬시킬 요소을 감싸는 부모를 하나 더 만들어 그룹으로 만든 후에 flex를 사용하여 가로 세로 중앙 정렬을 한 것이다.(flex 대신 앞에서 설명한 transform 속성을 사용할 수도 있음.)
이 때 내부 요소에 float 속성을 주면 한 줄로 배치시킬 수도 있다.
html 가운데 정렬을 하는 방법은 워낙 다양해서 소스해석을 위해서라도 눈여겨 볼 필요가 있다.