튜토리얼 출처: 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 04 - Array Cardio 1 튜토리얼 분류: JavaScript 튜토리얼 설명: JavaScript 배열 조작 메서드 연습하기 진행기간: 2020년 4월 15일 배열 내 원소가 중복해서 등장하는 횟수 구하기 reduce( ) 메서드의 초기값으로 객체 입력 2번째 인자로 초기값을 입력 형태: 배열.reduce( callback, 초기값 ); 반복마다 객체[key] 조작 후 반환 예시 코드 배열에서 특정 문자열을 포함하는 원소만 추출하기 filter( ) 메서드의 조건식으로 includes( ) 메서드를 입력 예시 코드 GitHub 저장소 링크

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 03 - CSS Variables 튜토리얼 분류: JavaScript 튜토리얼 설명: JavaScript로 CSS 속성 값 변화시키기 진행기간: 2020년 4월 14일 CSS 변수 사용하기 :root 의사 클래스 활용하기 문서 트리의 root 요소를 선택함 HTML의 root 요소는 요소이므로, html 선택자와 동일한 역할을 함 ※ :root가 html 선택자보다 명시도가 더 낮음 전역 CSS 변수 선언에 주로 사용됨 참고자료 :root - CSS: Cascading Style Sheets | MDN 명시도 - CSS: Cascading Style Sheets | MDN 사용자 지정 속성(CSS 변수, 종속 변수) 정의하기 형태: --변수명..

튜토리얼 출처: 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..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 01 - JavaScript Drum Kit 튜토리얼 분류: JavaScript 튜토리얼 설명: 웹사이트 내 요소 클릭 시 드럼 소리 재생 & 클릭 시각효과 추가하기 진행기간: 2020년 4월 12일 HTML audio 태그 JavaScript로 재생하기 const audio = document.querySelector('audio'); audio.playTime = 0;// 오디오가 중첩될 수 있도록 재생시간을 되돌림 audio.play(); CSS Transition이 끝나는 시점 인식하기 element.addEventListener('transitionend', event handler); Web API는 transitionend 외 t..