์น์ ๊ฐ๋ฐํ๋ค๋ณด๋ฉด ์ต์ํ HTML ํ๊ทธ๋ค๋ง ์ฌ์ฉํ๊ฒ ๋๊ณ ๊ทธ์ธ ๊ธฐ๋ฅ์ ์ธ ๋ถ๋ถ๋ค์ javascript๋ css๋ก ๊ตฌํ์ ํ๊ฒ ๋๋๋ฐ (div, span anchor, header, list.. ๋ฑ) ์์ฃผ ์ ์ฉํ๋ฉด์ ๊ฐ๋ฐ์๋ค์ด ์ ๋ชจ๋ฅด๋ ํ๊ทธ๋ค์ ํ๋ฒ ์ดํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค. CSS ,JS๋ก๋ง ๊ฐ๋ฅํ๋ค๊ณ ์๊ฐํ ๊ฒ์ ์ด์ HTML๋ก ์ฌํํ๊ฒ ๊ฐ๋ฐํด ๋ณด์ธ์.
progress, meter
<progress value="50" min="0" max="100"></progress>
<meter value="10" min="0" max="100" low="20" high="65" optimum="15"></meter>
meter
๋ ์์ฑ์ ๋ฐ๋ผ ๊ฐ์ด ๋๊ณ ๋ฎ์๋ ์์์ ๋ค๋ฅด๊ฒ ์ค์ ํ์ฌ ์์ ์ ์งํ์ํ๋ฅผ ํํํ ์ ์๋ค. ๋ฏธ์ธ๋จผ์ง ์ํ์ ๊ฐ์ ์ข์, ๋์จ, ๋งค์ฐ๋์จ ๋ฑ์ ์ํ๋ฅผ ํจ๊ป ํํํ๊ธฐ์ ์ ํฉํฉ๋๋ค.
details, summary
mat-expansion-panel
๊ณผ ๊ฐ์ ์ ์ ์ ํด๋ฆญ์ผ๋ก ์ ๋ณด๋ฅผ ๋ณด์ฌ์ฃผ๊ณ ์จ๊ธฐ๋ ํจํด ์ ์ฉ์ด ๊ฐ๋ฅํฉ๋๋ค.
<details>
<summary>ํด๋ฆญ ์ ๋ณผ ์ ์๋ ์์ญ</summary>
<span>ํด๋ฆญ ํ์๋ง ํ์๋๋ ์์ญ</span>
</details>
๋ฌ๋ ฅ, ๋ ์ง ์ ํ๊ธฐ
input ํ๊ทธ์ type์ผ๋ก ์ค์ ์ด ๊ฐ๋ฅํฉ๋๋ค. ๋จ ๋ธ๋ผ์ฐ์ ๋ง๋ค UI๊ฐ ๊ฐ๋ฅด๊ฒ ํํ๋ฉ๋๋ค.
<input type="date"/>
<input type="week"/>
<input type="month"/>
<input type="time"/>
picture
์ ์ ์ ์ฅ์น๋ ํ๊ฒฝ์ ๋ฐ๋ผ ๊ฐ๊ธฐ ๋ค๋ฅธ ๋ฒ์ ์ ์ด๋ฏธ์ง๋ฅผ ํ์๊ฐํ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฏธ์ง ํฌ๋งท์ ์ง์ํ์ง ์์ ๋ ๋ค๋ฅธ ํฌ๋งท์ ์ ๊ณตํ ์ ์์ต๋๋ค.
<picture>
<source srcset="src/01.jpeg" media="(min-width:1200px)"/>
<source srcset="src/02.jpeg" media="(min-width:900px)"/>
<source srcset="src/03.jpeg" media="(min-width:500px)"/>
<img src="src/04.jpeg" />
</picture>
๐ก ํ๊ฒฝ์ ๋ง๋ ์ด๋ฏธ์ง๋ฅผ ๋ค์ด๋ก๋ ํด์ ๋ณด์ฌ์ค ์ ์์ผ๋ฏ๋ก, ํ์ด์ง ๋ก๋ฉ ์๋๋ฅผ ๋์ผ ์ ์์.
datalist
javascript ์์ด ์๋์์ฑ ๊ธฐ๋ฅ์ ๋ง๋ค์ ์๊ณ ํํฐ ๊ธฐ๋ฅ๊น์ง ์ ๊ณต ํฉ๋๋ค.
<label for="movie">What is your favourite movie?</label>
<input type="text" list="movie-options"/>
<datalist id="movie-options">
<option value="Dune"/>
<option value="Dark waters"/>
<option value="The Artist"/>
<option value="The Avengers"/>
<option value="Iron Man"/>
<option value="Iron Man II"/>
<option value="Matrix"/>
</datalist>
์ฃผ์์ฌํญ
input์ list์ datalist์ id๋ ๋์ผํด์ผ๋จ
๋ง์น๋ฉฐ
์ ์ฉํ๊ณ ๊ฐ๋จํ๊ฒ ์ฌ์ฉํ ์ ์๋ HTMLํ๊ทธ ์ด๋ ๊ผญ ๊ธฐ์ตํด์ ํ์ํ๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค.
(์ถ์ฒ : https://www.youtube.com/watch?v=EMOlLLTAZMs)