CSS/CSS 기초
[CSS]css 계산 calc() 함수
알찬 퍼블리셔
2019. 5. 28. 18:11
728x90
반응형
다음과 같은 상황에서 쓸 수 있다..
1줄에 3개씩 배치하고,, margin 값을 10px 주고싶을 때
3개가 배치되려면 하나의 width 값은 33.333%가된다.
margin 10px을 주면 3개가 한줄에 배치될수 없고, width 값을 줄이면 원치않는 빈공간이 생기거나 화면의 크기 변화에 따라
다른 결과가 보여질 수 있다.
이때 calc을 이용해 쉽게 계산할 수 있다.
아래와같이
width: calc(33.333% - 10px);
width의 값을 calc 계산을 통해 전체 width 의 33.333% 에서 10px을 뺀 값을 준다
그리고 margin을 주면 쉽게 한줄에 원하는 만큼 배치할 수 있다.
728x90
반응형