동영상 강좌

B. Position & Layout

2. Layout, Static, Relative

• 기능
  • Position: left, top / right, bottom / center
  • Size: auto, stretch
  • Display: inline, block, flex
  • Layout: absolute, relative, static, margin, padding
  • Layout Component: FlexLayout, GridLayout

• Layout
  • static
    • 부모 컴포넌트의 빈자리를 찾아가서 배치되는 형식
    • 복사 붙여넣기 해도 차례대로 채워짐
      
    • 버튼과 버튼 사이에 공백을 주고 싶을 때는 Margin을 설정해야 함
      → Margin right: 10px를 줬을 때
  • relative
    • static과 같이 빈자리를 찾아가서 배치되는 형식이지만, Position의 Left, Right, Top, Bottom을 설정할 수 있음

• 실습
  배운 내용을 생각하며 뷰 구조를 생성하고 Layout을 사용해 LeftBar 설정하는 실습

---

총정리

• Layout 학습
  • static
    • 부모 컴포넌트에 빈자리를 찾아가서 배치되는 형식
    • Margin으로 간격 조정 가능
  • relative
    • static과 비슷한 기능
    • Margin뿐만 아니라 Position의 Left, Right, Top, Bottom으로도 간격 조정 가능

• 중요 포인트
  • 레이아웃 나누는 방법
  • 뷰 분할 및 세팅하기
  • 세팅된 뷰 안에 컴포넌트 배치하기
  • static 옵션을 이용해 컴포넌트 추가

• 버전 차이
  • 강의 버전에는 이미지를 삽입했을 때, 이미지가 부모 뷰의 크기에 맞춰 삽입되었지만 3.2.9 버전에서는 크기를 설정해줘야 함