This is a draft cheat sheet. It is a work in progress and is not finished yet.
(Ch06) Making Tables
Table |
<table></table> |
Table Row |
<tr>...</tr> |
Table Header |
<tr><th>Time</th></tr> |
Table Data |
<td>National News</td> |
(Ch06) Table border CSS
Border Collapse |
border-collapse: type (separate | collapse) |
Border Spacing |
border-spacing: value; |
(Ch06) Spanning Rows and Columns
Colspan (stretch row) |
<th colspan="3">total sum</th> |
Rowspan (stretch col) |
<td rowspan="2">content</td> |
(Ch06) Table Structure
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> |
(Ch06) Table CSS
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; |
|
|
(Ch06) Managing Column Breaks
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) (해당 요소가 전체 컬럼 차지) |
(Ch07) Starting a Web Form
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" /> |
(Ch07) Creating a Selection List
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> |
(Ch07) Other Form Controls
Text Area |
<textarea name="comment" rows="4"></textarea> |
Data List |
<input type="text" list="suggestions" /> <datalist id="suggestions">...</datalist> |
|
|
(Ch07) Creating Input Boxes
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> |
(Ch07) Validation Attributes
Required |
<input type="text" required /> |
Placeholder |
<input type="email" placeholder="user@example.com" /> |
Pattern |
<input type="text" pattern="\d{3}-\d{4}" /> (전화번호 형식 지정) |
(Ch07) Validation Styles
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; } |
|
