Box Model & Pseudo Class (Chapter 02 - 03)
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";} |
List Style (Chapter 02 - 04)
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) |
Layout (Chapter 03 - 01)
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) |
|
|
Positioning (Chapter 03 - 02)
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); |
CSS Grid (Chapter 03 - 03)
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; |
|
|
Outline (Chapter 03 - 04)
Width |
outline-width: value (thin, medium, thick) |
Color |
outline-color: color; |
Style |
outline-style: style (solid, double, dotted, dashed, groove, inset, ridge, outset) |
Graphics & Transforms (Chapter 04 - 01)
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 Images (Chapter 04 - 02)
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; |
|
|
Border (Chapter 04 - 03)
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) |
Graphics & Transforms (Chapter 04 - 04)
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" /> |
|
Created By
Metadata
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets
More Cheat Sheets by sally sung