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을 주는 것으로 간단하게 해결됩니다.