이전 장에서는 컴포넌트를 자유롭게 원하는 위치에 배치했습니다. 하지만 실제 사용할 화면을 만들 때는 텍스트를 입력하거나 선택하는 컴포넌트와 버튼 컴포넌트 등이 일정한 기준으로 가지고 배치됩니다. 이번 장에서는 여러 컴포넌트를 배치하는 방법을 살펴봅니다.
특정 컴포넌트 기준으로 정렬해서 배치하기
컴포넌트 배치 후 좌표값을 수정할 수도 있지만 간단하게 화면 상에서 컴포넌트의 배치 위치를 조정하는 방법을 살펴봅니다.
1
화면에 Button 컴포넌트를 배치합니다.
2
속성창에서 Button 컴포넌트의 top 속성값을 50으로 변경합니다.
3
화면에 Button 컴포넌트를 하나 더 배치합니다.
4
두 번째 Button 컴포넌트 위에 마우스 포인터를 이동합니다.
마우스 포인터가 상하좌우 화살표 모양으로 바뀌어 표시됩니다.
5
Button 컴포넌트를 마우스 왼쪽 버튼으로 누른 상태에서 원하는 위치로 움직입니다.
6
파란색 선이 첫 번째 Button 컴포넌트와 일치하는 지점에서 눌려있는 마우스 왼쪽 버튼을 놓습니다.
7
속성창에서 두 번째 Button 컴포넌트의 top 속성값이 첫 번째 Button 컴포넌트와 같은 50인지 확인합니다.
일정 간격으로 컴포넌트 배치하기
툴바처럼 일정 간격으로 같은 크기의 아이콘을 배치해야 하는 경우 자동으로 간격을 조정하는 방법을 살펴봅니다.
1
화면에 Div 컴포넌트를 배치합니다.
Div 컴포넌트는 컴포넌트 툴바에서 Button 컴포넌트에서 6번째 위치에 있습니다.
2
Div 컴포넌트를 마우스 왼쪽 버튼으로 클릭합니다.
3
속성창에서 Div 컴포넌트의 background 속성값을 "red"로 변경합니다.
일반적으로 배경색을 따로 지정할 필요는 없지만 Div 컴포넌트의 특성 상 컴포넌트가 디자인 화면에서 잘 보이지 않기 때문에 편의상 배경색을 지정했습니다.
4
속성창에서 Div 컴포넌트의 type 속성값을 "horizontal"로 변경합니다.
5
Button 컴포넌트를 Div 컴포넌트 영역 내에 배치합니다.
이전에 컴포넌트를 배치할 때와 다르게 클릭한 위치에 Button 컴포넌트가 배치되지 않고 Div 컴포넌트 기준으로 좌측 상단에 배치됩니다.
type 속성을 "horizontal"으로 설정하면 Div 컴포넌트 영역 내에서 왼쪽을 기준으로 컴포넌트를 순서대로 배치하게 됩니다.
6
Button 컴포넌트를 두 개 더 배치합니다.
첫 번째 Button 컴포넌트의 오른쪽에 두 번째와 세 번째 Button 컴포넌트가 배치됩니다.
7
Div 컴포넌트를 마우스 왼쪽 버튼으로 클릭합니다.
8
속성창에서 horizontalgap 속성값을 10으로 변경합니다.
9
컴포넌트의 간격이 10만큼 조정된 것을 확인합니다.
화면 크기가 변할 때 컴포넌트의 크기도 같이 조정하기
화면 너비가 변하면 그에 따라 Edit 컴포넌트의 너비가 같이 변하고 Button 컴포넌트는 화면 오른쪽에 고정된 상태로 표시하는 방법을 살펴봅니다.
1
화면에 Edit 컴포넌트와 Button 컴포넌트를 배치합니다.
Edit 컴포넌트는 컴포넌트 툴바에서 Button 컴포넌트에서 2번째 위치에 있습니다.
2
Edit 컴포넌트를 마우스 왼쪽 버튼으로 클릭합니다.
3
속성창에서 Edit 컴포넌트의 left, top, height 속성값을 아래와 같이 변경합니다.
left: 30
top: 30
height: 50
4
Button 컴포넌트를 마우스 왼쪽 버튼으로 클릭합니다.
5
속성창에서 Button 컴포넌트의 left 속성값을 지우고 right, top, height, width 속성값을 아래와 같이 변경합니다.
left 속성값 대신 right 속성값을 설정해서 화면 오른쪽에 Button 컴포넌트의 위치를 고정시킬 수 있습니다.
right: 30
top: 30
height: 50
width: 120
6
Edit 컴포넌트를 마우스 왼쪽 버튼으로 클릭합니다.
7
마우스 포인터를 Edit 컴포넌트 가운데 표시된 "+" 모양 위로 이동합니다.
마우스 포인터가 손 모양으로 바뀌는 것을 확인합니다.
8
마우스 왼쪽 버튼을 누른 상태에서 Button 컴포넌트로 드래그합니다.
9
Button 컴포넌트의 색상이 바뀌면 마우스 왼쪽 버튼을 놓습니다.
아래 그림과 같이 Button 컴포넌트 위에 편집창에 나타나면 숫자 입력하는 부분을 20으로 수정합니다.
Edit 컴포넌트의 right 좌표값을 Button 컴포넌트의 left 좌표값에서 20만큼 떨어지도록 유지한다는 의미입니다.
Edit 컴포넌트를 먼저 배치하고 Button 컴포넌트를 배치한 경우에는 아래와 같은 경고창이 표시됩니다. [Yes] 버튼을 클릭합니다.
10
넥사크로 스튜디오 상단에 있는 툴바 중에서 돋보기 모양 아이콘을 클릭합니다.
만든 화면을 웹브라우저에서 실행하기 장을 참고하세요.
이전 장에서는 Launch 메뉴를 사용했는데 이번 장에서는 QuickView 메뉴를 사용합니다.
Launch는 애플리케이션 전체를 실행할 때 사용하고 QuickView는 현재 편집하는 화면만 실행할 때 사용합니다.
11
웹브라우저에 Edit 컴포넌트와 Button 컴포넌트가 표시되는지 확인하고 웹브라우저의 너비를 변경해봅니다.
웹브라우저의 너비가 작아지면 그에 따라 Edit 컴포넌트의 너비도 작아지고 Button 컴포넌트는 웹브라우저 오른쪽 기준으로 같은 위치에 표시됩니다.
더 많은 내용 찾아보기
여러 컴포넌트의 배치와 정렬 방식에 대한 더 많은 방법은 개발도구 가이드를 참고하세요.