Monthly Archives: May 2016

어쩌면 도움이 될지도 모르는 CSS 팁들

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