반응형 모드 사용 방법

작성자

카테고리:

반응형 모드 사용 방법

버전 4.0부터 이제 편집하는 동안 데스크톱, 태블릿, 모바일 폰 보기 사이를 전환할 수 있습니다! 이를 반응형 모드라고 합니다. 반응형 모드에서는 더 작은 화면에서 사이트가 어떻게 보일지 시뮬레이션할 수 있도록 사이트 크기가 축소됩니다.

제한된 편집 기능

태블릿 또는 모바일 폰 보기로 사이트를 볼 때 편집 기능이 일부 제한됩니다. 이 상태에서는 다음과 같은 작업만 수행할 수 있습니다:

  • 텍스트 편집
  • 텍스트 서식 도구 모음을 사용하여 텍스트 스타일 지정
  • 요소 및 행의 일부 여백 조정 *
  • 태블릿 또는 모바일 폰에서 행 숨기기

* PBS는 요소 및 행에 일부 반응형 스타일을 적용하므로 특정 여백은 조정할 수 없습니다.

다음은 수행할 수 없는 작업들입니다:

  • 요소 추가, 삭제, 드래그하여 이동
  • 요소 속성 보기
  • 이미지, 아이콘, 행 및 기타 크기 조정 가능한 요소의 크기 조정

특정 화면 크기에 따른 여백 조정

태블릿 또는 모바일 폰 보기로 사이트를 볼 때 조정한 모든 여백은 현재 보기와 그보다 작은 보기에만 적용됩니다. 이를 통해 전체 데스크톱 버전과 별개로 더 작은 화면에서 디자인이 더 보기 좋도록 미세하게 조정할 수 있습니다.

이해를 돕기 위한 예시는 다음과 같습니다.

  1. 태블릿 모드에서 사이트를 보고 제목의 여백을 조정하면 해당 조정 사항은 태블릿 화면에만 적용됩니다. 이는 모바일 폰 화면에도 함께 적용됩니다. 데스크톱 모드로 돌아가면 원래의 여백이 복원됩니다.
  2. 이제 모바일 폰 모드로 이동하여 동일한 여백을 다시 조정하면 해당 조정 사항은 모바일 폰 화면에만 적용됩니다. 결과적으로 데스크톱, 태블릿, 모바일 폰마다 서로 다른 여백을 갖게 됩니다.

이는 여백 조정에만 적용되며, 텍스트 변경이나 텍스트 스타일 변경 사항은 모든 화면 크기에 적용됩니다.

태블릿 또는 모바일 폰 크기에서 콘텐츠 숨기기

태블릿 또는 모바일 폰 보기로 볼 때 마우스를 올리면 행에 새로운 “눈” 도구 모음 버튼이 나타납니다. 이 버튼을 클릭하면 현재 화면 크기에서 행을 표시하거나 숨길 수 있습니다.

숨겨진 행은 편집이 완료되었을 때 숨겨질 것임을 나타내기 위해 편집 중에 약간 투명해집니다.

이 기능은 행에만 사용할 수 있습니다.