1. 가운데 정열하기
Inline 요소는 가운데로 정열하기가 참 쉽습니다.
.inline-element { text-align: center; }
Block 요소 역시 가운데로 정열하는데 어려움이 없습니다.
.block-element { margin: auto; }
하지만 position이 absolute인 요소를 가운데 정열하는데서 난관에 봉착하시는 분들이 많습니다. 그리고 Javascript를 사용하여 굉장히 어려운 길을 돌아가시는 분들도 계십니다.
// 가운데 정열을 위한 험난한 여정 var absElement = document.getElementById('abs-element'); window.addEventListener('resize', function () { var windowWidth = window.innerWidth; var newWidth = (windowWidth / 2) - (absElement.offsetWidth / 2); absElement.style.width = newWidth + 'px'; });
이런 어려운 길을 선택하지 않아도 absolute 요소도 css만으로 가운데 정열이 가능합니다.
#abs-element { position: absolute; left: 50%; transform: translateX(-50%); }
참 쉽죠? left 혹은 right 속성은 부모의 width를 기준으로 길이를 잡습다만, transform은 자기 자신의 width를 기준으로 길이를 정합니다. 그 결과 요소는 왼쪽을 기준으로 부모 요소 width의 50% 만큼 이동한뒤, 자기 자신의 width의 50% 만큼을 왼쪽으로 땡깁니다.
같은 방법으로 absolute 요소를 세로 가운데 정열을 할 수 있습니다.
#abs-element { position: absolute; top: 50%; transform: translateY(-50%); }
그리고 가로, 세로 정중앙에 배치할 수도 있지요.
#abs-element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
2. 가로 길이에 따라 세로 길이도 같이 변하는 요소 만들기
반응형으로 사이트를 만들면 width 값은 보통 %로 주어 window 가로 길이에 맞게 요소의 가로 길이도 변하게 합니다. 그런데 height의 경우에는 좀 난감한 경우가 발생합니다. 예를 들어 width 대비 1/5길이의 height를 가진 요소를 만들고 싶다면 어떻게 할까요. 보통 Javascript에 의존하는 경우가 많습니다. 저도 꽤 오랜기간 Javascript를 통해서 사이즈를 조정해왔는데요, 이 역시 css만으로 작성이 가능합니다.
<div id="container"> <!-- 가로 세로가 5:1인 박스 --> <div class="ratio-box"> <div class="box-contents"> <p>5:1 Box</p> </div> </div> </div>
.ratio-box { position: relative; width: 100%; // 아래 padding-top을 가로 대비 세로 비율로 지정합니다. padding-top: 20%; } .ratio-box::before { content: ''; display: block; } .box-contents { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
소스가 좀 길어졌군요. #ratio-box와 .box-contents가 한 세트 입니다. padding-top으로 가로 대비 세로의 비율을 지정하고 내부에 들어갈 내용은 .box-contents에 작성합니다. .box-contents의 스타일을 보시게되면 position이 absolute에 상하좌우가 0인 특이한 스타일이 지정되어 있는데, 이렇게 함으로써 .box-contents가 padding 값에 눌리지 않고 .ratio-box 안에 꽉차는 요소가 됩니다.
Codepen에 링크를 첨부하니 참조하셔서 직접 이것저것 만져보면서 확인하시는 것이 이해가 빠르실 겁니다.
3. inline-block으로 정열한 요소의 간격 없애기
inline-block로 요소들을 정열하게 되면 각 요소간에 간격이 발생하게 됩니다. 가끔 이걸 margin으로 없애려고 하시는 분들이 계신데 의외로 굉장히 간단하게 해결됩니다.
#container { // inline-block 요소들을 감싸고 있는 부모 요소 font-size: 0; } .items { display: inline-block; }
부모 요소에 font-size: 0을 주는 것으로 간단하게 해결됩니다.