티스토리 뷰

transform 속성을 이용한 중앙정렬


transform 속성은 css3 속성으로 특정 대상을 이동하거나 크기를 줄일수도 있고 회전하는 등의 다양한 시각적 효과를 부여한다. 만약 기존의 css 코드에 transform 속성을 추가하면 아래와 같은 코드를 완성할 수 있을 것이다.
아래의 코드는 해당 요소 크기의 절반(50%)를 좌측으로 다시 이동시키며 완벽한 중앙 정렬을 가져올 수 있을 것이다.

1
2
3
4
5
6
7
8
9
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cs


이 방법을 사용할 때 주의할 점이 있다... 화면에 의도하지 않은 선이나 여백이 나타날 수 있는데 이는 원래의 요소 크기가 홀수인 경우 발생한다... 이미지가 홀수인 경우에는 소수점 자리가 나타나므로 반드시 원래 이미지를 짝수로 만드는 것이 좋다. 개인적으로 모든 고정된 요소에 값을 부여할 때 짝수값을 주는데 이런 습관이 도움이 될 수도 있다.


저작자 표시 비영리 변경 금지
신고
댓글쓰기 폼
1 2 3 4 5 6 7 8 ··· 73