프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[CSS] calc() 브라우져에서 계산 할 수 있는 속성

2013.05.24
북마크 [출처 이동]    작성자 정보
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 ) }
}



또한 반응형으로 제작시 좀더 유연하게 구조를 잡을 수 있게 됩니다.
내가 계산을 할 필요가 없게 되는것이죠

이 포스트 공유하기

전체목록