Dev log - 12, animation 실습 #2 / CSS #8

animation

• 상단 바가 돌아가는 형식을 만드려면, 기본 애니메이션 속성 설정 후,
  border-radius: 100% 속성과 함께 border-top-color 색상만 다르게 설정하면 됨

• transform: scale() 속성으로 커지는 형식을 만들 수 있음

CSS 관련

• 각각의 브라우저에 맞게 공통적으로 환경을 만드는 것은 Normalize CSS 이용
  참고 사이트(https://necolas.github.io/normalize.css/)

• border-collapse: collapse 속성 설정 시, 표와 셀(td)의 테두리 사이의 간격을 없애고 한 줄로 만듬

• 테이블 속성은, 자동으로 내용물에 따라 길이가 늘어나기 때문에, table-layout: fixed 속성을 적용해야함

• transform 속성에서 rotate 속성을 먼저 적용하면, translate 속성 적용 시 돌려진 값을 기준으로 이동 (rotate 속성의 순서가 중요)

• 체크 모양을 만들 때는, border 속성을 X축과 Y축에 하나씩만 설정해주고, transform: rotate(45deg) 속성을 활용하면 됨