width와 height 모두 지정하기

보통 Figma 디자인을 통해 UI를 구현할 경우 나는 width와 height가 대부분 지정되어 있기 때문에 반응형인 경우에만 100% 값을 활용하고 나머지 상황에서는 width와 height 값을 모두 지정했었다. 둘 중 하나의 값을 지정하지 않으면 기본값이 auto 로, 컨텐츠의 비율대로 자동으로 지정된다는 것을 알게되어(기본이지만 나는 독학이기 때문에…) 이 두가지 방법의 장단점을 정리해본다.

박스모델에서의 width와 height

width와 height를 모두 지정하면

레이아웃을 정확하게 제어하고, 레이아웃 계산에 이점이 있어 크기가 고정되면서 렌더링 성능에 이점을 줄 수 있다.

width와 height중 하나만 지정하면

지정하지 않은 값은 기본값으로 auto값으로, 컨텐츠의 크기 비율이나 내용에 따라 유동적으로 조정되어 반응형 디자인을 구현하는 데에 도움이 된다.

엘리멘트의 레이아웃을 조절하는 값이 줄기 때문에 유지보수에도 도움이 된다.

---

UI 구현을 하다보면 반복적인 작업을 한다는 생각이 들다가도 이렇게 새롭게 알게되는 것들이 생겨 확실히 frontend 개발에서 refresh를 해주는 것 같다.