튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 05 - Flex Panel Gallery 튜토리얼 분류: CSS, JavaScript 튜토리얼 설명: CSS Flex를 이용한 이미지 갤러리 진행기간: 2020년 4월 16일 CSS Flex의 특징 부모 요소를 Flex 컨테이너, 자식 요소를 Flex 아이템이라고도 함 Flex 컨테이너는 자손 요소로 상속되지 않으므로, 중첩해서 만드려면 자손 요소에게도 설정해줘야 함 CSS Flex 관련 속성들 display: flex 해당 요소를 Flex 컨테이너로 설정하는 속성 flex-direction Flex 컨테이너의 방향을 설정하는 속성 기본값은 가로이며, 가로 / 가로 역순 / 세로 / 세로 역순의 4가지 중 설정할 수 있음 justify-co..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 02 - CSS + JS Clock 튜토리얼 분류: JavaScript 튜토리얼 설명: 직선 모양의 div 요소 3개를 현재 시각과 연동해 시계의 시침, 분침, 초침처럼 작동시키기 진행기간: 2020년 4월 13일 CSS transform( ) 속성의 기준점 설정하기 transform-origin 속성 활용 형태: transform-origin: x y z; x, y, z축 모두 조절할 수 있음 x축은 길이, left, right, center 키워드로 조절 y축은 길이, top, bottom, center 키워드로 조절 z축은 길이로 조절 기본값은 center 참고자료: transform-origin - CSS: Cascading Style..

강의: [edwith 부스트코스] 웹 프로그래밍 챕터 3, 웹 앱 개발: 예약서비스 1/4 학습일: 2020년 4월 12일 4. Web Animation - FE 웹 애니메이션 이해와 setTimeout 활용 애니메이션: 반복적인 움직임을 나타내는 것 웹 UI의 애니메이션은 JavaScript로 다양하게 제어할 수 있음 단순하고 규칙적인 애니메이션은 CSS3의 transition과 transform 속성으로 대부분 구현할 수 있음 CSS 방식은 JavaScript보다 더 빠른 성능을 보장하며, 특히 모바일 웹에서 성능 차이가 두드러짐 애니메이션이 단순하면 CSS로, 세밀한 조작이 필요하다면 JavaScript로 적절하게 나눠 구현해야 함 성능 비교를 통해 가장 빠른 방법을 찾는 과정도 필요함 FPS(Fr..