토스 웹 페이지 상단 nav를 코딩하면서 겪은 문제이다.
%와 px의 차이
상단 nav 내부 div의 width를 지정한 후 display를 flex로 설정하였다.
그리고 nav 우측 마지막에 있는 언어 변경 기능인 KOR / ENG를 포함하는 div에 padding 값을 0 8%로 주었더니 nav의 flex 영역을 넘어 차지했다.
padding 값을 주었을 때 왼쪽의 여백을 사용하여 flex 영역을 넘어가지 않게 하고 싶었지만 쉽지 않았다. %가 아닌 px를 사용하니 flex 영역을 넘어가지 않았는데 찾아보니, padding을 지정할 때 px를 사용하면 컨테이너 크기에 따라 변하지 않는 고정된 값이기 때문에 오버플로가 되지 않는 것을 알 수 있었다. 더불어 padding에 백분율을 사용하면 컨테이너 크기를 기준으로 패딩이 계산되며 경우에 따라 하위 요소가 오버플로될 수 있다는 사실도.
css의 단위에는 px, %, rem, em, vh, vw 와 같이 있는데 이러한 단위의 차이점에 대해서 완벽한 이해를 못했었다는 것을 느꼈다.
반응형 웹을 만들기 위해서는 %나 rem, vh 등을 사용하는 것이 좋지만 박스의 크기를 설정하거나 글자의 크기, 화면의 크기, 여백의 크기 등을 조절할 때 적절한 단위를 사용해야 함을 느꼈다. %는 주로 박스의 크기를 설정할 때는 유용하지만 여백의 크기를 설정할 때 모든 단위를 상대적인 단위로 설정한다면 위와 같이 컨테이너의 크기를 오버플로하는 경우가 생길 수 있음을 항상 생각해야겠다.
그래서 나는 이번 문제점에서 % 대신 px를 사용하려 했지만, 그보다는 좀 상대적이면서도 절대적이다 생각되는 rem을 사용하여 여백의 크기를 설정하여 해결했다.
