css calc() 사용하기 !

안녕하세요 MAG입니다 ! 

오늘은 calc() 함수를 써볼건데요 ! 

calc 함수 는 css 속성 값으로 계산식을 적어 따로 계산 없이 값을 도출할 수 있습니다!

 

단위로는 %,px, em 등 모두 사용가능하지만, 상대단위로 사용해야 적용이 가능합니다.

** 중요한 것은 계산식을 쓸때 공백을 꼭 띄워줘야 적용이 된다는것  !
**calc 함수는 주로 전체 document에서 양쪽 패딩값을 줄 때 가장 많이 사용하는데요 ! 

동일한 퍼센티지의 값을 줄때도 많이 사용됩니다. 중첩사용도 가능합니다.

 

하단은 많이 사용하는 calc 함수의 예시입니다 ! 

더 자세한 내용이나 브라우저 호환성은 하단 MDN 참고하세요 :) ♡

.container{
	width: calc(100% - 1em); 
    margin: 0 auto; /*document 100% width에서 양쪽 1em 씩 마진을 주고 중앙정렬 할때! 꼭 띄어쓰기*/
}

div{
	width:	calc(100%/6);
    height: inherit;
}


span{
	width: calc(calc(100%/2)/2); /*중첩가능*/
    height:inherit;
}

developer.mozilla.org/ko/docs/Web/CSS/calc()

 

calc() - CSS: Cascading Style Sheets | MDN