π»HTML5μ μλ‘μ΄ κΈ°λ₯β‘π»
- HTML5λ‘ λ²μ μ
νλ©΄μ κΈ°μ‘΄μλ μ½λλ‘ κ΅¬ννλ κΈ°λ₯λ€μ΄ μμ±μ΄λ μ΅μ
μΌλ‘ μ겨 κ°λ¨νκ² κ΅¬ν κ°λ₯ν΄μ‘λ€.
1. progress (μ§νμ¨)
- μ§ν μ€μΈ μμ
μ μ§ν μνλ₯Ό μκ°μ μΌλ‘ λνλΈλ€.
- value: 0λΆν° 1κΉμ§μ κ°μΌλ‘, λ°±λΆμ¨μ λνλΈλ€.
- μ΅λκ° μ€μ μ ν΅ν΄ μ§νμ λ²μλ₯Ό μ‘°μ ν μ μλ€.
- μ§ν μνλ₯Ό λνλ΄λ―λ‘ μ΅μκ° μ€μ μ νμνμ§ μλ€.
- λμμΈ μ»€μ€ν°λ§μ΄μ§μ΄ μ΄λ €μ°λ©°, μΌλ°μ μΌλ‘ μΈλΆ λΌμ΄λΈλ¬λ¦¬μ νμ§μ΄ λ λλ€.
<body>
<progress value="0"></progress><br>
<progress value="0.2"></progress><br>
<progress value="0.5"></progress><br>
<progress value="0.7"></progress><br>
<progress value="1"></progress><br>
</body>
2. meter
- μ«μλ₯Ό λ§λ κ·Έλν ννλ‘ λνλΈλ€.
- μμ±
- min : μ΅μκ°μ μ€μ ν μ μλ€.
- high : λ―Έν°μ κ°μ΄ νΉμ μνκ°μ λμμ λ μκ°μ μΌλ‘ κ°μ‘°νλ€.
- low : λ―Έν°μ κ°μ΄ νΉμ ννκ° μ΄νμΌ λ μκ°μ μΌλ‘ κ°μ‘°νλ€.
<body>
<meter value="0.5"></meter><br>
<meter value="-50" min=-100 max="100"></meter><br>
<br>
<b>value</b> < low <meter value="-50" min=-100 max="100" high="80" low="20"></meter><br>
low < <b>value</b> > high <meter value="50" min=-100 max="100" high="80" low="20"></meter><br> <!-- -->
<b>value</b> > high <meter value="90" min=-100 max="100" high="80" low="20"></meter><br> <!-- -->
</body>
3. details
- μ£Όλ‘ summary μμμ ν¨κ» μ¬μ©νμ¬ μ 보λ₯Ό νΌμΉκ±°λ μ¨κΈΈ μ μλ μμμ μμ±νλ€.
- p νκ·Έμ κ°μ΄ μ¬μ©νμ¬ λΆκ°μ μΈ μ 보λ₯Ό μ 곡ν μ μλ€.
<body>
<details>
<summary>μλ°λ</summary>
<p>μλ°λ CμΈμ΄μ κ°μ²΄ μ§ν₯μ κΈ°λ₯μ μΆκ°νμ¬ λ§λ C++κ³Ό λ¬λ¦¬, μ²μλΆν° κ°μ²΄ μ§ν₯ μΈμ΄λ‘ κ°λ°λ νλ‘κ·Έλλ° μΈμ΄μ΄λ€. μλ°λ μλ° κ°μ λ¨Έμ (JVM, Java Virtual Machine)μ μ¬μ©νμ¬ μ΄μ체μ μ λ
립μ μΌλ‘ λμν μ μλ€.
λ°λΌμ μλ°λ μ΄λ μ΄μ체μ μμλ κ°μ ννλ‘ μ€ν λ μ μλ€.</p>
</details>
</body>
μ’)μ¨κΉ μ°)νΌμΉ¨
4. fieldset
- νΌ μ»¨νΈλ‘€λ€μ κ·Έλ£Ήμ λ¬ΆκΈ° μν νκ·Έμ΄λ€.
- μ
λ ₯ λ°λ μ 보λ₯Ό μκ°μ μΌλ‘ κ·Έλ£Ήννλ€.
- legend νκ·Έλ₯Ό μ¬μ©νμ¬ κ·Έλ£Ήμ μ λͺ©μ μ€μ ν μ μλ€.
<body>
<fieldset>
<legend align="left">λ‘κ·ΈμΈ</legend>
μμ΄λ: <input type="text" size=10><br>
μμ΄λ: <input type="text" size=10>
</fieldset>
</body>
5. marquee
- νμ¬λ μ μ¬μ©λμ§ μλλ€.
- μ’μ 곡κ°μμ λ€λμ ν
μ€νΈλ₯Ό μ€ν¬λ‘€λ§νμ¬ μΆλ ₯ν μ μλ€.
- μμ±:
- behavior: μ€ν¬λ‘€λ§ λμμ μ€μ νλ€.
- loop: μ€ν¬λ‘€λ§μ λ°λ³΅ν μ§ μ¬λΆλ₯Ό κ²°μ νλ€.
- κΈ°λ³Έκ°μ -1λ‘, 무ν루νμ΄λ€.
- direction: μ€ν¬λ‘€λ§ λ°©ν₯μ μ€μ νλ€.
- scrolldelay : μ€ν¬λ‘€μ΄ ν λ² μμ§μ΄λλ° κ±Έλ¦¬λ μκ°(λ°λ¦¬μ΄)μ μ§μ νλ€.
- κ°μ΄ μμμλ‘ μ€ν¬λ‘€μ΄ λΉ¨λΌμ§κ³ , κ°μ΄ ν΄μλ‘ μ€ν¬λ‘€μ΄ λλ €μ§λ€.
- scrollamount : ν λ²μ λͺ ν½μ
μ© μ€ν¬λ‘€ν μ§λ₯Ό μ§μ νλ€.
<body>
<marquee>22μΌ λ―Έκ΅ μ¦μλ₯Ό λ°λΌ μ½ 1% νλ½ μΆλ°ν μ½μ€νΌλ μ€μ 9μ 2λΆ νμ¬ μ½μ€νΌλ μ λ μ’
κ°λ³΄λ€ 22.56ν¬μΈνΈ(0.90%) λ¨μ΄μ§ 2,492.41μ΄λ€.</marquee>
<marquee scrolldelay="60" >22μΌ λ―Έκ΅ μ¦μλ₯Ό λ°λΌ μ½ 1% νλ½ μΆλ°ν μ½μ€νΌλ μ€μ 9μ 2λΆ νμ¬ μ½μ€νΌλ μ λ μ’
κ°λ³΄λ€ 22.56ν¬μΈνΈ(0.90%) λ¨μ΄μ§ 2,492.41μ΄λ€.</marquee>
<marquee scrollamount="10">22μΌ λ―Έκ΅ μ¦μλ₯Ό λ°λΌ μ½ 1% νλ½ μΆλ°ν μ½μ€νΌλ μ€μ 9μ 2λΆ νμ¬ μ½μ€νΌλ μ λ μ’
κ°λ³΄λ€ 22.56ν¬μΈνΈ(0.90%) λ¨μ΄μ§ 2,492.41μ΄λ€.</marquee>
</body>
6. video
- λμμμ μ¬μνκΈ° μν νκ·Έλ‘, λ€μν μμ±μ νμ©νμ¬ λμμμ 컨νΈλ‘€νκ³ μ μ΄ν μ μλ€.
- μμ±
- controls : λμμμ μ¬μ, μΌμμ μ§, μ€ν΅, λ³Όλ₯¨ μ‘°μ λ±μ ν μ μκ² μ»¨νΈλ‘€ μ°½μ΄ λ¬λ€.
- autoplay
- λμμμ μλμΌλ‘ μ¬μνλλ‘ μ€μ νλ€.
- λ€λ§, ν¬λ‘¬κ³Ό μ¬ν리μμλ μ΄ μμ±λ§μΌλ‘λ μ μ©λμ§ μμΌλ―λ‘, muted μμ±κ³Ό ν¨κ» μ¬μ©νλ€. (<video autoplay muted>)
- muted : λμμμ μ리λ₯Ό μμκ±°νλ€.
- width, height : λμμμ κ°λ‘μ μΈλ‘ ν¬κΈ°λ₯Ό μ§μ νλ€.
- κ°μ ν½μ
λ¨μλ‘ μ§μ νκ±°λ, μλμ μΈ λ¨μμΈ %λ₯Ό μ¬μ©ν μ μλ€.
<body>
<video src="./video/1.mp4" controls autoplay muted></video>
</body>
