Text, Auto Layout

📝 텍스트 속성

 

- vertical trim : 글자 정렬 기준을 잡아주는 거. 주로 버튼 디자인할 때 폰트 상하 정렬 맞출 때 사용

- paragraph spacing : 문단과 문단 사이의 간격

- Truncate text : 텍스트가 정해진 영역을 넘어설 때 어떻게 보여줄지 결정. 주로 말줄임표(…) 처리할 때 사용

- auto width : text의 가로영역. 텍스트 쓰면 가로 길이가 텍스트 양에 맞춰 자동으로 늘어남.

- auto height : text의 세로영역. 텍스트 쓰면 세로 높이가 텍스트 양에 맞춰 자동으로 늘어남

- fixed size : 텍스트 영역 고정크기로 유지

 

 

 

---

 

 

 

 

📐 오토레이아웃 (피그마의 꽃)

 

•  언제 오토레이아웃이고, 언제 그냥 프레임이야?
  • 자동으로 뭘 설정해놓은 값이 있으면 👉 오토레이아웃! (얘네끼리 알아서 움직임)
  •  아무것도 설정된 게 없으면 👉 프레임! (그냥 디자인하는 상자)
• 오토레이아웃 만드는 두 가지 방법!
  • 1. 프레임을 먼저 그린 다음 오토레이아웃 만들기:
    • 오토레이아웃 방향(가로/세로)을 설정해두면, 요소를 추가할 때 늘어나는 방향이 정해짐
    • Wrap 기능은 기본 방향이 가로인데, 프레임 크기를 줄이면 요소들이 자동으로 아래 줄로 내려옴

 

• 2. 요소들을 먼저 그린 다음 오토레이아웃 만들기:
  • 원하는 요소들을 다 만들고 한 번에 오토레이아웃으로 묶는 거지. 편한 대로 고르면 됨

 

 

오토레이아웃 핵심 속성: Fixed vs Hug

 

• Fixed Width (고정 너비):
  • 프레임의 너비를 딱 고정된 값으로 유지하는 속성
  • 안에 내용이 많아지든 적어지든 프레임 크기는 절대 안 변함
  • 예시: 로그인 폼 입력 필드 너비를 300px로 항상 고정하거나, 아이콘처럼 크기가 정해진 요소를 만들 때 사용
• Hug Width (내용에 안기는 너비):
  • 프레임의 크기를 내부 요소의 크기에 맞춰서 자동으로 조절하는 속성.
  •  예시: 버튼처럼 텍스트 길이에 따라 너비가 계속 바뀌어야 할 때 사용.

 

 

---

 

 

 

🚀 실습은 이렇게!

- 높이 너비의 설정값을 조절해가며 자동으로 크기가 조절되는 테이블 만들어보기.