This is for web development cheatsheet
|
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>
|
|
*
|
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 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;
|
|
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);
|
|
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;
|
|
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" />
|
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
