Hello World

최고의 CSS 중앙정렬 기법 본문

HTML/CSS/Core

최고의 CSS 중앙정렬 기법

EnterKey 2016. 5. 4. 15:14
반응형

크리스 코이어(Chris Coyer)는 최근에 자신의 사이트인 CSS Tricks에 올린 상황별 CSS 중앙정렬 방법을 정리한 글을 통해 CSS를 이용해 뭔가를 가로 및 세로로 중앙정렬하는 방법이 너무나도 많다는 사실을 보여줬습니다. 각 중앙정렬 방법은 모두 저마다 주의할 점이 있지만 그러한 방법들을 조합하면 IE8 및 이후 버전에서도 일관되게 크로스 브라우징을 지원하는 막강한 중앙정렬 기법을 만들어낼 수 있습니다.

이제 본격적으로 어떻게 하는지 살펴보겠습니다.

응답형 웹사이트를 제작하고 있다면 대부분 요소의 크기를 퍼센트로 지정할 것이며, 여기서는 임의의.container 요소를 만듭니다.

컨테이너 요소가 적절히 늘려질 수 있도록 html, body { width: 100%; height: 100%; }로 지정합니다.

이제 .container 안에서 자주 사용되는 테이블 패턴을 이용해 수직 중앙정렬을 하겠습니다. 이렇게 하려면 일반 블록 레벨 요소가 필요하고, 그것들이 테이블 셀처럼 동작하게 만들면 수직 중앙정렬이 가능해집니다.

끝으로 수평 중앙정렬된 요소를 추가합니다.

이 안에는 높이가 동적으로 변하는 텍스트 블록이나 절대 위치가 지정된 요소를 비롯해 여러분이 원하는 어떤 것이든 배치할 수 있습니다.

요소의 수평 중앙정렬을 변경하려면 .inner의 text-align 프로퍼티만 수정하면 됩니다. 수직 중앙정렬을 변경하려면 .inner의 vertical-align 프로퍼티를 수정하면 됩니다.

이 예제는 마크업할 게 많아 보일 수도 있지만 실제로 동작하는 부분은 세 개의 div인 .outer.inner,.centered밖에 없습니다. 그리고 이 세 요소에 스타일을 적용하는 것은 일관성을 띠고 있어서 여러 프로젝트에서 사용하는 기본 CSS에 이 기법을 적용하고 다시는 이 부분에 신경 쓰지 않아도 됩니다.

이 기법은 대부분의 중앙정렬 기법보다 요소를 하나 더 사용하지만 아주 견고한 기법입니다. 이 기법이 표준 중앙정렬 기법으로 자리 잡아 CSS에서 중앙정렬하는 것에 관해 더는 걱정하지 않아도 된다면 좋겠습니다.

출처: http://webdesign.tutsplus.com/ko/tutorials/the-holy-grail-of-css-centering--cms-22114

반응형

'HTML/CSS > Core' 카테고리의 다른 글

웹 폰트 파헤치기  (0) 2016.04.18
웹디자인에서 자간, 행간에 대한 고찰  (0) 2016.01.27
[CSS]OverFlow  (0) 2012.09.07
[CSS]z-index 태그간의 화면 위치 경쟁  (0) 2012.09.07
Comments