CSS 에서 각 property 마다 가장 적절한 unit (단위)

그동안 px 만 사용하다가 responsive layout 을 구현하게되면서 큰 벽에 부딛혔고,

하루종일 구글링을 하며, 각 property 에 적합한 unit 을 찾아보았다.

"적절히 잘 써야한다" 는 개발할시 날 매우 혼란스럽게 만들기에, 

많은 글들을 보여 조금 결론을 내보았다.

 

width :  %

font-size : rem 

padding : em

@media query : px 

 

px 를 사용하는 위치는 media query 이외에는 거의없지만,

box-shadow 나 border 또한 px 로 사용한다.

대부분 1px ~ 4px 매우 작은 단위이기때문.

.container {
	
    width: 100%; /* % */
    font-size: 1rem; /* rem */
    padding: 0.1em; /* em */
    
    @media (min-width: 500px) {
    
    
    }

}

참고 : https://www.reddit.com/r/webdev/comments/91ijaz/which_css_unit_is_best_practice_vw_em_px/

참고2 : https://adamwathan.me/dont-use-em-for-media-queries/