스파이더젠 동영상 강좌: https://wikidocs.net/33719

동영상 강좌

B. Position & Layout

1. Position & Layout Lecture - Basic

• Position 설정하기(절대좌표)
  
  • Placement → Position에서 찾을 수 있음
  • Left(기본값) → Right 변경 시 왼쪽 정렬
  • 마찬가지로 Top(기본값) → Bottom 변경 시 아래쪽 정렬
  • center X 체크 시 X축 가운데 정렬 (= margin: auto 0;)
  • center Y 체크 시 Y축 가운데 정렬 (= margin: 0 auto;)
  • 정렬한 상태에서 페이지의 크기 변경 시 설정된 위치에 고정됨
    Right: 20px, Bottom: 100px인 버튼
    페이지의 크기를 변경해도 버튼의 위치는 똑같이 Right: 20px, Bottom: 100px (X, Y축 가운데 정렬도 똑같음)

• Size 설정하기
  
  • 넓이(Width)와 높이(Height)를 퍼센트(%)로 변경 시 화면의 크기의 n%로 변경됨
  • min: 크기의 최솟값. 크기를 퍼센트(%)로 설정할 경우, 화면이 줄어들어도 min 크기가 되면 줄어들지 않음
  • max: 크기의 최댓값. 크기를 퍼센트(%)로 설정할 경우, 화면이 늘어나고 max 크기가 되면 늘어나지 않음
  • auto: 컴포넌트 안의 컨텐츠의 넓이/높이만큼 자동으로 늘어나는 기능 (라벨은 auto가 기본값)
  • stretch: 화면의 크기가 변경될 때 컴포넌트 크기 또한 함께 변경됨. 컴포넌트의 Position Left 또는 Right 반대편의 margin을 설정하는 느낌
    Width의 stretch: 20%인 Button
    화면이 늘어나도 20%를 유지하며 늘어남

---

총정리

• Position
  • Left/Right: 가로축 좌우정렬
  • Top/Bottom: 세로축 상하정렬
  • center X/Y: 가로축/세로축 가운데 정렬

• Size
  • Width: 넓이 설정
  • Height: 높이 설정
  • auto: 컴포넌트 안의 컨텐츠의 넓이/높이만큼 자동으로 늘어나는 기능 (라벨은 auto가 기본값)
  • stretch: 화면의 크기가 변경될 때 컴포넌트 크기도 함께 변경되는 기능
  • min: 크기의 최솟값
  • max: 크기의 최댓값