Web Publishing: '가운데 정렬'하는 방법 3가지

웹 퍼블리싱: 가운데 정렬 하는 방법

---

CSS를 하다보면 가운데 정렬 시키는 방법들이 정말 다양하다는 것을 알 수 있다. 그런데 종종 가운데 정렬이 생각한대로 적용이 잘 안될 때가 있어서 답답할 때가 있다. 헷갈리기도 하고...

내가 가운데 정렬 시킬 때 쓰는 방법은 총 3가지인데, 공부할 겸 어떤 상황에 어떤 방식을 사용해야 하는지 정리해보려고 한다!

 

 

가운데 정렬 하는 방법 3가지

• text-align: center;
• margin: auto 0;
• transform: translate(X, Y);

---

text-align: center;

: text의 정렬을 뜻하고, 'center'는 텍스트를 가운데에 정렬을 시킨다는 뜻이다.

 

말 그래도 '텍스트'만 가운데 정렬 시키는 방법이다. text-align를 적용하면 자신 뿐만 아니라 자식 태그 안에 있는 텍스트들도 모두 영향을 받는다.

 

<div> 
      life is like this
      <p>life is like this</p>
</div>

예를 들면, 위와 같이 html 구조를  짰을 때, <div>에 'text-align: center;' 스타일을 적용하면 위 그림과 같이 <div>와 <div>의 자식 태그로 있는 <p>에 있는 텍스트가 모두 가운데 정렬이 된다.

 

 

 

<div>가 아닌, 자식 태그인 <p>에 'text-align: center;' 스타일을 적용하면, <p>의 텍스트만 가운데 정렬이 된다. 가운데 정렬을 시키고 싶은 텍스트들이 있다면 텍스트들을 감싸고 있는 태그들의 구조를 잘 확인해야한다.

---

margin: 0 auto;

: margin 설정 시, 상 하는 0px, 좌 우는 자동(auto)으로 한다, 라는 뜻으로 좌우 기준(X축)으로 가운데 정렬을 시키는 방법이다. 

 

이때 주의할 점은 가운데 정렬 시키려는 영역의 크기가 꼭 설정이 되어야한다. 

 

01. html

<div> 
      <p>life is like this</p>
</div>

 

02. CSS

div{
      width: 500px;
      height: 300px;
}

p{
      width: 300px;
      height: 180px;
      margin: 0 auto;
}

위와 같이 <p>의 크기를 설정한 후 'margin: 0 auto;' 스타일을 적용하면 <p>영역이 <p>의 부모 태그 영역인 <div> 내 가운데 정렬이 된다. X축 기준으로 가운데 정렬할 때 정말 많이 사용하는 방법이다^^!

---

transform: translate(X, Y)

: transform 으로 다양한 속성을 변경시킬 수 있는데, 가운데 정렬하는 방법으로 'translate' 속성을 소개한다. translate(X, Y)의 값은 각각 X축, Y축으로 해당 값만큼 위치를 바꾼다는 뜻이다. 

 

이 방법을 설명하기 위해서는 먼저 살펴봐야할 부분이 있다.

 

잘못된 예

01. html

<div> 
      <p>life is like this</p>
</div>

02. CSS

div{
      width: 500px;
      height: 300px;
      position: relative;
}

p{
      width: 300px;
      height: 180px;
      position: absolute;
      top: 50%;
      left: 50%;
}

<div> 영역 안에 있는 <p>를 <div> 내에서 가운데에 위치시키고 싶을 때, 단순히 position을 absolute 한 후, top과 left를 50%로 설정하는 오류를 범하게 된다.

 

이게 무슨 말인지, 위 CSS를 설명을 하자면,

 

position: absolute; 는 position: relative; 인 바로 위 부모 태그 <div>를 기준으로 위치를 설정하겠다는 뜻이다. 그래서 <p>는 부모 태그인 <div> 영역을 안에서만 위치를 정할 수 있다.

position을 설정한 후 top, left 값을 정하면, <div> 영역 내 기준으로 위(top)와 왼쪽(left)에서부터 해당 값만큼 떨어진 곳에 <p>를 위치시킨다는 뜻이다.

 

여기서 <p>를 <div> 영역의 정 가운데로 위치를 바꾸고 싶을 때, 위와 같이 top과 left를 50% 값으로 정하면 되지 않을까 생각할 수 있지만 정확한 방법이 아니다. <p>태그의 왼쪽 상단에 있는 꼭지점을 기준으로 <div>의 50%만큼의 위치로 이동하기 때문이다. (위 그림 참고)

이런 오류를 방지하기 위해서 <div>와 <p>의 width, height를 계산해서 정가운데에 오도록 특정 값을 넣을 수도 있지만, 일단 계산을 한다는 것 자체가 복잡하고 결정적으로 추후 <div>와 <p>의 크기가 바뀔 경우 또 수정을 해야한다는 번거로움이 생긴다.

이러한 문제 없이 딱 한줄만 추가하면 간단하게 정가운데로 위치시킬 수 있다.

 

 

 

03. CSS - transform 추가

div{
      width: 500px;
      height: 300px;
      position: relative;
}

p{
      width: 300px;
      height: 180px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); /*추가*/
}

<p>에  'transform: translate(-50%, -50%);'를 추가한다. <p>의 width, height의 50%만큼 X축, Y축의 마이너스 방향으로 위치를 옮기겠다 뜻이다. 

 

만약 상 하가 아니라 좌 우만 가운데정렬 시키고 싶다면, 위 CSS에서 'top:50%;'를 빼고, 'transform: translateX(-50%);'라고 수정해주면된다. (상 하로 중앙 정렬 시키고 싶다면, 반대로 'left:50%;'를 빼고 'transform: translateY(-50%);'로 바꾸면 된다.)

 

해보지 않으면 무슨말인지 이해하기 어려울 수도 있는데... 공식처럼 외워버리면 간단하다^^; 위 코드를 그대로 복사해서 사용하면 된다!

이렇게 하면 <p>의 크기를 변경하더라도 위치는 항상 가운데에 위치하게 된다!

---

디스플레이가 다양해진만큼 가운데 정렬을 할 때 특정 값을 넣기보다는 크기 상관없이 가운데 정렬될 수 있는 방법들을 사용하는 것이 필요하다. PC, Mobile 디바이스를 고려하지 않는 것만으로도 제작하는 입장에서 얼마나 편한가. 도움이 되길 바란다!

---

by.liis (life is like this)