에디터 X: 계단식 규칙을 사용해 중단점 전체에 디자인하기

에디터 X를 사용하면 다양한 중단점(예: 데스크톱, 태블릿, 모바일)에 맞게 사이트를 디자인할 수 있습니다. 중단점은 특정 범위의 화면 크기에 맞게 요소의 디자인 및 레이아웃을 사용자 지정해 항상 멋지게 보일 수 있도록 합니다.

사이트의 구조 및 데이터는 모든 중단점에서 동일하게 유지되지만, 각 중단점마다 원하는 대로 정확하게 표시되도록 디자인을 사용자 지정할 수 있습니다.

에디터 X는 중단점 전체에 계단식 개념을 사용합니다. 이는 변경 사항이 계단식으로 내려간다는 것을 의미합니다. 가장 큰 중단점의 변경 사항은 더 작은 중단점으로 전달되지만, 더 작은 중단점에 대한 변경 사항은 더 큰 중단점에 영향을 미치지 않습니다. 

예를 들어, 가장 큰 중단점에서 보라색으로 디자인된 버튼은 나머지 중단점에서 자동으로 보라색이 됩니다.

일반적으로 사이트 구축 시에는 가장 큰 중단점을 디자인한 다음 더 작은 중단점에 맞게 디자인을 조정하는 만큼, 유용하게 사용할 수 있습니다.

다음 변경 사항은 모든 중단점에 자동으로 적용되며 특정 뷰포트에 맞게 사용자 지정할 수 없습니다.

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

특정 표시 영역에서 다르게 표시되도록 요소를 조정할 수 있는 여러 유형의 조정(예: 재정의)이 있습니다.

레이아웃 및 디자인 재정의를 생성할 경우, 이는 더 작은 중단점에도 영향을 미칩니다. (위의 계단식 디자인 참조)

요소의 디자인 또는 레이아웃을 변경하는 경우, 새로운 디자인 또는 레이아웃을 모든 중단점(더 큰 중단점 포함)에 적용하도록 선택할 수 있습니다.

언제든지 재정의를 제거하고 요소의 디자인 또는 레이아웃 속성을 가장 큰 중단점의 속성으로 재설정할 수 있습니다.

더 작은 중단점에 있는 요소의 속성은 영향을 받지 않으며, 복원하고자 하는 요소가 포함된 중단점에만 영향을 미칩니다.