HTML (Chapter 01)
Sectioning Elements |
<header>, <nav>, <article>, <aside>, <footer>, <section> |
Grouping Elements |
<blockquote>, <figure>, <figcaption> |
Text-Level Elements |
<strong>, <em>, <cite>, <q>, <br /> |
Images & Links |
<img src="file.png" alt="Description" /> |
Internal Links |
<a href="#section_id">Jump</a> |
URL Schemes |
<a href="mailto:a@b.com">Email</a>, <a href="tel:1234567890">Call</a> |
Selectors (Chapter 02)
* |
Matches any element |
parent > child |
Matches the child element that is a child of the parent element |
elem1 + elem2 |
Matches elem2 that is immediately preceded by the sibling element elem1 |
elem1 ~ elem2 |
Matches elem2 that follows the sibling element elem1 |
Attribute Selectors |
h1#intro, .main, a[href^="http"] (http로 시작하는 href) |
Text & Box Model (Chapter 02)
Text Decoration |
text-decoration: type (none, underline, overline, line-through) |
Text Transform |
text-transform: type (capitalize, uppercase, lowercase, none) |
Font Variant |
font-variant : type (normal, small-caps) |
Text Align |
text-align : left, right, center, or justify |
Font |
font : normal small-caps bold 0.9em/3em Quicksand, Verdana, Geneva, sans-serif; |
Pseudo-Classes |
a:hover {text-decoration: underline;} |
Pseudo-Elements |
h1::after {content: " — NEW";} |
Box Model |
padding: 10px 5px 0px 5px; |
Box Sizing |
box-sizing: border-box; |
Font Sizing |
font-size: 1.2em; |
|
|
Layout & Positioning (Chapter 03)
Display |
display: inline-block;, display: inline;, display: block;, display: none; |
Horizontal Centering |
body {margin-left: auto; margin-right: auto;} |
Floating |
float: left; |
Clear |
clear: both; |
Container Collapse |
container::after {clear: both; content: ""; display: table;} |
CSS Grid |
grid-template-columns: 1fr 2fr; (1:2 비율의 열 생성) |
Grid Areas |
grid-template-areas: "head head" "side main"; |
Positioning |
position: absolute; (좌표 기반 배치) |
Stacking |
z-index: 10; |
Overflow |
overflow: auto;, overflow: scroll;, overflow: hidden; |
Clipping |
clip: rect(10px, 200px, 150px, 0px); |
Graphics & Transforms (Chapter 04 - 01)
Figure Box |
<figure><img ... /><figcaption>Caption</figcaption></figure> |
Background Images |
background-size: cover; 또는 contain; |
Multiple Backgrounds |
background: bg1, bg2, color; |
Borders |
border: 2px solid black; |
Rounded Corners |
border-radius: 15px 50px; |
Border Image |
border-image: url(file.png) 50 repeat; |
Text Shadow |
text-shadow: color offsetX offsetY blur; |
Box Shadow |
box-shadow: 5px 5px 10px gray; |
|
|
Graphics & Transforms (Chapter 04)
Figure Box |
캡션(figcaption)을 포함하는 독립적인 콘텐츠(figure) 그룹입니다. |
<figure><img ... /><figcaption>Caption</figcaption></figure> |
Background Images |
background-image: url()로 이미지를 추가하고, background-repeat: no-repeat로 반복을 제어합니다. |
background-size: cover; 또는 contain; |
Multiple Backgrounds |
쉼표로 구분하여 여러 배경을 한 요소에 적용합니다 (순서가 중요함). |
background: bg1, bg2, color; |
Borders |
border: width style color로 두께, 스타일, 색상을 정의합니다. |
border: 2px solid black; |
Rounded Corners |
모서리를 둥글게 처리합니다. |
border-radius: 15px 50px; |
Border Image |
그래픽 이미지 파일을 사용하여 보더를 만듭니다. |
border-image: url(file.png) 50 repeat; |
Text Shadow |
텍스트에 그림자를 추가합니다. |
text-shadow: color offsetX offsetY blur; |
Box Shadow |
블록 요소에 그림자를 추가합니다. inset 키워드로 내부 그림자 가능. |
box-shadow: 5px 5px 10px gray; |
Gradients |
linear-gradient (직선), radial-gradient (방사형)으로 색상을 혼합합니다. |
background: linear-gradient(red, blue); |
Opacity |
요소 전체의 불투명도를 설정합니다 (0.0~1.0). |
opacity: 0.7; |
2D/3D Transforms |
transform 속성을 사용하여 회전(rotate), 크기 조정(scale), 이동(translate), 기울이기(skew)를 적용합니다. perspective는 3D 원근감을 정의합니다. |
transform: rotate(30deg) scale(1.2); |
Filters |
이미지의 색상, 밝기, 대비 등을 조정합니다. |
filter: grayscale(1.0);, filter: sepia(0.8); |
Image Maps |
이미지의 특정 영역(hotspot)에 링크를 만듭니다. <map>, <area>를 사용하며, <img usemap="#name">으로 연결합니다. |
<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