Studio 에디터: 중단점에 맞춰 디자인하기

Studio 에디터를 사용하면 중단점별로 사이트를 조정해 멋지게 디자인할수 있습니다. 중단점은 방문자가 사용할 수 있는 화면 및 기기를 나타내는 화면 크기 범위입니다. (예: 태블릿, 모바일) 

데스크톱에서 제작한 디자인이 태블릿과 모바일에도 적용됩니다. 하지만, 디자인이 더 작은 화면에 맞도록 재정의할 수 있습니다. 시작하려면 상단의 중단점 아이콘을 클릭하세요. 

Studio 에디터에는 언제든지 사용자 지정하고 재정의할 수 있는 3개의 중단점이 내장되어 있습니다.

중단점은 모든 사이트 페이지와 모든 글로벌 섹션에 대해 별도로 정의합니다. 이는 글로벌 섹션과 글로벌 섹션이 있는 페이지가 완전히 다른 중단점을 가질 수 있음을 의미합니다. 

예를 들어, 아래 페이지에는 5개의 중단점이 정의되어 있습니다.

해당 페이지의 글로벌 머리글에는 3개의 중단점이 정의되어 있습니다. 

Studio 에디터는 중단점 디자인 시 계단식 개념을 사용합니다. 더 큰 중단점을 변경할 경우 해당 변경사항은 더 작은 중단점에도 적용되지만, 더 작은 중단점은 변경해도 더 큰 중단점에 영향을 미치지 않습니다. 

예를 들어, 데스크톱에서 보라색으로 디자인된 버튼은 태블릿과 모바일에서 자동으로 보라색으로 변경됩니다. 모바일에서는 버튼 색상을 변경해도 태블릿과 데스크톱에서 버튼은 계속 보라색으로 유지됩니다.

일부 작업은 모든 중단점에 자동으로 적용되며 특정 뷰포트에 사용자 지정할 수 없습니다.

요소의 콘텐츠를 편집하는 것은 데이터를 효과적으로 변경하는 것입니다. 예를 들어, 요소의 링크 또는 이미지의 소스를 변경하면 모든 중단점에 적용됩니다. 

또 다른 예시는 페이지에서 요소를 대체하거나 삭제할 경우입니다. 요소는 모든 중단점에서 자동으로 대체 또는 삭제됩니다.

페이지 계층 구조에서 요소의 위치를 변경합니다. 예를 들어, 요소를 함께 스택하거나 요소를 다른 셀에 이동하면 페이지 구조가 변경되며 이는 모든 중단점에 반영됩니다. 

특정 중단점에서 요소 디자인을 변경하면 재정의가 발생합니다.즉, 더 이상 위에 있는 더 큰 중단점에서 디자인 값을 가져오지 않음을 의미합니다.하지만, 이러한 재정의는 더 작은 중단점에 적용됩니다.

다음과 같은 2가지 유형의 재정의를 추가할 수 있습니다.

가장 큰 중단점에서 언제든지 요소의 디자인 및 레이아웃을 속성으로 재정의할 수 있습니다.

더 작은 중단점에 있는 요소의 속성은 영향을 받지 않으며, 복원하고자 하는 요소가 포함된 중단점에만 영향을 미칩니다. 예를 들어, 태블릿에서 재정의를 제거해도 모바일에는 영향을 미치지 않습니다.