[CSS] calc() 브라우져에서 계산 할 수 있는 속성
2013.05.24
작성일/수정일
2013-05-24 14:50:29 / 2013-05-24 14:50:29
img { float:left; width:calc(25% - 20px); margin:10px; }
25% 라는 상대값에서 -20px을 빼주고 margin을 한개의 Element에서 처리를 하게되는 방식입니다.
지금 사용하고 있는 구조보다 훨씬 더 적은 Element로도 구성이 가능하게 됩니다.
img { float:left; margin:10px; width:calc(25% - 20px); }
@media ( max-width:900px )
{
img{ width:calc(100% * 1/3 - 20px ) }
}
@media ( max-width:600px )
{
img{ width:calc(100% * 1/2 - 20px ) }
}
@media ( max-width:400px )
{
img{ width:calc(100% - 20px ) }
}
또한 반응형으로 제작시 좀더 유연하게 구조를 잡을 수 있게 됩니다.
내가 계산을 할 필요가 없게 되는것이죠