Studio 에디터: 에디터와 라이브 사이트의 차이점 문제 해결하기
4 분
페이지 메뉴
- 화면 중단점 및 뷰포트 크기 일치시키기
- 여백 단위 정렬하기
- 반응형 동작 정렬하기
- 요소 가시성 확인하기
Studio 에디터 사이트의 게시된 버전을 볼 때 에디터에서와 다르게 보이는 것을 확인할 수 있습니다. 이러한 차이는 일반적으로 미미하지만 요소가 잘못 정렬되거나 완전히 잘릴 수 있습니다.
일반적으로 이러한 차이점은 뷰포트에서의 요소 크기 조정, 위치 및 동작에 대한 구성 문제로 인해 발생합니다. 이 도움말의 권장 사항을 사용해 잠재적인 해결 방법을 찾고 전체 화면 크기에서 일관성을 유지하세요.
최근에 사이트를 편집했다면,
모든 변경사항을 게시했는지, 최신 버전의 사이트를 보고 있는지 확인하는 것이 좋습니다. 또한, 브라우저 도구를 사용해 단일 기기에서 다양한 뷰포트를 확인할 수 있습니다.
화면 중단점 및 뷰포트 크기 일치시키기
화면 중단점은 다양한 기기에 맞게 사이트를 디자인하는 데 사용하는 화면 크기 범위입니다. 이 범위 내에서 특정 편집 크기를 설정할 수 있습니다. 예를 들어 320-750px 화면 중단점에서 편집 크기를 500px로 설정할 수 있습니다.
뷰포트는 방문자 화면의 크기를 나타냅니다. 특정 뷰포트에서 라이브 사이트가 다르게 보이는 경우, 뷰포트에 맞게 편집 크기를 설정하고 조정할 수 있습니다.
편집 크기를 설정하려면:
- 에디터에서 해당 페이지 및 화면 중단점으로 이동합니다.
- 상단에서 현재 편집 크기를 클릭합니다.
- 크기 편집 옆 새 값을 입력합니다.
- 적용을 클릭합니다.
- Studio 에디터 도구를 사용해 조정합니다.
여백 단위 정렬하기
요소의 여백 단위를 변경하려면:
- 해당 요소를 선택합니다.
- 에디터 오른쪽 상단에서 속성 열기
화살표를 클릭합니다.
- 위치로 스크롤합니다.
- 여백 옆 드롭다운을 클릭합니다.
- 해당 단위를 선택합니다.
반응형 동작 정렬하기
충돌하는 반응형 동작의 상위 및 하위 요소는 라이브 사이트의 콘텐츠에 문제를 일으킬 수 있습니다.
컨테이너에 버튼이 연결되어 있다고 가정해 보겠습니다. 버튼의 반응형 동작은 고정이고 컨테이너는 비례적 크기 조정으로 설정되어 있습니다. 버튼은 고정되어 있으므로 상위 컨테이너와 함께 크기가 조정되지 않아 라이브 사이트에서 여백, 요소가 겹치고 요소가 잘릴 수 있습니다. 이는 요소 중 하나에 혼합 반응형 동작이 있는 경우에도 발생할 수 있습니다.
이 문제를 해결하려면 요소의 반응형 동작을 정렬하는 것이 좋습니다.
요소의 반응형 동작을 변경하려면:
- 해당 화면 중단점을 선택합니다.
- 요소를 선택합니다.
- 에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
- 반응형 동작 드롭다운에서 상위 또는 하위 요소에 맞는 옵션을 선택합니다.
참고:
이러한 차이점은 요소 높이에 영향을 미치며 사이트에 원치 않는 여백이 생길 수 있습니다. 여백 문제 해결에 대한 자세한 도움말을 확인하세요.
요소 가시성 확인하기
일부 화면 크기에서는 요소를 볼 수 있지만, 다른 크기에서는 요소를 볼 수 없을 수 있습니다. 이는 일반적으로 요소가 특정 화면 중단점에서 숨겨져 있기 때문입니다. 레이어 패널을 사용해 요소를 찾고 원하는 뷰포트에 표시할 수 있습니다.
요소의 가시성을 확인하려면:
- 에디터로 이동해 해당 페이지를 엽니다.
- 에디터 상단에서 화면 중단점을 선택합니다.
- 왼쪽에서 레이어
를 클릭합니다. - 목록에서 비공개 요소를 찾습니다.
- (선택사항) 표시
아이콘을 클릭합니다.
참고:
요소 삭제 또는 다른 섹션/컨테이너로 이동 등과 같은 변경사항은 작업 중인 화면 중단점에 관계없이 모든 화면 중단점에 적용됩니다. 특정 화면 중단점에만 요소를 표시하려면, 오른쪽 클릭 메뉴를 통해 해당 요소를 비공개할 수 있습니다.