Show Menu
Cheatography
  1. Home >
  2. Programming >

Web Development Midterm Cheat Sheet (DRAFT) by

HTML & CSS cheat sheet

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Box Model & Pseudo Class (Chapter 02 - 03)

Text Align
text-align : left, right, center, or justify
Box Model
padding: 10px 5px 0px 5px;
Pseudo­ Cl­asses
a:class (link, visited, active, hover, focus)
Pseudo­ El­ements
h1::el­ement (first­-le­tter, first-­line, before, after) {content: " — NEW";}

List Style (Chapter 02 - 04)

Style
list-s­­ty­l­e­-type: type (disc, circle, square, decimal, lower-­­roman, upper-­­ro­m­a­n,..)
Position
list-s­­ty­l­e­-p­­osi­­tion: type (outside, inside)
Image
list-s­tyl­e-i­mage: url(ru­nic­on.png)

Layout (Chapter 03 - 01)

Display
display: type (block, table, inline, inline­­-b­lock, run-in, inherit, list-item, none)
Horizontal Centering
body {margi­­­n­-­left: auto; margin­­­-­r­ight: auto;}
Floating
float: position (none, left, right)
Clear
clear: position (left, right, both, none)
 

Positi­oning (Chapter 03 - 02)

Box Sizing
box-si­­­zing: type (conte­­nt­-box, border­­-box, inherit)
Container Collapse
contai­­ne­r­:­:after {clear: both; content: "­­"; display: table;}
Positi­­oning
position: absolute; (좌표 기반 배치)
Stacking
z-index: 10;
Overflow
overflow: auto;, overflow: scroll;, overflow: hidden;
Clipping
clip: rect(10px, 200px, 150px, 0px);

CSS Grid (Chapter 03 - 03)

Grid
display: type (grid, inline­-grid)
Grid Columns
grid-t­­­e­m­p­­l­­at­­­e-­c­­­ol­­umns: 1fr 2fr; (1:2 비율의 열 생성)
Grid Rows
grid-t­emp­lat­e-rows: 50px 100px 150px; (50px, 100px, 150px 의 행 생성)
Grid Areas
grid-t­­­e­m­p­­l­­at­­­e-­a­­­reas: "head head" "side main";
Grid Area
grid-area: area;
Repeat
grid-t­emp­lat­e-c­olumns: 250px repeat (auto-­fill, 100px);
Min Max
grid-t­emp­lat­e-c­olumns: repeat­(au­to-­fill, minmax­(100px, 1fr));
Extend
grid-row: start/end; grid-c­olumn: start/end;
 

Outline (Chapter 03 - 04)

Width
outlin­­e-­w­idth: value (thin, medium, thick)
Color
outlin­­e-­c­olor: color;
Style
outlin­­e-­s­tyle: style (solid, double, dotted, dashed, groove, inset, ridge, outset)

Graphics & Transforms (Chapter 04 - 01)

Figure Box
<fi­­gu­r­e­><img ... /><­­fi­g­c­ap­­tio­­n>­C­a­pt­­ion­­</­f­i­gc­­apt­­io­n­>­</­­fig­­ur­e>
Text Shadow
text-s­­hadow: color offsetX offsetY blur;
Box Shadow
box-sh­­adow: 5px 5px 10px gray;

Background Images (Chapter 04 - 02)

Background Image
backgr­oun­d-i­mage: url(url);
Repeat
backgr­oun­d-r­epeat: type (repeat, repeat-x, repeat-y, no-repeat, round, space)
Attachment
backgr­oun­d-a­tta­chment: property (scroll, fixed, local)
Position
backgr­oun­d-p­osi­tion: horizo­ntal, vertical;
Clip
backgr­oun­d-clip: type (conte­nt-box, paddin­g-box, border­-box)
Background
5backg­round: url(tb­_ba­ck2.png) bottom right / 15% no-repeat conten­t-box;
 

Border (Chapter 04 - 03)

Borders
border: 2px solid black;
Rounded Corners
border­­­-­r­a­­dius: 15px 50px;
Border Image
border­­­-­i­mage: url(fi­­­l­e.png) 50 repeat;
Border Width
border­-si­de-­width: width;
Border Design
border­-si­de-­style: style (solid, dashed, dotted, double, outset, inset, groove, ridge, none)
Repeat
border­-image: url(url) slice repeat fill; (stretch, repeat, space)

Graphics & Transforms (Chapter 04 - 04)

Gradients
backgr­ound: linear­-gr­adi­ent­(red, blue);
Opacity
opacity: 0.7;
Transforms
transform: rotate­(30deg) scale(1.2) transl­ate­(20px, -100px);
3D Transf­orm­ation
transl­ate­3d(­offX, offY, offZ)
Perspe­ctive
perspe­ctive: 600px
Filters
filter: graysc­ale­(1.0);, filter: sepia(­0.8);
Image Maps
<area shape=­"­rec­t" coords­="x1­,y1­,x2­,y2­" href="u­rl" />