πCrucial : Table Basics, Form Element Basic, Button Elements, Labels, Commom input types
πImportant : Table Sections, Range & Text Area, Form validations
πNice to Have : Table Colspan and Rowspan
Table Basic : <td>, <tr>, <th>
βͺ ν μ΄λΈμ ν μ΄λΈ λ°μ΄ν°μ, ν, μ΄λ‘ ꡬμ±λμ΄μΌν¨ -> κ·Έμ μ½ν μΈ μ λ μ΄μμμ μν΄μ μ¬μ©νλ©΄ μλ¨
βοΈ <table> : ν μ΄λΈ λ°μ΄ν°λ₯Ό λνλ΄μ§λ§ ν΄λΉ μμμ 무μΈκ°λ₯Ό λ£μ§ μμΌλ©΄ μμ μμ²΄λ‘ νλ μν μ μμ
βοΈ <td> : table data - λ¨μΌ μ μ λνλ, ν μμμ μ 보λ₯Ό λνλ΄λ ν λΆλΆ
βοΈ <tr> : table row - λ°μ΄ν°λ€μ ν νμ λνλ΄κ² νλ νκ·Έ
βοΈ <th> : table header - κ° μ΄μ΄ 무μμ λνλ΄λμ§ μ λͺ©μ λΆμΌ μ μλ νκ·Έ
Table Sections : <thead>, <tbody>, <tfoot>
βͺ κ·Έλ₯ λ Όλ¦¬ μΉμ μΌλ‘ λλλ μ©λ
βοΈ <thead> : ν μ΄λΈμμ μ΄λκΉμ§ ν€λμΈμ§ λνλ΄λ μ©λ
βοΈ <tbody> : ν μ΄λΈμ λ΄μ©μ΄ λ€μ΄κ°λ λΆλΆ
βοΈ <tfoot> : μ΄ν©μ΄λ μ 리νλ λΆλΆμ΄ λ€μ΄κ°λ μ©λ, μμ΄λ λ¨
Table Colspan and Rowspan
βͺ μλΈ μ λͺ©μ λ§λ€κ³ μΆμΌλ©΄ trλ‘ νμ μ¬λ¬κ° λ§λ€μ΄μ£Όκ³ , rowspan, colspanμ μ΄μ©νμ¬ λ§μΆ°μ€μΌν¨
βοΈ <th rowspan="2"> : 2κ°μ νμ μ°¨μ§νλ€λ μλ―Έ
βοΈ <th colspan="2"> : 2κ°μ μ΄μ μ°¨μ§νλ€λ μλ―Έ
Table Practice Exercise
Form Elements
βοΈ <form> : μ¬λ¬ κ°λ³ νΌ μ»¨νΈλ‘€μ νλ κ»λ°κΈ°λ 컨ν μ΄λμ κ°κΉμ, νΌμ μ μΆνμ λ μ΄λλ‘ λ³΄λΌμ§ μ§μνλ μν
βοΈ <form action="/aa"> : formμ΄ μ μΆλλ λͺ©μ μ§(url?)μ΄ aaμμ λνλ (HTTP μ μ‘)
Input Elements
βοΈ <input> : λ«λ μμκ° μλ νκ·Έ, νκ·Έ μ¬μ΄μ μ 보λ₯Ό λ£λ νκ·Έκ° μλ, κΈ°λ³Έ μ€μ κ°λ ν μ€νΈ
βοΈ <input type="text"> : ν μ€νΈ μ λ ₯μΉΈ
βοΈ <input type="password"> : λΉλ°λ²νΈ μ λ ₯μΉΈ, μ€μ ν μ€νΈλ₯Ό μ λ ₯νλ©΄ ***μΌλ‘ νμλ¨
βοΈ <input type="color"> : μμμ μ νν μ μκ² ν΄μ€
βοΈ <input type="number"> : μ«μ μ λ ₯, λ°©ν₯ν€λ‘ μ«μ μ¦κ°μν¬ μ μμ
βοΈ <input placeholder=""> : μ λ ₯λμ μμ ν μ€νΈλ₯Ό μ§μ νλ μμ± , 무μμ μ λ ₯ν΄μΌ νλμ§ μλ €μ€λ€λ μ μμ μ€μ
Label Elements
βοΈ <label> : μ κ·Όμ±κ³Ό νΌμ μ¬μ©νκΈ° μ½κ² λ§λ€μ΄μ€. λ μ΄λΈκ³Ό νΌμ΄ μ°κ²°λμλ€λ κ²μ μλ €μ€
βοΈ <input id="b"> <label for="b"> : μ΄λ κ² idμ forμ κ°κ² μ μ΄μ£Όλ©΄ λμ΄ μ°κ²°λμ΄μλ€λ μλ―Έ, aλ₯Ό λ€μ μ¬μ©ν΄μλ μλ¨
βͺ label μμ inputμ μ€μ²©νμ¬ μ¬μ©ν μλ μμ -> μ€μ²©μ νμ§ μλ κ²μ΄ λ μΌλ°μ μΈ μ¬μ©λ², μ€μ²©μ μ μ¬μ© μν¨
Button Elements
βοΈ <button> : λ²νΌμ ν΄λ¦νλ©΄ <form action="">μ μμ μ μνν¨(κΈ°λ³Έκ°), formμ μμ μμ΄μΌ μμ μ μνν¨
βοΈ <button type="button"> : κ·Έλ₯ λ²νΌ, form μμ μμ΄λ κΈ°λ³Έ μμ μ μννμ§ μμ
βοΈ <button type="submit"> : κ·Έλ₯ <button>μ΄λ λκ°μ΄ μ£Όμ΄μ§ action μν(μ μΆ)
βοΈ <input type="submit"> : λ²νΌμ λ§λλ λ λ€λ₯Έ λ°©λ² -> λ«λ νκ·Έκ° μμ΄μ μ νΈνμ§ μμ
Name Attribute
βοΈ <input name="username"> : κ³΅λ°±μ΄ μκ³ μ§§μ, μ μΆλλ©΄ /a?username=(inputμΉΈμ μμ±λ ν μ€νΈ)
βͺ μ¬λ¬κ°μ inputμ μ μΆνκ² λλ€λ©΄ κ° value μ¬μ΄μ &κ° λ€μ΄κ°κ² λ¨ -> username=aa&password=bb
<body>
<form action="https://www.reddit.com/search">
<input type="text" name="q">
<button>Search Reddit</button>
</form>
<form action="https://www.youtube.com/results">
<input type="text" name="search_query" id="">
<button>Search youtube</button>
</form>
</body>βͺ button μμ΄ inputλ§ μμ΄λ μλκ°λ₯ -> μν° λλ₯΄λ©΄ μλ
Radio and Checkbox
βοΈ <input type="checkbox"> : 체ν¬λ°μ€λ κΌ λ μ΄λΈ μ²λ¦¬ν΄μ€μΌν¨(μλλ©΄ 볡μ‘ν΄μ Έμ), μ€λ³΅ μ ν κ°λ₯, λ μ΄λΈ ν΄λ¦λ κ°λ₯
βοΈ <input type="checkbox" checked> : κΈ°λ³Έκ°μ΄ 체ν¬κ° λ μνμ
βοΈ <input type="radio"> : κ·Έλ£Ή μ€μ νλλ§ μ νν μ μμ, κ·Έλμ κ° λΌλμ€λ²νΌμ κ°μ nameμ κ°μ ΈμΌν¨
βοΈ <input type="radio" value=""> : valueλ μ¬μ©μμκ² νμλμ§ μμ. valueλ νΌμ΄ μ μΆλ λ μλ²μ μ μ‘λλ κ°μ
<input type="radio" name="size" value="s">λΌλ inputμ΄ μ μΆλλ€λ©΄ -> size=sμ ννλ‘ λ³΄λ΄μ§κ² λλ€.
(valueκ° μμΌλ©΄ μ²΄ν¬ λμμ λ μ΄λ€ λΌλμ€λμ μκ΄μμ΄ size=on ννλ‘ μ μ‘λ¨ -> μ΄λ€ κ°μ΄ 체ν¬λ κ±΄μ§ νμΈ λΆκ°λ₯)
Select Elements
βοΈ <select name="b"> : λλ‘λ€μ΄ μ ν λ©λ΄
βοΈ <option value="a"> : μ λ νΈ μμμ κ° μμλ₯Ό λνλ΄λ νκ·Έ, νΌ μ μΆμ valueμ a κ° μ μ‘λ¨ (b=a ννλ‘)
βοΈ <option value="a" selected> : κΈ°λ³Έκ°μΌλ‘ μ νλ μ΅μ
Range and Textarea
βοΈ <input type="range" min="0" max="100"> : λ²μ μ€μ κ°λ₯ input, μ΅μκ°κ³Ό μ΅λκ°λ μ€μ κ°λ₯
βοΈ <input type="range" step="7"> : λ²μλ₯Ό μ‘°μ ν λ step(7)λ§νΌ λμ΄λκ³ μ€μ΄λ€κ²ν¨
βοΈ <input type="range" value="70"> : κΈ°λ³Έκ°μ 미리 μ€μ ν΄ λμ μ μμ
βοΈ <textarea> : μ λ ₯κ°μ΄ μλ, λ«λ νκ·Έ μ‘΄μ¬
βοΈ <textarea rows="" cols=""> : ν μ€νΈμμμ λμ΄μ λλΉλ₯Ό μ‘°μ ν μ μμ
Forms Practice Exercise
Form validations(μ ν¨μ± κ²μ¬)
βͺ μ ν¨μ± κ²μ¬λ μ νμ μΆκ°νκ±°λ μ¬μ©μμ μ λ ₯ λλ λ°μ΄ν°μ μ ν¨μ±μ νμΈνλ κ²
[Attributes]
β required : <input>μ μΆκ°νλ©΄ νμμ μΌλ‘ μ λ ₯ν΄μΌνλ νλͺ©μ΄ λ¨ -> μ λ ₯νμ§ μμΌλ©΄ μ€λ₯λ©μμ§ λ°μ
β minlength, maxlength : μ΅μ κΈμμμ μ΅λ κΈμμλ₯Ό μ§μ ν μ μμ, requiredκ³Ό ν¨κ» μ¬μ©μ΄ λ°λμ§
β pattern : μ κ· ννμμ΄λΌλ κ²μ΄ μλλ° λ§€μ° μ μ© -> λμ€μ λ°°μΈ κ²μ
Exercise : Race marathon
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Race Registration</title>
</head>
<body>
<h1>Race Registration</h1>
<form action="/dummy">
<div>
<label for="first">First name</label>
<input type="text" name="first_name" id="first">
<label for="last">Last name</label>
<input type="text" name="last_name" id="last">
</div>
<div>
<p>Select a Race :</p>
<div>
<input type="radio" name="race" id="fun" value="fun">
<label for="fun">fun Run 5k</label>
</div>
<div>
<input type="radio" name="race" id="half" value="half">
<label for="half">Half Marathon</label>
</div>
<div>
<input type="radio" name="race" id="full" value="full">
<label for="full">Full Marathon</label>
</div>
</div>
<div>
<label for="email">Email</label>
<input type="email" name="email" id="email">
<label for="pwd">password</label>
<input type="password" name="password" id="pwd">
</div>
<div>
<label for="age">Select Age Group</label>
<select name="age" id="age">
<option value="18">under 18</option>
<option value="30">18-30</option>
<option value="50">30-50</option>
</select>
</div>
<button>Register!</button>
</form>
</body>
</html>
'κ³΅λΆ κΈ°λ‘ > JavaScript' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [Udemy] The Web Developer Bootcamp 2022 : [7] CSS Selector (0) | 2022.07.11 |
|---|---|
| [Udemy] The Web Developer Bootcamp 2022 : [6] CSS κΈ°μ΄ (1) | 2022.07.09 |
| [Udemy] The Web Developer Bootcamp 2022 : [4] HTML Semantics (0) | 2022.06.22 |
| [Udemy] The Web Developer Bootcamp 2022 : [3] HTML κΈ°μ΄ (0) | 2022.06.21 |
| [Udemy] The Web Developer Bootcamp 2022 : [2] μΉ κ°λ°μ΄λ? (1) | 2022.06.16 |
