๐ŸŽจ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ž˜ ๋ชจ๋ฅด๋Š” HTML ํƒœ๊ทธ

@winuss ยท January 16, 2022 ยท 1 min read

์›น์„ ๊ฐœ๋ฐœํ•˜๋‹ค๋ณด๋ฉด ์ต์ˆ™ํ•œ HTML ํƒœ๊ทธ๋“ค๋งŒ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๊ณ  ๊ทธ์™ธ ๊ธฐ๋Šฅ์ ์ธ ๋ถ€๋ถ„๋“ค์€ javascript๋‚˜ css๋กœ ๊ตฌํ˜„์„ ํ•˜๊ฒŒ ๋˜๋Š”๋ฐ (div, span anchor, header, list.. ๋“ฑ) ์•„์ฃผ ์œ ์šฉํ•˜๋ฉด์„œ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ž˜ ๋ชจ๋ฅด๋Š” ํƒœ๊ทธ๋“ค์„ ํ•œ๋ฒˆ ์‚ดํŽด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. CSS ,JS๋กœ๋งŒ ๊ฐ€๋Šฅํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•œ ๊ฒƒ์„ ์ด์ œ HTML๋กœ ์‹ฌํ”Œํ•˜๊ฒŒ ๊ฐœ๋ฐœํ•ด ๋ณด์„ธ์š”.

progress, meter

<progress value="50" min="0" max="100"></progress>

progress

<meter value="10" min="0" max="100" low="20" high="65" optimum="15"></meter>

meter
meter

meter๋Š” ์†์„ฑ์— ๋”ฐ๋ผ ๊ฐ’์ด ๋†’๊ณ  ๋‚ฎ์„๋•Œ ์ƒ‰์ƒ์„ ๋‹ค๋ฅด๊ฒŒ ์„ค์ •ํ•˜์—ฌ ์ž‘์—…์˜ ์ง„ํ–‰์ƒํƒœ๋ฅผ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ฏธ์„ธ๋จผ์ง€ ์ƒํƒœ์™€ ๊ฐ™์€ ์ข‹์Œ, ๋‚˜์จ, ๋งค์šฐ๋‚˜์จ ๋“ฑ์˜ ์ƒํƒœ๋ฅผ ํ•จ๊ป˜ ํ‘œํ˜„ํ•˜๊ธฐ์— ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค.

details, summary

mat-expansion-panel๊ณผ ๊ฐ™์€ ์œ ์ €์˜ ํด๋ฆญ์œผ๋กœ ์ •๋ณด๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ  ์ˆจ๊ธฐ๋Š” ํŒจํ„ด ์ ์šฉ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

<details>
	<summary>ํด๋ฆญ ์ „ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์˜์—ญ</summary>
	<span>ํด๋ฆญ ํ›„์—๋งŒ ํ‘œ์‹œ๋˜๋Š” ์˜์—ญ</span>
</details>

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๋Š” ๋™์ผํ•ด์•ผ๋จ

datalist

๋งˆ์น˜๋ฉฐ

์œ ์šฉํ•˜๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” HTMLํƒœ๊ทธ ์ด๋‹ˆ ๊ผญ ๊ธฐ์–ตํ•ด์„œ ํ™œ์š”ํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

(์ถœ์ฒ˜ : https://www.youtube.com/watch?v=EMOlLLTAZMs)

@winuss
Hello :) Developer notes!