[CSS3] calc 를 이용한

CSS3에 새롭게 추가된 기능 중 calc()라는 것이 있다

명령어에서 보듯 계산을 해주는 속성이다

[예제] 이미지를 화면의 가운데로 맞추는 예제

<style>
  img {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
  }
</style>
 
<img src="test.jpg">

[이해하기]

위의 예제에서 이미지의 크기는 100px 의 크기이다

절대위치(position: absolute;)속성을 갖는 이미지의 상단과 왼쪽 시작 위치를 50% - 50px 로 맞춘다

이때 사용되는게 calc(50% - 50px); 이다.