CSS Properties (feat: 김버그)

https://edu.goorm.io/learn/lecture/20583/%2525EA%2525B9%252580%2525EB%2525B2%252584%2525EA%2525B7%2525B8%2525EC%25259D%252598-html-css%2525EB%25258A%252594-%2525EC%25259E%2525AC%2525EB%2525B0%25258C%2525EB%25258B%2525A4
김버그의 CSS는 재밌다.

• Box
  • Box Model
    • Content
      • width, height
    • Padding
      • padding: top right bottom left;
    • Border
      • border: 1px solid #000
      • border: none
      • border-radius: 4px
    • Margin
      • margin: top right bottom left;
  • Box Sizing
    • bos-sizing: *content-box | border-box;
  • Box
    • Block, Inline, Inline Block, Flex
    • display: block | inline | inline-block | flex;
  • Block 면(영역)
    • display: block;
    • <div>, <p>, <h1>, ...
    • margin: 0 auto;
    • Box Model의 모든 속성 사용가능 - width, height, padding, border, margin
    • width = 부모의 context-box의 100%
    • 자식 요소의 height의 합 = 부모의 height
  • Inline 선(흐름)
    • display: inline;
    • <span>, <a>, <strong>, <em>, ...
    • 사용불가 - width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom
  • Inline Block
    • display: inline-block;
    • <button>, <select>, ...
• Float
  • float: *none | left | right;
  • inline, inline-block, block --> block
  • width = 자신의 contents size 만큼. auto margin 0
  • float 요소를 block 요소내의 텍스트나 이미지는 인식
  • Layout 정렬
    • overflow: hidden; parent 요소에 적용
    • clear: left | right | both; un-float 요소에 적용
  • Pseudo-Element
    • element::before
    • element::after
      • content: ""; 반드시 content property 작성
      • block 요소에만 적용 가능
• Position
  • position: *static | relative | absolute | fixed | sticky;
    • https://caniuse.com/
  • position: relative
  • position: absolute
    • float와 유사
    • inline content가 float 요소처럼 피해 표현하지 않음
    • 조상 요소 중 position이 static이 아닌 요소를 기준으로
  • position: fixed
    • viewport를 기준으로
  • top, bottom중 1개와 left, right중 1개만 사용
  • z-index
• Flexbox
  • display: flex;
  • flex-direction: *row | row-reverse | column | conlumn-reverse;
  • flex-wrap: *nowrap | wrap;
  • Main axis
    • justify-content: *flex-start | center | flex-end | space-between | space-around;
  • Cross axis
    • align-items: *flex-start | center | flex-end; space-between, space-around 사용 불가
    • align-content: *flex-start | center | flex-end | space-between | space-around; wrap인 경우(flex line이 여러인 경우)
    • 선 align-items, 후 align-content
• Media Query
  • <meta name="viewport" content="width=device-width" />
  • @media screen and (min-width: 768px) and (max-width: 991px)
• Typography
  • font-size: 16px;
    • px
    • em (equal to capital M)
    • rem (root em)
  • line-height: 1.5; px em rem 모두 사용가능하지만, em을 많이 사용, em단위 생략 가능. 줄 간격의 가운데 배치 됨.
  • letter-spacing: -.03em; px em 사용, em을 많이 사용, em단위 생략하면 안됨.
  • font-family: "Poppins", sans-serif;
  • font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
  • color: #hex | rbg() | rgba();
  • text-align: *left | right | center;
  • text-indent: 4px;
  • text-transform: *none | captitalize | uppercase | lowercase;
  • text-decoration: *none | underline | ling-through | overline;
  • font-style: *normal | italic | oblique;
  • Webfont
    • https://fonts.google.com/

    • @font-face { 
        font-family: "Kimbug";
        font-stype: normal;
        font-weight: 400;
        src: url('./assets/fonts/NanumSqureRoundR.eot');
      }

    • https://css-tricks.com/snippets/css/using-font-face/
    • @import url("./fonts/css")
• Background
  • background-color: #hex | rgb() | rgba();
  • background-image: url();
  • background-repeat: *repeat | no-repeat;
  • background-size: contain | cover | x y;
  • background-position: x y;
• Transition
  • transition: property duration [ timing-function ] [ delay ]
    • timing-function - ease-in | ease-out | ease-in-out | cubic-bezier()
      • https://cubic-bezier.com/
• Animation
  • animation: name duration timing-function delay iteration-count;
  • animation-name: move-box;
  • animation-duration: 2000ms
  • animation-timing-function: ease-in | ease-out | ease-in-out | cubic-bezier();
  • animation-iteration-count: infinite;
  • animation-direction: alternate;

  •   from {
        top: 0;
        background-color: #0066ff;
      }
      to {
        top: 200px
        background-color: #ff4949;
      }
    }

• Etc.
  • box-shadow: h-offset v-offset blur spread color;
    • https://neumorphism.io/
  • opacity: N;
  • overflow: *visible | auto | scroll | hidden;
  • transform: translate(x, y) | scale(N) | rotate(Ndeg);
  • visibility: *visible | hidden;
• Selectors
  • Type, Class & ID Selectors
    • type: html tag
    • class: .
    • id: #
  • Child, Descendant & Sibling Combinators
    • child: parent > child
    • descendant: parent (space) descendants
    • sibling(s): element ~ siblings, element + sibling
  • Structural Pseudo-classes
    • element:first-child
    • element:last-child
    • element:nth-child(n)
  • User Action Pseudo-classes
    • element:hover
    • element:focus
    • element:active
  • Priority
    • id > class, pseudo-class > type
    • Rule Breakers
      • !important > inline style
• Page Layout
  • Grid System
    • container, column, gutter
  • Bootstrap
    • https://getbootstrap.com/docs/5.0/getting-started/introduction/
      • container, row, col-n
    • https://getbootstrap.com/docs/5.0/layout/grid/
      • xs<576px, sm≥576px, md≥768px, lg≥992px, xl≥1200px, xxl≥1400px