Web Development Quiz2
|
Table
|
<table></table>
|
|
Table Row
|
<tr>...</tr>
|
|
Table Header
|
<tr><th>Time</th></tr>
|
|
Table Data
|
<td>National News</td>
|
|
Border Collapse
|
border-collapse: type (separate | collapse)
|
|
Border Spacing
|
border-spacing: value;
|
|
Colspan (stretch row)
|
<th colspan="3">total sum</th>
|
|
Rowspan (stretch col)
|
<td rowspan="2">content</td>
|
|
Caption
|
<caption>content</caption>
|
|
Table Header
|
<thead><tr>...</tr></thead>
|
|
Table Footer
|
<tfoot><tr>...</tr></tfoot>
|
|
Column Groups
|
<table><colgroup>columns</colgroup>table rows</table>
|
|
Caption Side
|
caption-side: position; (top | bottom)
|
|
Text Align
|
text-align: position; (right | left)
|
|
Vertical Align
|
vertical-align: type; (top | bottom | middle)
|
|
Display
|
display: type; (table | table-inline | table-row | table-row-group | table-header-group | table-footer-group | table-column | table-column-group | table-cell | table-caption
|
|
Columns
|
columns: width count;
|
|
Column Count
|
column-count: value;
|
|
Column Rule
|
column-rule: 2px solid gray;
|
|
Orphans
|
orphans: 2; (최소 몇 줄이 아래에 있어야 하는지)
|
|
Widows
|
widows: 1; (최소 몇 줄이 위에 있어야 하는지)
|
|
Break Before
|
break-before: type; (auto | always | avoid)
|
|
Break After
|
break-after: type; (auto | always | avoid)
|
|
Break Inside
|
break-inside: type; (auto | avoid)
|
|
Column Span
|
column-span: type; (none | all) (해당 요소가 전체 컬럼 차지)
|
|
Form
|
<form action="submit.php" method="post">...</form>
|
|
Script
|
<script src="rb_forsubmit.js"></script>
|
|
Field Set
|
<fieldset id="custInfo">...</fieldset>
|
|
Legend
|
<legend>Contact</legend>
|
|
Label
|
<label for="custInfo">사용자명</label>
|
|
Label + Input
|
<label for="visit">Date of visit</label><input name="visitDate" id="visit" type="date" />
|
|
Selection List
|
<select name="orderType" id="order"> <option value="order1">Carry out</option> <option value="order2">Delivery</option> <option value="order3" selected>Dine in</option> <option value="order4">Take 'n bake</option> </select>
|
|
Selection List To Scroll Box
|
<select size="4">...</select>
|
|
Multiple
|
<select multiple>...</select>
|
|
Organize Selection List
|
<optgroup label="label1"><option>text1</option><option>text2</option></optgroup>
|
|
Text Area
|
<textarea name="comment" rows="4"></textarea>
|
|
Data List
|
<input type="text" list="suggestions" /> <datalist id="suggestions">...</datalist>
|
|
Text
|
<input type="text" name="name" />
|
|
Password
|
<input type="password" name="pwd" />
|
|
Email / Url
|
<input type="email" name="email" />
|
|
Radio
|
<input type="radio" name="choice" value="A" checked />
|
|
Checkbox
|
<input type="checkbox" name="agree" value="yes" />
|
|
Submit / Reset
|
<input type="submit" value="register" />
|
|
Number
|
<input type="number" min="1" max="10" />
|
|
Range
|
<input type="range" name="rate" min="1" max="5" />
|
|
Radio Butto Example
|
<fieldset class="optGroup"><label for="fYes">Yes</label><input name="sFriend" id="fYes" value="yes" type="radio" /><label for="fNo">No</label><input name="sFriend" id="fNo" value="no" type="radio" /></fieldset>
|
|
Required
|
<input type="text" required />
|
|
Placeholder
|
<input type="email" placeholder="user@example.com" />
|
|
Pattern
|
<input type="text" pattern="\d{3}-\d{4}" /> (전화번호 형식 지정)
|
|
Focus
|
input:focus { border: 2px solid blue; }
|
|
Valid
|
input:valid { background-color: lightgreen; }
|
|
Invalid
|
input:invalid { background-color: pink; }
|
|
Checked
|
input[type=checkbox]:checked + label { color: green; }
|
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
