Web App | CSS | DOM 의 size 가변 적용, calc() 사용하기

2016. 9. 20. 17:51

DOM 의 width, max-width, height 등 특정 size 를 가변 적용하기

mobile 에서 web app 을 만들거나, browser 의 크기가 변할 때 calculate 한 후에 특정 사이즈를 적용하고 싶을 경우 사용
css property

calc()
-webkit-calc()
-moz-calc()
-o-calc()

Example

다음 code 는 less code 임

width 를 상황에 따라 가변 적용하기

// .ex_div class 를 가지는 div 가 존재한다고 할 때
// width_type_1 과 width_type_2 를 상황에 따라서 다르게 적용하여 사용하기
// point 는 .ex_div 의 전체 넓이(100%) 에서 각각 50px, 100px 씩 줄인 사이즈를 width 로 가지게 하기 위해서
// 아래 code 같이 작성하면 됨

div.ex_div {
    &.width_type_1 {
        width: -webkit-calc(~'100% - 50px');
        width: calc(~'100% - 50px');
    }
    &.width_type_2 {
        width: -webkit-calc(~'100% - 100px');
        width: calc(~'100% - 100px');
    }
}

browser 별로 동일한 효과 적용하기

// .ex_div_2 의 width 를 각 browser 별로 동일한 width 를 가지게 하고 싶을 때
// 각 browser 별 calc() 를 적용.
// 해당 browser 에 맞는 property 가 자동 적용됨.
// 아래 code 는 .ex_div_2 의 width 를 자신의 원래 넓이 100% 가 아닌 65% dml 

div.ex_div_2 {
    // Firefox
    width: -moz-calc(~'65% - 50px');
    // WebKit
    width: -webkit-calc(~'65% - 50px');
    // Opera
    width: -o-calc(~'65% - 50px');
    // Standard
    width: calc(~'65% - 100px');
    // 구버전 browser 를 위한 fallback
    width: 60%;
}