풀스택 웹개발 부트캠프 1주차 (2)

CSS 기초

width, height

• rem(root em) : 최상위 요소(root)의 font-size(em)
• vh : viewport(웹페이지가 사용자에게 보여지는 영역)의 높이값
• vw : viewport의 너비값
• vmin : viewport의 너비 또는 높이를 기준으로 하는 최소값
• vmax : viewport의 너비 또는 높이를 기준으로 하는 최대값

Calc()

• 사용자가 원하는 크기 값을 계산하여 적용
  ex) Calc(100vh - 20vw)

line-height

• 영역 요소 내부 컨텐츠 글자의 줄 높이
• 컨텐츠가 한 줄인 경우, box height와 line height를 동일하게 하면 세로 중앙 정렬 효과

border-radius

• 요소의 모서리를 둥글게 깎는 속성
• border-radius를 50%로 설정하면, 원을 만들 수 있음

visibility

• opacity
  모습을 숨김 / 속성 O / 자리 O
• visibility : hidden
  모습과 속성을 숨김 / 자리 O
• display : none
  요소를 없앰 / 자리 X

overflow

• 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어
• visible, hidden, scroll, auto

position

• static : 정적 위치 지정 방식
• relative : 상대 위치 지정 방식
• absolute : 절대 위치 지정 방식
• fixed : 고정 위치 지정 방식
• absolute, fixed인 경우, display 속성이 block으로 변경됨

z-index

• 숫자가 높을수록 요소가 위에 쌓임
• 부모 요소의 posiotion을 relative, 쌓고 싶은 요소의 position을 absolute + z-index 추가

flex

flex-dircetion

• row : x축 (가로)
• column : y축 (세로)

flex-wrap

• nowrap : 줄 바꿈 없음
• wrap : 여러 줄로 묶음

justify-content

• 주 축의 정렬 방법
• flex-start : flex items를 시작점으로 정렬
• flex-end : flex items를 끝점으로 정렬
• center : flex items를 가운데 정렬
• space-between : 각 flex item 사이를 균등하게 정렬
• space-around : item의 시작과 끝(margin 포함)을 기준으로 각 flex item의 외부 여백을 균등하게 정렬
• space-evenly : 상위 요소의 시작과 끝(margin 포함)을 기준으로 각 flex item의 외부 여백을 균등하게 정렬

align-items

• 교차 축의 한 줄 정렬 방법
• stretch : flex item들을 교차 축으로 늘림
• flex-start : flex item들을 각 줄의 시작점으로 정렬
• flex-end : flex item들을 각 줄의 끝점으로 정렬
• center : flex item들을 각 줄의 가운데 정렬

align-content

• 교차 축의 여러 줄 정렬 방법
• 여러 줄인 컨텐트를 덩어리째 정렬하고 싶을 때 사용
• stretch : flex item들을 시작점으로 정렬
• flex-start : flex item들을 시작점으로 정렬
• flex-end : flex item들을 끝점으로 정렬
• center : flex item들을 가운데 정렬
• space-between : 각 flex item 사이를 균등하게 정렬
• space-around : item의 시작과 끝(margin 포함)을 기준으로 각 flex item의 외부 여백을 균등하게 정렬
• space-evenly : 상위 요소의 시작과 끝(margin 포함)을 기준으로 각 flex item의 외부 여백을 균등하게 정렬

flex 연습하기 게임

https://flexboxfroggy.com/#ko

transform

• 2차원 & 3차원
• translate : 이동
• scale : 크기
• rotate : 회전
• skew : 기울임
• perspective : 원근법

animation

• animation-name : 이름
• animation-duration : 지속 시간
• animation-delay : 지연 시간
• animation-iteration-count : 반복 횟수
• animation-timing-function : 반복 형태
  ease, ease-in, ease-out, ease-in-out, linear
• animation-direction : 애니메이션 방향

@keyframes

• 애니메이션 효과를 개발자가 직접 지정하는 기능
• keyframes로 설정되는 값
  1. to / from
  2. 0% ~ 100%

@keyframes 'animation 이름' {
   keyframes 값 {
      CSS 속성 값
      }
   }

• 애니메이션 효과를 통해 바꾸고자 하는 CSS 속성 값은 특정 keyframe에서 변화하지 않더라도 모든 keyframe에서 해당 속성을 선언해주어야 애니메이션이 부드럽게 동작함

@keyframes moon {
  0% {
    transform: rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: rotate(-90deg);
    opacity: 0;
  }
  50% {
    transform: rotate(-180deg);
    opacity: 0;
  }
  75% {
    transform: rotate(-270deg);
    opacity: 1;
  }
  100% {
    transform: rotate(-360deg);
    opacity: 0;
  }
}