✍️ Media Query

반응형 웹(Resposive Web)을 만들기 위해 반드시 알아야 한다.

반응형 웹을 만들기 위해선
HTML에서는 viewport meta tag
css에서는 media query가 선언 되어야 한다.

@media screen and(min-width: 768px) {
  /* Wher all the magic happens... */
}

✍️ Typography

디자인에 있어서 활자의 서체나 글자 배치 등의 구성

❗ Essentials

✔️ font-size : 글자의 크기

px em rem

단위

• px: 절대 단위
• em(equal to capital M): 상대 단위, 실제로 적용된 사이즈 폰트
• rem(rootem): 상대 단위, html에 적용된 font-size

✔️ line-height: 줄 간격

px em
보통 em을 많이 사용한다.
em으로 사용할 때는 단위를 생략하는게 관례이다.

.text {
  font-size: 16px;
  line-height: 1.5;
}

✔️ letter-spacing: 자간

px em

✔️ font-famialy: font의 서체

.text {
  font-fmaily: "Poppins", "Roboto", sans-serif;
}

✔️ font-weight: font의 굵기

100 Thin
300 Light
400 Regular
500 Medium
700 Bold
900 Black

✔️ color: font의 색상

hex code rgb rgba

❕ Minor

✔️ text-align: text를 정렬

left right center

✔️ text-indent: 들여쓰기

✔️ text-transform: text의 대소문자 설정

none capitalize uppercase lowercase

✔️ text-decoration: text에 줄을 그어 준다

none underline line-through overline

✔️ font-style: font의 기울임

normal italic oblique

🗛 Web font

• 가져다 쓰는 방식: 제공하는 방식에 따라 쓰면된다.

• 직접 제공하는 방식

@font-face {
  font-family: 'MyWebFont';
  font-style: normal;
  font-weight: 400;
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

• 폰트를 삽입하는 방식

1. html에 link
2. css에 @import url("");
   
   
   

✍️ Background

✔️ background-color

hex code rgb rgba

✔️ background-image

url()을 반드시 사용해야한다.

✔️ background-repeat

repeat no-repeat

✔️ background-size

contain cover custom

✔️ background-position

x y 좌표값을 알아야한다.

✍️ Transition

property duration [timing-function] [delay]

• 유용한 timing-function
  ease-in ease-out ease-in-out cubic-bezier()
  
  
  

✍️ Animation

@keyframes alpha {
  from {
    /* Rules */
  }
  to {
    /* Rules */
  }
}
@keyframes beta {
  0% {
    /* Rules */
  }
  50% {
    /* Rules */
  }
  100% {
    /* Rules */
  }
}
.box {
  animation-name: alpha;
  animation-duration: 2000ms;
  animation-timing-function: ease-in-out;
  animation-delay: 1000ms;
  animation-iteration-count: 3; /* infinite: 무한 */
  animation-direction: alternate; /* 번갈아가면서 반복 */
}

✍️ Box shadow

🔥 순서 주의 🔥
h-offset v-offset blur spread color

✍️ Transform

주요 함수
translate() scale() ratate()

✍️ Visibility

visible hidden
display: none; 과는 다르다
visibility: hidden은 보이지만 않는다