화면 크기

화면 크기에 관련된 기본 정보를 제공합니다.

“화면”는 개발툴에서 화면 UI를 디자인히기 위한 영역으로 아래의 같은 2가지 영역으로 구성됩니다.

• 화면 영역
  • 화면 로딩시 사용자에게 표시되는 영역
  • “width”, “height” 속성값을 기준으로 크기 결정
• 숨김 영역
  • 화면 로딩시 사용자에게 표시되지 않는 영역
  • 화면 영역 외곽에 회색 바탕색으로 표시됨
  • “canvas_width”, “canvas_height” 속성값을 기준으로 크기 결정
  • “canvas_width”, “canvas_height” 속성값은 화면 생성시 화면 영역의 2배 크기로 설정됨
  • 숨김 영역에 배치된 컴포넌트는 “hidden” 속성을 “true”로 설정하지 않아도 화면 로딩시 보이지 않음

화면/숨김 영역간 컴포넌트를 이동하는 방법은 아래와 같다.

• 방법1
  • 이동 대상 컴포넌트를 마우스 선택후, 드래그 하여 영역을 이동하여 드랍
• 방법2
  • 이동 대상 컴포넌트를 마우스 선택후, 키보드 <CONTRO> + “x” 입력
  • 이동 대상 영역의 빈 공간 클릭후, 키보드 <CONTROL> + “v” 입력

화면을 너비와 크기는 “width_type”, “height_type” 속성을 통해서 설정한다.

• 0:최소
  • width/height 속성값만큼 최소 크기를 가짐
  • width/height 속성값 크기보다 브라우저 표시 영역이 작은 경우, 스크롤이 표시
  • width/height 속성값 크기보다 브라우저 표시 영역이 큰 경우, 화면 영역이 넓어짐
  • 일반적인 PC 화면 개발시 사용
• 1:고정
  • width/height 속성값 크기로 고정됨
  • width/height 속성값 크기보다 브라우저 표시 영역이 작은 경우, 스크롤이 표시
  • width/height 속성값 크기보다 브라우저 표시 영역이 큰 경우에도, 화면 영역이 고정됨
  • 화면 크기를 반드시 고정해야 하는 경우에 사용
• 2:자동
  • width/height 속성값 크기는 개발툴에서 디자인시만 사용됨
  • 브라우저 표시 영역에 맞추어 화면 크기가 결정되고, 내부 컴포넌트 배치 상태에 따라 스크롤이 표시됨
  • 모바일 화면 및 반응형 화면 개발시 사용