2024-06-16

Writerside/topics/Animation.md

@@ -0,0 +1,27 @@
+# Animation
+
+* `animation`
+* `animation-duration`
+* `animation-name`
+* `animation-iteration-count`
+* `animation-direction`
+
+
+```CSS
+p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    translate: 150vw 0;
+    scale: 200% 1;
+  }
+
+  to {
+    translate: 0 0;
+    scale: 100% 1;
+  }
+}
+```

Writerside/topics/Box-Model.md

@@ -85,6 +85,7 @@ html {
 * `background-position`
 * `background-attachment` : scroll | fixed | local
 
+* `box-shadow`
 
 ## Overflow
 

Writerside/topics/Media-Query.md

@@ -1,3 +1,17 @@
 # Media Query
 
-Start typing here...
+```CSS
+@media screen and (min-width: 600px) {
+  body {
+    color: blue;
+  }
+}
+```
+
+```CSS
+@media (orientation: landscape) {
+  body {
+    color: rebeccapurple;
+  }
+}
+```

Writerside/topics/Responsive.md

@@ -1,4 +1,8 @@
 # 반응형 레이아웃
 
 
-Start typing here...
+```html
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+```
+
+

Writerside/topics/Scroll-Snap.md

@@ -0,0 +1,7 @@
+# Scroll Snap
+
+* `scroll-snap-type`
+* `scroll-snap-align`
+* `scroll-snap-stop`
+* `scroll-margin`
+* `scroll-padding`

Writerside/topics/Styling-Image-and-Media.md

@@ -2,7 +2,7 @@
 
 * `width`
 * `height`
-* `min-wodth`, `min-height`
+* `min-width`, `min-height`
 * `max-width`, `max-height`
 * `object-fit` : fill | contain | cover | none | scale-down
 * `object-position`

Writerside/topics/Transform.md

@@ -0,0 +1,7 @@
+# Transform
+
+* `transform`
+* `translate`
+* `rotate`
+* `scale`
+* `transform-origin` : 변환 기준점 좌표를 지정합니다. 기본값은 요소의 가운데입니다.

Writerside/topics/Transition.md

@@ -0,0 +1,14 @@
+# Transition
+
+* `transition`
+* `transition-property`
+* `transition-duration`
+* `transition-timing-function`
+* `transition-delay`
+
+
+```CSS
+div {
+  transition: <property> <duration> <timing-function> <delay>;
+}
+```