레이어 중앙정렬

Posted by in Research

조은입니다.
CSS만 사용하여 레이어를 중앙정렬 하는 몇가지 테크닉을 소개한다.

Margin을 이용하는 방법

결과 : {codepen 링크}

장점

예로부터 자주 쓰인 방법으로 모든 브라우저에서 원활히 지원한다

단점

레이어의 사이즈가 유동인 경우 활용하기가 어렵다.

Transform을 이용하는 방법

결과 : {codepen 링크}

장점

레이어의 사이즈가 유동인 경우에도 쉽게 활용할 수 있다.

단점

IE8 이하에서는 제대로 동작하지 않는다

구버전 안드로이드에서 성능 저하를 야기할 수 있다. (이 경우 Translate3d도 활용할 수 있다)

Position을 이용하는 방법

클리어보스 @이재호님 제보

결과 : {codepen 링크}

장점

레이어의 사이즈가 유동이어도 잘 돌아감.

다른 여러 방법이 있을 거라 생각하는데 더 연구를 해보아야 할 듯 하다.
여러 속성들을 조화롭게 사용하는 것이 웹개발의 기본 아닐까.