미래의 예측할 수 없는 기기에서 웹 디자인을 하려면 웹 디자인에서 도전 과제가 있습니다. 2010년에 등장한 반응형 디자인은 퍼센트 기반 레이아웃과 미디어 쿼리를 사용하여 다양한 화면 크기에 맞는 콘텐츠를 적응시키는 솔루션으로 등장했습니다. 그러나 미디어 쿼리는 컴포넌트를 특정 뷰포트 크기에 묶어 컴포넌트 재사용을 제한합니다. 브라우저에서 지원되지 않는 현재의 컨테이너 쿼리는 컴포넌트가 부모 컨테이너의 크기에 따라 변경할 수 있도록 하여 실제로 재사용 가능한 컴포넌트를 가능하게 하려는 목표를 가지고 있습니다.
Flexbox와 CSS Grid와 같은 CSS 개선 사항은 레이아웃을 혁신시켰고, 컨테이너 행이 필요하지 않게 되었으며 요소들이 필요한대로.WRAP 또는 플렉스할 수 있었습니다. CSS Subgrid는 요소들이 자체 콘텐츠 및 형제 요소의 콘텐츠 변경에 응답할 수 있도록 하여 더 강력한 디자인을 생성합니다.
고유 레이아웃은 fr 단위와 고정 및 유연한 단위의 혼합을 사용하여 레이아웃보다 콘텐츠 크기를 우선시하고 모든 공간 및 콘텐츠 변동에 적응할 수 있는 디자인을 가능하게 합니다. 이러한 접근 방식은 컨테이너 쿼리를 사용하지 않고 반응형 컴포넌트를 생성하는 데 있어 상당한 이점을 제공합니다.
고유 디자인은 웹 디자인에서 반응형 레이아웃을 반응형 컴포넌트로 설계하는 것을 강조합니다. 이는 새로운 방식으로 기존 CSS 지식을 사용하여 유연하고 적응력이 있는 디자인을 생성하는 것을 의미합니다. 고유 디자인은 웹 디자인에서 또 다른 중요한 순간을 표시하며, 미리 정의된 브레이크포인트에서 벗어나 모든 기기 또는 콘텐츠 시나리오에 응답할 수 있는 레이아웃으로 이동합니다.
alistapart.com
Designing for the Unexpected
Create attached notes ...
