WIDTH 속성 퍼센트 값에서 원하는 픽셀만큼 빼는 방법 > html/css

본문 바로가기
gnb bg


html/css

html/css

WIDTH 속성 퍼센트 값에서 원하는 픽셀만큼 빼는 방법

본문

width:calc(100%/3 - 2px);  - border값 있을 경우

이 방법은 CSS3에서 지원되는 내용입니다.

div_A라는 요소의 width 속성이 100%이고, 여기서 150픽셀만큼 빼고 싶은 경우를 가정하겠습니다.

예전같았으면 자바스크립트를 이용해 100%로 설정된 width의 실제 픽셀수치를 구한 후에 150픽셀을 빼는 방법을 사용했습니다. 한마디로 번거로웠죠.

하지만 CSS3가 많이 사용되고 있는 현재, 그런 번거로운 작업을 하지 않으셔도 됩니다.

위 처럼 한줄이면 됩니다. calc라는 함수인데요. 이름만 들어도 알 수 있듯 수치를 계산해줍니다. 상이한 단위와 상관없이 말이죠.

예제에서는 %와 px간의 계산이었지만 em, pt, mm 등등 css에서 사용되는 모든 단위를 사용할 수 있습니다.

연산 또한 빼기(-) 뿐만이 아니라 더하기(+), 곱하기(*), 나누기(/)도 가능합니다.

댓글목록

UNI Publisher님의 댓글

UNI Publisher

min-height:calc(100vh - (40px + 100px));

UNI Publisher님의 댓글

UNI Publisher

height:calc(100% - 100px);
    height:-moz-calc(100% - 100px);
    height:-webkit-calc(100% - 100px);


Copyright 2005-2020 UNIDA_v7. All rights reserved.