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

강의: [edwith 부스트코스] 웹 프로그래밍 챕터 3, 웹 앱 개발: 예약서비스 1/4 학습일: 2020년 4월 10일 0. 소개 FE(Front End)의 Key Point JavaScript 배열, 객체 배열, 객체를 조작하는 메서드를 위주로, 데이터를 조작하는 방법 - 배열 조작 메서드 위주 DOM API, AJAX 심화 웹 애니메이션 웹페이지의 스르르 움직이는 모습을 위해 필요 BE(Back End)의 Key Point : Spring MVC MVC 패턴 복잡한 웹 어플리케이션 개발 시 효율적으로 개발할 수 있도록 돕는 디자인 패턴 직접 구현하기는 어렵지만, 기존의 잘 만들어진 프레임워크를 사용할 예정이므로 문제되지는 않음 가장 많이 사용되는 Spring MVC를 이용 레이어드 아키텍쳐(Lay..

프로젝트: [edwith 부스트코스] 웹 프로그래밍 프로젝트 B, To-do List 만들기 진행기간: 2020년 4월 9일, 10일 Java 문자열 부분적으로 바꾸기 .replace( ), .replaceAll( ), .replaceFirst( ) 메서드를 사용해 바꿀 수 있음 참고자료: [Java] 문자열 치환(Replace) 사용법 & 예제 Java의 If ... Else 구문에서 ==로 비교했는데 오류가 발생할 때 해결 방법 조건식에 string == "문자열" 대신 string.equals("문자열") 사용 ==는 타입까지 비교하므로, 값이 같은데도 오류가 발생할 수 있음 참고자료: How do I compare Strings in Java? - Stack Overflow HTML form 요소..

사이트: edwith 강의: [부스트코스] 웹 프로그래밍 챕터 2, DB 연결 웹 앱 학습일: 2020년 3월 23일 2. Web UI 개발 - FE Window 객체와 setTimeout window 객체: 브라우저 개발 시 자주 활용되는 객체로, 많은 메서드를 포함하고 있음 형태: window.메서드( ), 메서드( ) window 객체는 전역 객체이므로 생략하더라도 메서드가 동작 예시) alert, setTimeout, setInterval 등 setTimeout(callback, delay) 비동기(asynchronous)로 실행되는 함수로, 다소 낯설게 동작함 인자로 즉시 실행되지 않고 나중에 실행되는 callback 함수를 받음 작동되는 순서 setTimeout 실행 브라우저(Web API)가..