๋ง์ฐ์ค๋ฅผ ๋ฐ๋ผ ์์ง์ด๋ ์กฐ๋ช ํจ๊ณผ ๊ตฌํํ๊ธฐ
CSS, JS๋ฅผ ํ์ฉํ์ฌ ์คํฌํธ๋ผ์ดํธ ํจ๊ณผ ๋ง๋ค๊ธฐ
Web
Javascript๋ก ์ํ div๋ฅผ ํ๋ฉด์์ ๋ฒ์ด๋์ง ์๊ฒ ์ถ๋ ฅํ๊ธฐ
์์๋ฅผ ํ๋ฉด ๋ฐ์ผ๋ก ๋๊ฐ์ง ์๊ฒ ํ๊ณ ํ๋ฉด ํฌ๊ธฐ์ ๋ง์ถฐ ์กฐ์ ํ๊ธฐ
ํ์๊ฐ์ ํ์ด์ง ๊ตฌํํ๊ธฐ : input ์ ํจ์ฑ ๊ฒ์ฌ์ ์๋ฌ ๋ฉ์ธ์ง ์ถ๋ ฅ
HTML, CSS, VanillaJS ํ ์ด ํ๋ก์ ํธ : ์์ด๋, ๋น๋ฐ๋ฒํธ ์ ํจ์ฑ ๊ฒ์ฌ ๊ฒฐ๊ณผ์ ๋ฐ๋ผ ์๋ฌ ๋ฉ์ธ์ง ์ถ๋ ฅํ๊ธฐ
ํ์๊ฐ์ ํ์ด์ง ๊ตฌํํ๊ธฐ : select๋ก ์ด๋ฉ์ผ๊ณผ ์๋ ์์ผ ์ ๋ ฅ
HTML, CSS, VanillaJS ํ ์ด ํ๋ก์ ํธ : select ํ๊ทธ, option ๋์ ์์ฑ, ์๋ ์์ผ ์ ํจ์ฑ ๊ฒ์ฌ๊น์ง
ํ์๊ฐ์ ํ์ด์ง ๊ตฌํํ๊ธฐ : input ๋ด๋ถ์ ๋ฒํผ, ์ด๋ฉ์ผ ๋๋ฉ์ธ ๋๋กญ๋ค์ด
HTML, CSS, VanillaJS ํ ์ด ํ๋ก์ ํธ : input ๋ด๋ถ์ ๋ฒํผ ๋ฃ๊ธฐ, ์ปค์คํ drop down ๊ตฌํํ๊ธฐ
CSS ํ์ดํฌ๊ทธ๋ํผ ์์ฑ ์ ๋ฆฌ & ์ค์ต ์ฝ๋
๊ธ์จ์ฒด๋ ์ ๋ ฌ, ์์ ๋ฑ์ ๊ด๋ จ๋ ํ์ดํฌ๊ทธ๋ํผ์ ๋ํด ์ค์ต์ ํตํด์ ์์๋ณด๊ธฐ
CSS ์ ํ์ ์ ๋ฆฌ์ ์ค์ต ์์
์ ํ์ select์ ์ข ๋ฅ์ ํน์ง, ๊ทธ๋ฆฌ๊ณ ์ค์ต ์ฝ๋์ ์คํ ๊ฒฐ๊ณผ
HTML form ๋ด๋ถ์ ํ๊ทธ์ ์์ฑ๋ค : input, textarea, label, select
form ๋ด๋ถ์ ํ๊ทธ์ ์์ฑ๋ค ํ๋ฒ์ ์ ๋ฆฌํ๊ธฐ
HTML ํ๊ทธ์ ์์ฑ ์ ๋ฆฌ : ์์ค ์ฝ๋์ ์คํ ๊ฒฐ๊ณผ
HTML์ด๋? ๊ทธ๋ฆฌ๊ณ ์ฌ๋ฌ๊ฐ์ง HTML ํ๊ทธ์ ์์ฑ ํ๋ฒ์ ์ ๋ฆฌํ๊ธฐ
CSS ์์๊ณผ cascading
CSS ํจ๊ณผ๋ค ๊ฐ์ ๊ท์น