[CSS] width와 height 길이 단위

클론을 하면 할수록 전체적인 틀을 구성하는 센스가 늘어나는 것 같아서 기분이 좋다. 아직 grid의 auto-fill, auto-fit에 대한 개념은 부족하지만...

그래도 가장 개념이 빠삭해진 것은 width와 height.
처음에는 아무리 수정하고 리프레쉬해도 들쑥날쑥한 컨테이너 때문에 골머리를 앓았는데, 이제는 조금 해결책을 빠르게 찾는 편인 것 같다.

가장 많이 쓰는 삼대장 px, vh, % 를 정리해보겠다.

1. px

• 말 그대로 px 단위다. 고정된 길이를 표현할 때 쓴다.
• 그러나 화면 크기가 달라짐에 따라 길이 변화가 되지 않기 때문에 기본 width나 height로 사용하지는 않는다.
• 대신 min-width, min-height 처럼 축소의 제한점을 둘 때 px를 사용하면 좋더라.
• 화면의 px를 알기 위해서는 대략적인 감도 있지만, 크롬 확장 프로그램을 쓰면 편하다. 지금 쓰고 있는 것은 Dimensions. 마우스에 갖다대면 자동적으로 가까운 컨테이너를 잡아 폭과 높이를 알려준다. 클론할 때는 괜찮지만, 컨테이너가 몇 px인지 알기는 쉬워도, 몇 px이 어느 정도 차지하는지 알 수는 없어 개인 프로젝트를 할 때는 아쉽다.

2. vh

• vh는 vertical height의 약자로 vertical width의 약자인 vw와 세트 개념이지만, vw는 거의 안 써봤다.
• vh는 '브라우저'의 길이를 기준으로 한다.
• 쉽게 말해, 열려 있는 창의 크기를 기준으로 한다는 것이다. 만일 열려 있는 창의 높이가 1000px이라면, 1vh는 10px, 100vh는 창 크기와 '동일한' 길이다. 여기서 길이는 스크롤바의 길이를 포함한다.
• vh는 창의 크기에 따라 유동적으로 조절된다.
• 최소, 최대 범위를 지정하는 vmin, vmax도 있다.
• 맨 처음에 애먹었던 부분!! container 하나를 화면에 꽉 채우고 싶어서 body에 height: 100vh;를 선언했는데, content가 브라우저 크기보다 크면 의도한 대로 나오지 않는다.. 이때는 overflow를 조절하거나 아예 height: 100%;를 이용!

3. %

• %는 '상위(부모) container'의 길이에 상대적으로 작용하는 단위다. 상위(부모) container 길이!에 상대적으로! 작용한다는 것을 염두해두고 계산!
• 아직까지는(?) %가 가장 유용한 것 같지만, 이따금 깨질 때가 있어서 곤란하다. vh와 %를 적재적소에 잘 활용하는 것이 중요.
• 가로를 꽉 차게 쓰고 싶다면 100vw를, 세로를 꽉 차게 쓰고 싶다면 100%를 쓰는 게 좋은 것 같다..?