UX/UI Article
What if you used Container Units for… everything?
컨테이너 단위를 모든 용도로 사용하면 어떨까요?
I said to myself I said what if I used container units for every single unit in a design? I was wondering, partially because I thought the answer might be well, everything will probably scale really nicely then. Container units, in case you haven’t heard of them, are unit (like px or rem, but more […]
저는 제 자신에게 말했습니다. 디자인의 모든 단일 단위에 컨테이너 단위를 사용하면 어떨까요 ? 저는 부분적으로 모든 것이 정말 멋지게 확장될 것이라는 답이 있을 것이라고 생각했기 때문에 궁금했습니다. 컨테이너 단위는 들어보지 못했을 경우, 단위( px또는 와 비슷하지만 또는 와 rem같은 뷰포트 단위와 더 밀접한 관련이 있음 )로 , 컨테이너에 비해 상대적으로 크기가 조정됩니다 .vwvi
요약 :)
컨테이너 단위를 모든 디자인 요소에 적용하면 유연한 확장성을 기대할 수 있지만, 텍스트와 아이콘 크기 조정에서 예상치 못한 결과가 나타날 수 있습니다. 이를 해결하기 위해 CSS clamp() 함수나 상대 단위를 혼합 사용해야 합니다.
컨테이너 단위를 사용한 레이아웃 전환에서 쿼리 요소에 스타일을 지정할 수 없는 문제가 생길 수 있습니다. 이 문제를 해결하려면 컨테이너에 스타일을 지정하지 않거나 다른 단위와 혼합하여 사용하는 것이 바람직합니다. 이러한 접근법으로 효율적이고 일관된 디자인을 구현할 수 있습니다.
컨테이너 단위를 사용한 레이아웃 전환에서 쿼리 요소에 스타일을 지정할 수 없는 문제가 생길 수 있습니다. 이 문제를 해결하려면 컨테이너에 스타일을 지정하지 않거나 다른 단위와 혼합하여 사용하는 것이 바람직합니다. 이러한 접근법으로 효율적이고 일관된 디자인을 구현할 수 있습니다.
더보기→
출처.
Chris Coyier. (2024.08.02). frontendmasters. What if you used Container Units for… everything?. 2024.08.06. https://frontendmasters.com/blog/what-if-you-used-container-units-for-everything/