[IOS & CSS] 아이폰 하단 여백 safe area 만큼 css주기

상황

아이폰에서 독바와 하단 겹치는 현상 발생. 

 

해결

calc(constant(safe-area-inset-bottom) + 더할값)
calc(env(safe-area-inset-bottom) + 더할값)

//원래 소스
.btn {
    padding: vw(10px 40px);
}


//적용한 소스
.btn {
    padding: vw(10px 40px calc(constant(safe-area-inset-bottom) + 10px));
    padding: vw(10px 40px env(constant(safe-area-inset-bottom) + 10px));
    padding: vw(10px 40px);
}