차이

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

--- wiki:css [2020/08/21 11:39]
dhan
+++ wiki:css [2023/01/13 18:44] (현재)
@@ 줄 7: / 줄 7: @@
 </WRAP>
 <WRAP clear/>
-====== Plugin ======
+\\
-[[wiki:javascript|Javascript]]
+----
+연관 WIKI: [[wiki:html|HTML]] [[wiki:javascript|JAVASCRIPT]]
+----
+===== Case Study =====
+===== FlexBox =====
+<code txt>
+float: {left, center, right}
+이미지와 텍스트의 배치와 관련된 기능
+  container 속성
+    display
+    flex-direction
+    flex-wrap
+    flex-flow
+    justify-content
+    align-items
+    align-content
+  iterm 속성
+    order
+    flex-grow
+    flex-shrink
+    flex
+    align-self
+main axis(중심축), cross axis(반대축) 이해 필요
+EMMET(에밋)
+div.container>div.item.item${$} 탭키
+.container {
+  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://flexboxfroggy.com/|Flexbox Froggy 게임]] \\
+\\
+===== Grid =====
+<code txt>
+CSS Layout
+flex
+  아이템을 1차원 적으로 배치하고자할 때 사용
+  flxe, flex(column)
+  row, column
+grid
+차원 으로 배치
+  부모 display: grid
+    grid-template-columns: 컬럼 정의
+      grid-template-columns: 100px 100px 100px 100px
+      grid-template-columns: repeat(5, 100px)
+      grid-template-columns: repeat(5, 20%)
+      grid-template-columns: 1fr 2fr 1fr
+      grid-template-columns: repeat(5, 1fr)
+    grid-template-rows
+    grid-auto-rows: 150px
+      grid-auto-rows: minmax(150px, auto)
+    gird-template-areas: grid cell labeling
+    grid-gap: 10px
+      grid-column-gap: 10px
+      grid-row-gap: 10px
+  자식 grid cell
+    grid-column-start, grid-column-end, grid-row-start, grid-row-end: 시작은 1부터 (0이 아님)
+      grid-column-start: 2;
+      grid-column-end: 4;
+      grid-row-start: 1;
+      grid-row-end: 3
+or
+      grid-column: 2 / 4;
+      grid-row: 1 / 3;
+or
+      grid-column: 2 / span 2
+      grid-row: 1 / 3;
+,
+      grid-column: 2 / -1
+      grid-row: 1 / 3;
+    grid-area
+body {
+  padding: 5rem;
+  background-color: black;
+}
+.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 150px;
+  grid-gap: 1rem;
+  gird-template-areas:
+    'a a a'
+    'b c c'
+    'b d g'
+    'e f g'
+}
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.image1 {
+  grid-area: a
+}
+.image2 {
+  grid-area: b
+}
+.image3 {
+  grid-area: c
+}
+.image4 {
+  grid-area: d
+}
+.image5 {
+  grid-area: e
+}
+.image6 {
+  grid-area: f
+}
+.image7 {
+  grid-area: g
+}
+</code>
+<code css>
+body {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  grid-templat-rows: 100px auto 50px;
+  grid-template-areas:
+  'header header'
+  'main side'
+  'footer footer';
+}
+header {
+  grid-area: header;
+}
+main {
+  grid-area: main;
+}
+aside {
+  grid-area: side;
+}
+footer {
+  grid-area: footer;
+}
+</code>
+[[https://www.youtube.com/watch?v=7neASrWEFEM|CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지!!]] \\
+[[https://www.youtube.com/watch?v=nxi1EXmPHRs|CSS Grid 완전 정리 끝판왕]] \\
+[[https://www.youtube.com/watch?v=m7wsrVQsVjI|웹사이트를 빨리 만드는 지름길Emmet, HJTML 빠르게 마크업하기]] \\
+[[https://unsplash.com/|unsplash 무료 다운로드]] \\
+===== Plugin =====
 ==== font-awesome ====
   <link href="/fonts/font-awesome/css/all.min.css" rel="stylesheet"/>
   <link rel="stylesheet" href="/components/font-awesome/css/font-awesome.min.css">
 ==== bootstrap ====
   <link rel="stylesheet" href="/components/bootstrap/dist/css/bootstrap.min.css">
 ==== Ionicons ====
-  <link rel="stylesheet" href="/components/Ionicons/css/ionicons.min.css">
+무료 아이콘 사용, SVG 및 웹 글꼴 지원 \\
+사용 예시
+<code javascript>
+<link rel="stylesheet" href="/components/Ionicons/css/ionicons.min.css">
+</code>
+[[https://adminlte.io/|공식 사이트]] \\
+\\
 ==== AdminLTE ====
 Bootstrap 관리자 템플릿중에 대표, Adminlet3 \\
 대시보드, 위젯, 차트, 폼, 테이블, 달력, 메일 등등 다양한 템플릿 제공 \\
+사용예시
 <code javascript>
-  <link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
+<link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
 </code>
-[[https://adminlte.io/|공식 사이트]]
+[[https://adminlte.io/|공식 사이트]] \\
-==== iCheck ====
+\\
-  <link rel="stylesheet" href="/plugins/iCheck/square/blue.css">
+==== adminty =====
+Bootstrap 관리자, Adminty \\
+  틈새 중심이 아니라면 거의 모든 무료 Bootstrap 관리 대시 보드 템플릿이 수많은 웹 사이트와 애플리케이션에 적용됩니다.
+  Adminty는 다양한 기능으로 숨을 쉴 수 있는 매우 다재다능한 사이트 캔버스입니다.
+  이 세상의 관리를 사용하여 구축할 수 있는 견고한 관리자로서 원하는 성공을 볼수 있는 올바른 길을 가고 있습니다.
+  비즈니스를 운영하고 완전히 새로운 수준으로 끌어 올릴 때 모든 것을 총체적으로 정리하는 것은 필수입니다.
+  Adminty를 사용하면 매우 달성 할 수 있습니다.
+  Adminty는 세 가지 홈 디자인과 다른 페이지로 구성된 관리자 패널입니다.
+  또한 전체 화면 버튼과 사이드 바에 대한 숨기기 및 표시 버튼이 있습니다. 두 옵션을 모두 켜면 통계와 정보에 모두 표시되며 다른 것은 방해가되지 않습니다.
+[[https://colorlib.com//polygon/adminty/default/index.html|데모]] \\
+\\
 ==== google font ====
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
+\\
 ==== overlayScrollbars ====
   <link th:href="${#httpServletRequest.getContextPath()}+'/plugins/overlayScrollbars/css/OverlayScrollbars.min.css'" rel="stylesheet" />
 ==== daterangepicker ====
   <link th:href="${#httpServletRequest.getContextPath()}+'/plugins/daterangepicker/daterangepicker.css'" rel="stylesheet" />
 ==== summernote-bs4.css ====
   <link th:href="${#httpServletRequest.getContextPath()}+'/plugins/summernote/summernote-bs4.css'" rel="stylesheet" />
 용도 \\
 사이트 \\
-==== bootstrap ====
@@ 줄 103: / 줄 359: @@
   * [[https://fdossena.com/?p=html5cool/buttons/i.frag|COOL AND RESPONSIVE BUTTONS WITH A FEW LINES OF CSS]]
   * [[https://wordpress.org/plugins/ultimate-blocks/|Ultimate Blocks – Gutenberg Blocks Plugin]]
+  * [[https://flukeout.github.io/|CSS Selector 연습]]
+  * [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/|A Complete Guide to Flexbox]]
+  * [[https://flexboxfroggy.com/#ko|FLEXBOX FROGGY]]
 ===== SCSS =====
@@ 줄 118: / 줄 377: @@
 <do 2020-05-29 jhgong, 천호동밤안개>작성시 기존 컨벤션 유지(Header Label 조심), 링크 테스트 하세요~</do>
+===== 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}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구