ํฐ์คํ ๋ฆฌ ๋ทฐ
Today I learned
๐ HTML, CSS
HTML์์ <label> ํ๊ทธ์ <input> ํ๊ทธ์ ๋ํด์ ๊ณต๋ถํ๋ค.
์ง๊ธ๊น์ง๋ ์ฌ์ฉํ ์ผ์ด ๋ง์ด ์์์ด์ ์ ๋ชฐ๋๋๋ฐ MDN ๋ฌธ์์ ๋ธ๋ก๊ทธ ๊ธ๋ค์ ์ฐพ์ ๋ณด๋ ๋ค์ํ๊ฒ ์ฌ์ฉ์ด ๋๊ณ ์๋ ๋ฏ ํ๋ค.
CSS์์๋ display ์์ฑ์ธ grid ์ flex์ ๋ํด์ ๊ณต๋ถํ๋ค.
๊ฐ์ธ ๊ณผ์ ๋ผ๋๋ฅผ ์ก๋๋ฐ flex๋ก๋ ๋ด ์๋๋๋ก ๋ ์ด์์์ด ์กํ์ง ์์์ ๊ฒฐ๊ตญ grid๋ก ์์ ํ๋ค.
๐ ์ธํ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ ๊ฐ์
object ์ค๋ธ์ ํธ์ ๋์คํฌ๋ฆฝํฐ ํ๋กํผํฐ์ ๋ํด์ ๋ฐฐ์ ๋ค.
ํ์ง๋ง ์ฌ์ ํ ์ค๋ธ์ ํธ๋ ์ ๋ชจ๋ฅด๊ฒ ๋ ๊ฑธ....?
๐ React ์๋ จ ์ฃผ์ฐจ ๊ฐ์ธ ๊ณผ์ ๊ธฐ๋ฅ ๊ตฌํ ์๋ฃ
์ด๋ฒ ์ฃผ React ๊ฐ์ธ ๊ณผ์ ์ ํ์ ์๊ตฌ์ฌํญ์ ๋ํด์๋ ๊ตฌํ์ ๋ชจ๋ ์๋ฃํ๋ค.
์ฌ์ค ์์ ํ๊ธฐ์ ์ญ์ ํ๊ธฐ๋ ํ์ ์๊ตฌ์ฌํญ์ ์๋์๋๋ฐ ๊ทธ๋ฅ ์์ฑํ๊ธฐ ํ๋ ๊น์ ๊ฐ์ด ํ๋ค.
๋ฉ์ธ ํ๋ฉด ๋ ์ด์์์ ์ก๋ ๋ฐ ๊ฝค ์ ๋ฅผ ๋จน์๋ค ใ _ใ
display: flex ์์ฑ์ ์คฌ์ ๋ justify-content๋ฅผ center๋ก ์ค์ ํ๋ฉด ๋ง์ฝ ์นด๋ ์๊ฐ ํ์์ธ ๊ฒฝ์ฐ์๋
๋ง์ง๋ง ์นด๋๊ฐ ์๋ ํ๋ฉด์ฒ๋ผ ์ผ์ชฝ์ ๋ถ๋ ๊ฒ ์๋๋ผ ์ ๊ฐ์ด๋ฐ์ ์์ด์ ์ด์ํ๋ค.
๊ทธ๋ ๋ค๊ณ flex-start๋ก ์ค์ ํ์๋ ์ผ์ชฝ์ผ๋ก ์น์ฐ์ณ์ ์ด์ํ๊ณ ..
๊ทธ๋์ ์ด๋ป๊ฒ ํ ๊น ๊ณ ๋ฏผํ๋ค๊ฐ ์นด๋๊ฐ ๋ถ๋ ์น์ ์ display๋ฅผ grid๋ก ์์ ํ๋๋ ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์๋ค.
์ด์ CSS๋ง ์๋ณด๋ฉด ๋๋ค!
Tomorrow I Will
๐ React ๊ฐ์ธ ๊ณผ์ ์์ฑํ๊ธฐ
๋ฌดํ ์คํฌ๋กค์ ๊ตฌํ์ ํ ์ง ๋ง์ง ๊ณ ๋ฏผ์ค์ด๋ค.
๐ React ํ ๊ณผ์
๊ฐ์ธ ๊ณผ์ ๊ฐ ๋๋๋ฉด ๋ด๊ฐ ๋ด๋นํ ํ ๊ณผ์ ์ฃผ์ ์์๋ณด๊ณ ์ ๋ฆฌํ๊ธฐ
๐ ํ๋ก๊ทธ๋๋จธ์ค ์๊ณ ๋ฆฌ์ฆ ํ ๋ฌธ์ ํ๊ธฐ
์ด์ ๊ฐ์ธ๊ณผ์ ํ๋ค๊ณ ๋ง์์ด ์กฐ๊ธํด์ ธ์ ์๊ณ ๋ฆฌ์ฆ ๋ฌธ์ ๋ฅผ ํ์ง ๋ชปํ๋ค.
์ค๋ ๊ผญ ํ๊ธฐ!
'what i learned > TIL' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[TIL] 2021/11/26 Fri - (0) | 2021.11.26 |
---|---|
[TIL] 2021/11/25 Thu - ์ ์ ์ฒด๋ฆฌ์ธ์. (2) | 2021.11.25 |
[TIL] 2021/11/23 Tue - (0) | 2021.11.23 |
[TIL] 2021/11/22 Mon - (0) | 2021.11.22 |
[TIL] 2021/11/20 Sat - ๋ด ์ํ๊ฐ ๋ฉ๋ก (5) | 2021.11.20 |