๐ 5์์ ์ฒ์ ๊ณต๋ถํ๋ ํ์ผ์ด๋ค. ์ค๋์ 10๋ถ ๋ ์๊ณ ์ถ๋ค๊ณ ์๊ฐํด์ ์๊ณ ์ผ์ด๋๋ ๊ฐ์ดํ ๋ง์์ผ๋ก ์์ํ ๊ฒ ๊ฐ๋ค.
๐ ์ค๋ ํ์ตํ ๋ด์ฉ
CSS
- HTMl๋ฌธ์ ๋ด CSS style ์ ์ฉ ๋ฐฉ๋ฒ
- CSS Selector
- CSS ์์ฑ
Python ์๊ณ ๋ฆฌ์ฆ ํ์ด
- [Baekjoon]์คํฐ์
- [Baekjoon]์ค๋ฑํฐ์
HTML๋ก ๋ผ๋๋ฅผ ๊ตฌ์ฑํ ํ ์ฌ์ฉ์๊ฐ ๋ณด๊ธฐ ํธํ๋๋ก UI, UX๋ฅผ ๋์์ธ ํด์ฃผ๋ CSS์ ๋ํด์ ํ์ตํ๋ค.
์์๋ฅผ ์ ํํ๋ ๋ฐฉ๋ฒ์๋ ๋ง์ ๊ฒ์ด ์๊ณ , ํท๊ฐ๋ฆด ์ ์๋ ๊ฒ๋ค์ด ์กด์ฌํ๋๋ฐ ์ฃผ์ํด์ ์ฌ์ฉํด์ผ ํ ๊ฒ์ด๋ค.
๐ ์ถ๊ฐ๋ก ๊ณต๋ถํ ๋ด์ฉ
์์ด์ดํ๋ ์(wireframe)
- ์์ด์ดํ๋ ์์ ์ฌ์ฉํ๋ ํด์ ๋ํด ์์๋ณธ๋ค.
๋ชฉ์ (Mock-Up)
Flexbox
๋ด์ผ ๊ณ์ฐ๊ธฐ ๋ชฉ์ ๋ง๋ค๊ธฐ๋ฅผ ํ์ด์ ์งํํ๊ฒ ๋๋๋ฐ ์ด๋, ๋์์ด ๋ ์ ์๋๋ก ์ค๋ํ CSS ๋ถ๋ถ์ ๋ณต์ตํ ๋ค ์กฐ๊ธ ๋ชฉ์ ๊ณผ ์์ด์ด ํ๋ ์ Flexbox์ ๋ํด ๋ฐ๋ก ๊ณต๋ถ๋ฅผ ํ๋ ์๊ฐ์ ๊ฐ๋๋ก ํ๋ค.
๐ ์ค๋ ๋๋์ & ๋ง์ ๊ฐ์ง
- CSS ์ ํ์๋ฅผ ์ฌ์ฉํ ๋ #(id ์ ํ์)์ .(class ์ ํ์) ์ด ๋๊ฐ๊ฐ ๊ฐ์ฅ ํท๊ฐ๋ ธ๋ค. ์ฃผ์ํ๋๋ก ํ์!!
- ๋ด์ผ์ ์ ๋ง ํ๋ ์ฝ๋ฉ์ ํตํด ๊ตฌํ์ ํ๋ ์๊ฐ์ ๊ฐ์ง๊ฒ ๋๋ค. ์ด๋ฅผ ๋๋นํ๋๋ก ํ์!!
'Daily > Today I Learned' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
22.05.04_TIL (0) | 2022.05.04 |
---|---|
22.05.03_TIL (0) | 2022.05.03 |
22.05.01_TIL(์ผ์ฃผ์ผ๊ฐ ํ๊ณ ) (0) | 2022.05.01 |
22.04.30_TIL (0) | 2022.04.30 |
22.04.29_TIL (0) | 2022.04.29 |