HTML & CSS cheat sheet
|
Text Align
|
text-align : left, right, center, or justify
|
|
Box Model
|
padding: 10px 5px 0px 5px;
|
|
Pseudo Classes
|
a:class (link, visited, active, hover, focus)
|
|
Pseudo Elements
|
h1::element (first-letter, first-line, before, after) {content: " — NEW";}
|
|
Style
|
list-style-type: type (disc, circle, square, decimal, lower-roman, upper-roman,..)
|
|
Position
|
list-style-position: type (outside, inside)
|
|
Image
|
list-style-image: url(runicon.png)
|
|
Display
|
display: type (block, table, inline, inline-block, run-in, inherit, list-item, none)
|
|
Horizontal Centering
|
body {margin-left: auto; margin-right: auto;}
|
|
Floating
|
float: position (none, left, right)
|
|
Clear
|
clear: position (left, right, both, none)
|
|
Box Sizing
|
box-sizing: type (content-box, border-box, inherit)
|
|
Container Collapse
|
container::after {clear: both; content: ""; display: table;}
|
|
Positioning
|
position: absolute; (좌표 기반 배치)
|
|
Stacking
|
z-index: 10;
|
|
Overflow
|
overflow: auto;, overflow: scroll;, overflow: hidden;
|
|
Clipping
|
clip: rect(10px, 200px, 150px, 0px);
|
|
Grid
|
display: type (grid, inline-grid)
|
|
Grid Columns
|
grid-template-columns: 1fr 2fr; (1:2 비율의 열 생성)
|
|
Grid Rows
|
grid-template-rows: 50px 100px 150px; (50px, 100px, 150px 의 행 생성)
|
|
Grid Areas
|
grid-template-areas: "head head" "side main";
|
|
Grid Area
|
grid-area: area;
|
|
Repeat
|
grid-template-columns: 250px repeat (auto-fill, 100px);
|
|
Min Max
|
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
|
Extend
|
grid-row: start/end; grid-column: start/end;
|
|
Width
|
outline-width: value (thin, medium, thick)
|
|
Color
|
outline-color: color;
|
|
Style
|
outline-style: style (solid, double, dotted, dashed, groove, inset, ridge, outset)
|
|
Figure Box
|
<figure><img ... /><figcaption>Caption</figcaption></figure>
|
|
Text Shadow
|
text-shadow: color offsetX offsetY blur;
|
|
Box Shadow
|
box-shadow: 5px 5px 10px gray;
|
|
Background Image
|
background-image: url(url);
|
|
Repeat
|
background-repeat: type (repeat, repeat-x, repeat-y, no-repeat, round, space)
|
|
Attachment
|
background-attachment: property (scroll, fixed, local)
|
|
Position
|
background-position: horizontal, vertical;
|
|
Clip
|
background-clip: type (content-box, padding-box, border-box)
|
|
Background
|
5background: url(tb_back2.png) bottom right / 15% no-repeat content-box;
|
|
Borders
|
border: 2px solid black;
|
|
Rounded Corners
|
border-radius: 15px 50px;
|
|
Border Image
|
border-image: url(file.png) 50 repeat;
|
|
Border Width
|
border-side-width: width;
|
|
Border Design
|
border-side-style: style (solid, dashed, dotted, double, outset, inset, groove, ridge, none)
|
|
Repeat
|
border-image: url(url) slice repeat fill; (stretch, repeat, space)
|
|
Gradients
|
background: linear-gradient(red, blue);
|
|
Opacity
|
opacity: 0.7;
|
|
Transforms
|
transform: rotate(30deg) scale(1.2) translate(20px, -100px);
|
|
3D Transformation
|
translate3d(offX, offY, offZ)
|
|
Perspective
|
perspective: 600px
|
|
Filters
|
filter: grayscale(1.0);, filter: sepia(0.8);
|
|
Image Maps
|
<area shape="rect" coords="x1,y1,x2,y2" href="url" />
|
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
