wiki:css

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:css [2022/10/11 19:46]
dhan
+++ wiki:css [2023/01/13 18:44] (현재)
@@ 줄 44: / 줄 44: @@
   background: beige;
   height: 100vh; /* viewport height */
+  display: flex;
+  flex-direction: row
+    row: 왼쪽에서 오른쪽으로
+    row-reverse; 오른쪽에서 왼쪽으로
+    column: 위에서 아래로
+    column-reverse: 아래에서 위로
+  flex-wrap: nowrap; 디폴트,
+    wrap
+    wrap-reverse
+  /* flex-flow: column nowrap */ flex-direction, flex-wrap 한 줄에 사용
+  justify-content: flex-start;
+    flex-start:
+    flex-end:
+    center
+    space-around, space-evenly, space-between /* main axis */
+    align-items: center; baseline(텍스트 줄맞춤)
+    align-content: center, space-around, space-evenly, space-between
+}
+.item {
+  width: 40px;
+  height: 40px;
+  border: 1px solid black;
+}
+iterm 속성
+.item1 {
+  backtround: #ef9a9a;
+  flex-grow: 2; /* 늘어나는 비중 */
+  flex-shrink: 2;  /* 줄어드는 비중 */
+  flex-basis: 60%; /* 차지하는 비중, flex-grow, flxe-shrink와 같이 사용하지 않음 */
+  align-self: center; /* 아이템별로 지정 */
+}
+.item2 {
+  backtround: #ef9a9a;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 60%;
+}
+.item3 {
+  backtround: #ef9a9a;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 60%;
+}
 </code>
 실습 [[https://jsbin.com|jsbin.com]] \\
-컬러 [[https://material.io/resources/color/#!/?view.left=0&view.right=0|COLOR TOOL]]
+컬러 [[https://material.io/resources/color/#!/?view.left=0&view.right=0|COLOR TOOL]] \\
+[[https://flexboxfroggy.com/|Flexbox Froggy 게임]] \\
+\\
 ===== Grid =====
 <code txt>
@@ 줄 326: / 줄 379: @@
 ===== CSS Note ====
    * [[wiki:css:css note]]
+   * [[https://www.freecodecamp.org/news/how-to-center-an-image-in-css/|이미지를 중간으로(수직, 수평)]] , How to Center an Image Vertically and Horizontally with CSS
 \\
 {{tag>주레피 천호동밤안개 button}}

/volume1/web/dokuwiki/data/attic/wiki/css.1665485165.txt.gz · 마지막으로 수정됨: 2022/10/11 19:46 저자 dhan