์ฌ์ ์บ ํ D-5
๐To Do List
* 2์ฃผ์ฐจ ๊ฐ์: ํผ๊ทธ๋ง - ํ๋ ์๊ณผ ํฌ์ง์
01 2์ฃผ์ฐจ ๊ฐ์ - ํผ๊ทธ๋ง: ํ๋ ์๊ณผ ํฌ์ง์
๐ํ๋ ์๊ณผ ๊ทธ๋ฃน
*๋์์ธ์ด ์ฝ๋๋ก ๋ฐ๋๋ ๊ณผ์
1) ๋์์ธ → ์ฝ๋๋ก ๋ณํ
2) ์ด๋, ์ฝ๋๋ ๋์์ธ์ ๋ ๊ณ ์ฒ๋ผ ์๋๋ค
- ์ฝ๋๋ ์์์ ์๋๋ก ์๋๋ฐ, ์ด๋ฅผ ๋ฐ์ค๋ชจ๋ธ์ด๋ผ๊ณ ํ๋ค.
3) ์น,์ฑ์ด ์ฝ๋๋ฅผ ์ฝ๊ณ ๋์์ธ์ผ๋ก ๋ฐ๊ฟ
๐กํ๋ ์(Frame)์ด๋?
- ์ฝ๋ ๋ธ๋ก์ ๋ง๋๋ ๊ธฐ๋ฅ์ด์ ์ค์ ํ๋ฉด์ผ๋ก ์ธ์ํ๋ ๊ฐ์ฒด (์ค์ ๊ตฌํ๋ ํ๋ฉด ์บ๋ฒ์ค๋ผ๊ณ ์๊ฐํ๋ฉด ๋ ๋ฏ)
'์ปจํ ์ด๋(Container)'๋ผ๊ณ ๋ ๋ถ๋ฆผ
- ๊ฐ๋ฐ์ ํ์ํ ์์ฑ ์ ์ฉO
- ํ๋ ์์ผ๋ก ๋ฌถ๋ ๋จ์ถํค: ctrl + alt + G (์ฐ์ธกํด๋ฆญํด์ ์ ํ ๊ฐ๋ฅ)
๐ก๊ทธ๋ฃน(Group)์ด๋? ( ์ฝ๋๋ก ๋ณํX → ์ค๋ฌด์์ ์ ์ฌ์ฉX)
- ๊ฐ์ฒด๋ฅผ ํ๋๋ก ๋ฌถ๋ ๊ฒ.
- ํธ์ง, ์กฐ์ ๋๋ ์ฌ๋ฌ ๊ฐ์ฒด๋ฅผ ํ๋๋ก ๋ด์ ๋
- ๊ฐ๋ฐ์ ํ์ํ ์์ฑ ์ ์ฉX
- ๊ทธ๋ฃน์ ์ฝ๋๋ธ๋ก์ผ๋ก ์ธ์X, ๋์ SVG์ด๋ฏธ์ง๋ก ์ธ์O
โ์ฃผ์์ : ํฌํ ์ต, ์ผ๋ฌ์คํธ๋ฅผ ์ผ๋ ๋์์ด๋๊ฐ์ ๊ฒฝ์ฐ ํผ๊ทธ๋ง ์ด์ฉ์์๋ ๊ทธ๋ฃน์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ๋น๋ฒ.
โ โ โ ๊ทธ๋ฃน ์ฌ์ฉํ์ง ๋ง๊ณ ํ๋ ์์ ์ฌ์ฉํ์ฌ ๋ฌถ์ด์ค์ผํ๋ค. (์ฝ๋๋ก ๋ํ๋ด์ผํ๊ธฐ ๋๋ฌธ) โ โ โ
๊ฐ์๊ฐ ์ด์ง ์ด๋ ต๊ฒ ์ค๋ช ํ๋ ๋ฉด์ด ์๊ธดํ์ฅ๋ง ์ดํดํ๋ค!!!
๐๋ถ๋ชจ-์์ ๊ด๊ณ์ ๋ ์ด์ด ์ ๋ ฌ
- ๋ ์ด์ด align์, constraints์ ์ํฅ์ ์ค๋ค.
*Tidy up
- ๋จ์ถํค: ctrl + alt + shift + T
- ์ค๊ตฌ๋๋ฐฉ์ ๊ฐ์ฒด ์ ์ฉX / ์ด๋ ์ ๋์ ๊ท์น์ฑ ์๋ ๊ฐ์ฒด ์ ์ฉO
- Distribute vertical spacing: ์์ง ์ ๋ ฌ (์-์ค์-์๋)
- Distribute horizontal spacing: ์ํ ์ ๋ ฌ (์ผ-์ค์-์ค)
์ผ์ชฝ ์ด๋ฏธ์ง์ Tidy up ์ ์ฉํ๋๋ ์ฐ์ธก ์ด๋ฏธ์ง์ฒ๋ผ ๊ฐ๊ฒฉ์ด ๊ท ์ผํ๊ฒ ์ ๋ ฌ๋จ.
๐์คํ ๋ ์ด์์(Auto-layout)โญโญโญ
Margin: ์ค์ ๋ธ๋ก์ ์ฌ์ด์ฆ๊ฐ ๋๋ ๋ด๋ถ ๊ฐ์ฅ์๋ฆฌ ์ฌ๋ฐฑ
Border: ์ค์ ์ฝ๋ ๋ธ๋ก์ ํ ๋๋ฆฌ
Padding: ๋ฐ๊นฅ ์ฌ๋ฐฑ, ๋ค๋ฅธ ์ฝ๋ ๋ธ๋ก๊ณผ์ ๊ฐ๊ฒฉ
[์ปจํ ์ด๋๊ฐ ๋ง๋ค์ด์ง๋ ์๋ฆฌ]
- ๊ฐ์ฒด๋ฅผ ํจ๋ฉ์ผ๋ก ๊ฐ์ธ ์ปจํ ์ด๋ ๋ง๋ค ๋ ์ฌ์ฉ
- ๋ชจ๋ ์ฝ๋๋ธ๋ก์ ๋ด๋ถ์ ์๋ ๊ฐ์ฒด์, ๊ฐ์ฒด๋ฅผ ๋๋ฌ์ผ ํจ๋ฉ์ด ์๋์ผ๋ก ์กฐ์ ๋์ด ๋ง๋ค์ด์ง (์ผ์ผ์ด ๊ฐ๊ฒฉ์ ํ๋ํ๋์ฉ ์กฐ์ ํ๋ค๋ฉด ๋์ฐํ๊ฒ ์ฃ ?)
- ์ฐ๋ฆฌ๊ฐ ๋ง๋๋ UIํฌ๊ธฐ = ๊ฐ์ฒด์ ํฌ๊ธฐ+ํจ๋ฉ
- ์ด๋ ๊ฒ ๋ง๋ค์ด์ง ์ปจํ ์ด๋(๊ฐ์ฒด+ํจ๋ฉ) ํ๋ ํ๋๋ฅผ ๊ท ์ผํ ๊ฐ๊ฒฉ(๊ท์น์ )์ผ๋ก ์ผ๋งํผ ์์์ง ๋ง๋ค ์ ์์.
- ์คํ ๋ ์ด์์ ์์ ๋ ์ด์ด ์์๋ ์ฐ๋ฆฌ๊ฐ ๊ธฐ์กด์ ์์๋ ๋ฐฉํฅ๊ณผ ๋ฐ๋๋ฐฉํฅ. ๋ ์ด์ด์ ์ ์ผ ์๋์ ์๋๊ฒ ์์ ์์นํ ๊ฒ์ ์๋ฏธโ โ โ
[์คํ -๋ ์ด์์ ์์ฑ] - ์ง์ ํด๋น ์์ฑ์ ๋ค์ํ ๋ถ๋ถ์ ํ
์คํธํด๋ณด๊ธธ ๋ฐ๋๋ค.
- ๋ณต์ฌ, ๋ถ์ฌ๋ฃ๊ธฐ ํ์ ๋ ์ด๋ ๋ฐฉํฅ์ผ๋ก ์ถ๊ฐ๊ฐ ๋๋์ง์ ๋ํ ์์ฑ
- ๋จ์ถํค: ๋ณต์ ctrl + D
[์ปจํ ์ด๋ ์คํ ๋ ์ด์์ ๋ง๋๋ 2๊ฐ์ง ๋ฐฉ๋ฒ]
1) ๊ฐ์ฒด ์ ํ → shift + A / ์คํ ๋ ์ด์์ ํด์ง alt + shift + A
2) ๊ฐ์ฒด ์ ํ → ctrl + alt + G (ํ๋ ์ ๊ทธ๋ฃนํ) → ๊ทธ๋ฃนํํ ํ๋ ์ ์ ํ ํ shift + A
- ์ด๋ป๊ฒ ์ฌ์ฉํ ์ง์ ๋ฐ๋ผ ๋ฐฉ๋ฒ์ด 1)๋๋ 2)๊ฐ ๋ ์ ์๋ค. ์ด๊ฑด ์์๋ก ์ฐ์ตํด๋ด์ผ ๊ฐ์ ์ตํ ์ ์์ ๊ฒ ๊ฐ๋ค.
๐ํ๋ ์๊ณผ ์ปจ์คํธ๋ ์ธํธ(Constraint)
๐ก์ปจ์คํธ๋ ์ธํธ(Constraint)๋?
์ ์ฝ(์กฐ๊ฑด), ์ ํ
์คํ ๋ ์ด์์ ์์ ์์ ๊ฐ์ฒด๋ค์ด ์์ง์ด๋ ์กฐ๊ฑด๊ฐ.
- ๋ฐ์ํ ์น, ์ฑ ์ ์ ์ ํ๋ฉด์ ๋ฐ๋ผ ์ผ์ ํ ๊ฐ๊ฒฉ์ผ๋ก ์์ง์ผ ๋์ ๊ท์น์ ๋ง๋ค์ด์ผํ๋ค.
[์ปจ์คํธ๋ ์ธํธ ์์ฑ] - ์ดํดํ๊ธฐ ์ด๋ ค์ด ์์ฑ๋ง ์์ฝ + ์ง์ ํด๋ณด๊ธฐ
- Left and right: ์ผ/์ค ๊ณ ์ → ๊ฐ์ด๋ฐ ๊ฐ์ฒด์ ์์ ๊ฐ๋ก๊ธธ์ด๊ฐ ๋ฐ๋ (๊ฐ์ฒด ์ฌ์ด์ฆ ์ ์งX)
โ ์ผ/์ค ํจ๋ฉ๊ฐ ๊ณ ์ (๊ฐ์ด๋ฐ ๊ฐ์ฒด ์ฌ์ด์ฆ๋ง ๋ณํ๋ค)
- Center: ์ง๊ธ ๋น์จ์์ ๊ฐ์ด๋ฐ ์ ์ง(๊ฐ์ฒด ์ฌ์ด์ฆ ์ ์ง)
- Scale: ์ง๊ธ ๋น์จ์์ ๋์ด๋ ๋งํผ ์ ํํ ๊ฐ์ฒด๋ ๋๊ฐ์ ๋น์จ๋ก ๋์ด๋๊ฑฐ๋ ์ค์ด๋ฆ(๊ฐ์ฒด ์ฌ์ด์ฆ ์ ์งX)
โ ์ผ/์ค ํจ๋ฉ๊ฐ ๊ณ ์ X (์ผ/์ค ํจ๋ฉ๊ฐ, ๊ฐ์ด๋ฐ ๊ฐ์ฒด ์ฌ์ด์ฆ ๋ชจ๋ ๋ณํ๋ค)
๐ํ๋ ์ ๋ฆฌ์ฌ์ด์ง
- ํ๋ ์: ๊ฐ๋ก,์ธ๋ก ๊ณ ์ (=Fixed)
- ํ๋ ์์ ์คํ ๋ ์ด์์์ผ๋ก ๊ฐ์ธ๋ ์๊ฐ, fixed์ธ์ ๋ค๋ฅธ ์ฌ์ด์ฆ๊ฐ์ด ๋ณ๊ฒฝ๋๋๋ฐ ์ด๋ฅผ ๋ฆฌ์ฌ์ด์ง์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.
- ๋ถ๋ชจ์ ๋ฆฌ์ฌ์ด์ง ๊ฐ์ ๋ฐ๋ผ ์์์ ๋ฆฌ์ฌ์ด์ง ๊ฐ๋ ๋ฌ๋ผ์ง๋ค(๋ฐ๋ ์ํฉ๋ ๋ง์ฐฌ๊ฐ์ง)
ex. ๋ถ๋ชจ๊ฐ hug๋ฉด ์์์ fixed / ์์์ด fill์ด๋ฉด ๋ถ๋ชจ๊ฐ fixed
๊ฐ | ์ค๋ช | ์ ํ |
Fixed | ๊ณ ์ ๊ฐ | ๊ณตํต |
Hug | ์์ ์ปจํ
์ด๋์ ํฌ๊ธฐ์ ๋ง์ถฐ ์กฐ์ (์์ ์ปจํ ์ด๋ ํฌ๊ธฐ๊ฐ ๋ณ๊ฒฝ๋จ์๋ฐ๋ผ ๋ถ๋ชจ ์ปจํ ์ด๋๋ ๋์ผํ ๋น์จ๋ก ํฌ๊ธฐ ๋ณ๊ฒฝ๋จ) |
๋ถ๋ชจ๋ง ์ธ ์ ์์ |
Fill | ๋ถ๋ชจ ์ปจํ ์ด๋์ ํฌ๊ธฐ์ ๋ง์ถฐ ์กฐ์ | ์์๋ง ์ธ ์ ์์ |
์ค์ ์ ์ข ์ด๋ ต๋ค ๋ค์ํ ์์๋ฅผ ํตํด ๋ง์ ์ฐ์ต์ด ํ์ํ ๊ฒ์ผ๋ก ๋ณด์ ใ
๐ํฌ์ง์ ์ดํดํ๊ธฐ
๐กํฌ์ง์ (Position)์ด๋?
- ์คํฌ๋กค ์ ์์์ ์์น๋ฅผ ๊ณ ์ , ์กฐ์ ํ๋ ๊ธฐ๋ฅ
- ๊ฐ๋ฐ์์๋ ์ฐ์ด๋ ๋จ์ด
[ํฌ์ง์ ์ข ๋ฅ]
1) Static : ๊ธฐ๋ณธ๊ฐ. ์คํฌ๋กค ์ ๋ชจ๋ ์์๊ฐ ์คํฌ๋กค๋จ.
2) Fixed : ํ๋ฉด ์ ์ฒด์์์ ์์๋ฅผ ๊ณ ์ . ํน์ ๊ฐ์ฒด๋ฅผ fixedํ๋ฉด ๊ทธ ๊ฐ์ฒด๋ง ๊ณ ์ ๋ ์ฑ๋ก ๋ฐฑ๊ทธ๋ผ์ด๋๋ ์คํฌ๋กค๋จ. (ex. ํ๋จ ๋ค๋น๋ฐ)
3) Absolute: ์ปจํ ์ด๋ ์ (๋ถ๋ชจ ์ปจํ ์ด๋ ์)์ ์์๋ฅผ ๊ณ ์ ์ํด.
4) Sticky: ์คํฌ๋กค ์ ํน์ ์์น์ ์์ ๋๋ฌ ์ ๊ณ ์ ๋จ.
[ํฌ์ง์ ์ค์ ๋ฐฉ๋ฒ]
- ํ๋กํ ํ์ ํจ๋์์ ์ค์ .
* Scroll with parent: ๋ถ๋ชจ ์คํฌ๋กค์ ๋ฐ๋ผ๊ฐ๋ค (=Static)
* Fixed (stay in place): ํ์ฌ ์์น์ ๋จธ๋ฌธ๋ค (=Fixed)
* Sticky (stop at top edge): ๋งจ ์ ๋ชจ์๋ฆฌ์์ ๋ฉ์ถ๋ค (=Sticky)
* Absolute: ์คํ ๋ ์ด์์ ํ๋ ์ ์์์๋ง ์ฌ์ฉ ๊ฐ๋ฅ
Retrospect
๐ฅ ํฌํ ์ต, ์ผ๋ฌ์คํธ๋ฅผ ์ฃผ๋ก ์ฌ์ฉํ ์ฌ๋์ผ๋ก์ ํ๋ ์ ๊ทธ๋ฃนํ์ด ์๋, ๊ทธ๋ฃน์ ์ด์ฉํด์ ๊ฐ์ฒด๋ฅผ ๋ฌถ์๋๋ฐ
โ๏ธํ๋ ์์ผ๋ก ๋ฌถ๋๋ค๋ ์ฌ์ค๊ณผ ๊ทธ ์ด์ ์ ๋ํด ์๋กญ๊ฒ ์์๋ค. (์ฐ๋ฆฌ ๋์์ด๋๋ถ๋ค ์กฐ์ฌํ๊ธฐ! ctrl + G ๋ง๊ณ ctrl + alt + G)
๐ฅ ์ ํ๋ธ์์ "์คํ ๋ ์ด์์์ ์ด ๋ฒํผ์ ๋๋ฅด๋ฉด ์ด๋ ๊ฒ ๋ผ์"์ ๊ฐ๋ ๋ง ์์๋๋ฐ ๋ง๋ค์ด์ง๋ ์๋ฆฌ๋ฅผ ์๊ฒ๋๋
โ๏ธ์ฝ๋ฉ๊ณผ ๋์กฐํ์ ๋ ํผ๊ทธ๋ง์์๋ ์ฝ๋ฉ์ด ์ด๋ ๊ฒ ํํ๋๋๊ตฌ๋๋ฅผ ๋๊ผ๋ค. ๊ฐ์ฒด์ ํจ๋ฉ์ผ๋ก ๋ง๋ค์ด์ง๋ค ๋ฉ๋ชจ!