에디터 X: 반응형 디자인 정보

웹 검색에 사용하는 기기의 수와 시중에 판매 중인 기기의 수를 생각해 보세요. 이제 이러한 기기의 다양한 해상도에 대해 생각해 보세요. 정말 많은 가능성이 있습니다.

에디터 X를 사용하면 보고 있는 화면 또는 기기에 맞춰 자동으로 조정되는 완전 반응형 웹 사이트를 제작해 매번 최고의 사용자 경험을 제공할 수 있습니다. 유연한 그리드 및 레이아웃, 유동적인 크기 조정 및 중단점 사용자 지정 등과 같은 최신 디자인 기술을 사용해 사이트가 어떤 기기에서 보이든지 여부와 관계없이 원하는 대로 정확하게 표시되도록 할 수 있습니다.

이 도움말에서는 반응형 사이트를 제작하는 데 도움이 되는 에디터 X의 기능을 살펴봅니다.

유동적 크기 조정 및 상대적 측정 단위는 모든 뷰포트에 원활하게 조정되는 디자인을 만드는 데 도움이 될 수 있습니다. 속성 패널에서 디자인 시에는 고정 및 변동 크기 옵션 중 선택할 수 있습니다. 고정은 요소의 크기가 뷰포트에 관계없이 동일하게 유지됨을 의미하며, 변동은 중단점 및 환경 설정에 따라 요소 크기가 자동으로 조정됨을 의미합니다.

레이어는 상위 레이어가 하위 레이어(즉, 자식)의 부모 역할을 하는 부모 모델에 따라 구조화됩니다. 모든 화면 크기에서 요소가 겹치지 않고 멋지게 보이도록 레이어 크기를 위에서 아래로 설정하세요.

백분율(%)과 같은 상대적 측정값을 사용해 상위 요소를 기준으로 하위 요소의 크기를 조정할 수 있습니다. 예를 들어, 화면 크기에 관계없이 섹션이 페이지 너비의 50%를 차지하도록 설정합니다. 섹션 내의 모든 요소 또는 컨테이너에 대해 동일한 작업을 수행해 페이지를 최대한 반응적으로 만들 수 있습니다.

중단점은 방문자가 사이트를 보는 기기와 관계없이 항상 최상의 사이트 버전을 볼 수 있도록 콘텐츠가 변경되는 지점입니다. 

에디터 X 작업 공간에는 이미 가장 일반적인 중단점(데스크톱, 태블릿, 모바일)이 포함되어 있지만, 최대 3개의 사용자 지정 중단점을 추가할 수 있습니다(총 6개의 중단점). 이를 통해 디자인 재정의를 정의해 개별 화면 크기에 맞게 사이트를 조정할 수 있습니다. 레이아웃을 재정렬하고 표시하거나 숨길 항목을 선택, 모든 뷰포트 크기에서 디자인을 사용자 지정할 수 있습니다. 

CSS 그리드는 컨테이너 또는 섹션 내부에 요소를 정확하게 배치할 수 있도록 하는 고급 레이아웃 도구입니다. 

그리드를 사용하면 다른 화면 크기에서 요소가 겹치는 것에 대해 걱정할 필요가 없습니다. 셀 중 하나에 요소를 추가하면 자동으로 가장 가까운 모서리에 도킹되어 항상 제자리에 유지됩니다. 필요한 경우, 자동 도킹을 재정의하고 수동으로 조정할 수 있습니다.

각 중단점에 대해 개별 그리드를 생성할 수 있으므로 모든 화면 크기에 대해 다양한 레이아웃을 자유롭게 디자인할 수 있습니다.

플렉스박스는 요소가 화면 크기에 따라 자동으로 정렬되도록 요소 주위에 생성된 CSS 컨테이너입니다. 요소가 겹치거나 순서가 변경되는 경우와 같이 지저분해지는 것을 방지하는 반응형 디자인의 유용한 도구입니다.

레이아웃터 또는 반복 레이아웃 등과 같은 고급 플렉스박스 기술 도구를 사용해 중단점에 대해 생각할 필요 없이 모든 화면 크기에 맞게 콘텐츠를 자동으로 조정할 수 있습니다. 또한, 요소 그룹을 함께 스택해 요소 주위에 플렉스 컨테이너를 생성할 수 있습니다. 기본적으로 컨테이너는 투명하지만 필요에 따라 디자인할 수 있습니다.