211109 프론트엔드 스쿨 7일차

수업 내용 (이호준 강사님)

모든 내용 X
새로 알게된 내용, 헷갈리는 부분, 중요한 부분만 기재함

실습 - 과제(레이아웃 구현 프로젝트 - 1)

• div 가 아닌 article 사용. 냅다 div 써버리는 습관 버리자
  
• 폰트 사이즈는 32px(h1)~16px(p) 기준에서 정하기.
• a태그 연달아서 줄바꿈해서 쓰면 갭을 인식해서 태그 사이에 빈 공간이 생긴다. 이럴 경우 엔터나 스페이스 없이 붙여서 써도 된다.
• display: -webkit-box; 웹 브라우저에서 지원을 안하는 속성을 -webkit 뒤에 적어주면 된다. 여기서는 display: box;을 원한 것.
• article 안에 예매하기, 예고편 버튼이 있으면 article만 쏙 떼와서 다른 데로 심을 수가 없다고 본다. 그래서 ul>li>article, a 구조로 만듦.
  
  
  

transition, transform

• 참고링크 MDN - transition-timing-function

• transform-origin 회전축 변경
  
  

Animation

• animation-name
  animation-duration
  animation-interation-count
  animation-delay
  animation-direction
  animation-play-state
  animation: 3s infinite alternate slidein

• 실습 - 빌딩 세우기

perspective(원근법)

• perspective 우리가 대상을 보는 거리

• 참고 링크
  imjignesh - css perspective works
  threejs - 3D javascript library
  3dtransforms - Card Flip 외 다수
  codepen - 박스 perspective 설정
  codepen - perspective 설정

오늘의 TIP

• 참고 링크
  amcharts - 나라별 svg지도
  css 문법 검사

• 크롬 익스텐션 추천
  openwax
  headingsmap
  Color zilla
  what font
  page rular redux
  Tota11y Plugin, from Khan Academy (웹접근성)
  
  

새로 알게된 내용

• 오늘은 생소한 친구들이 없어서 무난한 수업이었고 perspective을 이용해 만든 3d 작업물들이 제일 흥미로웠다. 보는 재미는 있는데 하라고 하면 못할 거 같다 🤣 css잘하는 FE되고싶다... 강사님이 공유해주신 사이트에 Carousel 형태는 전부터 해보고 싶었던건데 이참에 연습해봐야겠다.
  
  

내일 진도

• css 15, 16강 복습
• animation 실습 - 라이캣
• 미디어쿼리
• 유용한 디자인 사이트 모음

벨로그 왜 자꾸 지운 이미지 파일을 제일 먼저 보여주고 그러지? 왜 그러지 증말?