상단 툴바 Top Toolbar

_images/iu_manual_top_toolbar.png

상단 툴바는 커맨드 / 탭 메뉴 / 스테이지 영역으로 구분됩니다.

_images/iu_manual_top_toolbar_command.png

커맨드Command

커맨드 영역은 프로젝트 레벨에서 동작하는 기능 들로 구성되어 있습니다.

  • 빌드 실행 버튼 : 현재 스테이지에 있는 요소들을 기준으로 HTML/CSS/JS 파일을 생성합니다. 빌드 생성 전 아이유 프로젝트를 로컬에 저장해야만 빌드가 가능합니다.

  • 서버 중지 버튼 : 로컬 호스트 서버를 중지합니다.

  • 빌드 타입 설정 버튼 : 빌드를 실행할 타입을 설정합니다. 생성한 프로젝트 타입에 따라 옵션이 달라집니다.

  • 시나리오 / 에디트 모드 변경 버튼 : 프로그램 기본 설정은 에디트 모드 Edit Mode 입니다. 이 버튼을 눌러 시나리오 모드 Scenario Mode 와 에디트 모드를 변경할 수 있습니다.

탭 메뉴 Tab Menu

상단 툴 바 중앙에 위치한 탭 메뉴 영역에서는 스타일 / 속성 / 텍스트 / 트랜스폼 / 마우스-오버 / 링크 탭 메뉴가 있습니다. 각 탭 메뉴를 선택하면, 상단 툴바 하단의 프로퍼티 패널에 보여집니다.

_images/iu_manual_top_toolbar_tab03_style.png

  • 스타일 탭 Style Tab : 선택한 위젯의 라운딩 / 보더 / 박스 쉐도우 / 투명도 / 배경 이미지 등을 설정할 수 있습니다.

_images/iu_manual_top_toolbar_tab02_property.png

  • 속성 탭 Property Tab : 선택한 각 위젯의 개별 속성을 변경할 수 있습니다. 각 위젯 별로 설정 가능한 항목이 다릅니다.

_images/iu_manual_top_toolbar_tab01_text.png

  • 텍스트 탭 Text Tab : 폰트 패밀리 / 두께 / 크기 / 컬러 / 행간 / 자간 / 제목 텍스트 / 정렬 등을 설정할 수 있습니다.

_images/iu_manual_top_toolbar_tab04_transform.png

  • 트랜스폼 탭 Transform Tab : 선택한 위젯의 회전 값 Rotation 값 등을 설정하여 형태를 변형시킬 수 있습니다.

_images/iu_manual_top_toolbar_tab05_mouse_over.png

  • 마우스-오버 탭 Mouse-Over Tab : 선택한 위젯이 마우스 오버 상태일 때 변화하는 값을 설정 할 수 있습니다.

_images/iu_manual_top_toolbar_tab06_backend.png

  • 링크 탭 Link Tab : 선택한 위젯에 ** 링크 Hyperlink** 를 설정할 수 있습니다.

_images/iu_manual_top_toolbar_TQZ.png

스테이지 Stage

  • 고정 위젯 숨김 버튼 Fixed Widget Show / Hide button : 포지션 속성이 고정 Fixed 인 위젯을 스테이지에서 감출 수 있는 기능입니다.

  • 트레이싱 Tracing : 트레이싱은 디자인 이미지를 스테이지 배경에 추가하여, 좀 더 빠른 작업이 가능하도록 도와줍니다. 트레이싱 아이콘을 눌러 트레이싱 모드를 on/off 시킬 수 있으며, 트레이싱 이미지 팝업에서 좀 더 세세한 조정이 가능합니다.

  • 페이지 설정 Page Setting : 현재 작업 중인 페이지의 너비 / 미디어쿼리 등을 변경합니다. (미디어 쿼리 팝업을 열어 새로운 쿼리를 생성하거나, 기존 미디어쿼리를 복사하여 생성할 수도 있습니다. )

  • 줌 Zoom : 작업 중인 페이지의 줌-인/아웃 을 설정합니다.