====== CSS ======
<WRAP left notice 80%>
  * description : CSS 관련 자료 등록
  * author      : 주레피
  * email       : dhan@repia.com
  * lastupdate  : 2020-03-13
</WRAP>
<WRAP clear/>
\\
----
연관 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
  2차원 으로 배치
  부모 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 ====  
무료 아이콘 사용, 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">
</code>
[[https://adminlte.io/|공식 사이트]] \\
\\
==== 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" />    
용도 \\
사이트 \\


===== How To Add CSS =====
External CSS
<code html>
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
</body>
</html>
</code>

Internal CSS
<code html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>
</body>
</html>
</code>

[[https://www.w3schools.com/css/css_howto.asp|How To Add CSS]]

===== Tag Cloud =====
[[https://demo.chattymango.com/shuffle-box/]] \\
[[http://dimox.name/beautiful-tags-markup/]] \\
\\
===== Tip =====
CSS 모든 속성을 한번에 초기화 하기
<code html>
span {
    /* all: unset !important; */
    all: unset;
}
</code>

CSS 우선순위 할당
  * CSS는 같은 속성을 여러번 정의했을 때, 나중에 설정한 값이 적용된다. 이떄 나중에 설정한 값이 적용되지 않게 하라면 속성값 뒤에 !important를 붙인다.
  * property: value !important;
<code html>
  color: red !important;

  color: blue;

  color: green !important;
</code
[[https://lynmp.com/en/article/mm8a170e2372d5bb8d|CSS 모든 속성을 한번에 초기화하기]]

===== Ref =====
  * [[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 =====
Sass(Syntactically Awesome StyleSheets)또는 Scss는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장이다.
  * 변수의 사용
  * 조건문과 반복문
  * Import
  * Nesting
  * Mixin
  * Extend / Inheritance  
와 같은 추가 기능 및 유용한 도구를 제공한다.

브라우저는 Sass의 문법을 알지 못하기 떄문에 Sass(.scss) 파일을 css 파일로 컴파일 하여야 한다. 따라서 Sass 환경의 설치가 필요하다.
  * [[https://poiemaweb.com/sass-basics/|Sass 환경 설치방법]]

<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}}