튜토리얼 출처: 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 부스트코스] 웹 프로그래밍 프로젝트 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 강의: [부스트코스] 웹 프로그래밍 챕터 1, 웹 프로그래밍 기초 학습일: 2020년 2월 28일, 29일 2. HTML - FE HTML 태그 다양한 종류가 있으며, 각 쓰임새에 맞게 쓰는 것이 권장됨 쓰임새에 맞게 HTML 태그를 작성하는 것을 '의미론적(Semantic)'이라고 함 HTML 레이아웃 태그 레이아웃: HTML 화면의 기본적 구성 요소 예시) 상단(header), 하단(footer), 내비게이션 바(nav) 등 header, footer 등은 쓰임새가 이름에 드러나있을 뿐, 실질적으론 div와 동일하게 block element로 간주됨 HTML 본문의 경우 브라우저 호환성을 고려해야 하므로 PC와 Mobile에서의 작성 방식이 다소 다름 PC: 브라우저 호환성 이슈..

사이트: edwith 강의: [부스트코스] 웹 프로그래밍 챕터 1, 웹 프로그래밍 기초 학습일: 2020년 2월 26일 1. Web 개발의 이해 - FE / BE 웹 프론트엔드와 백엔드 웹 프론트엔드 담당 분야 사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)를 제공 사용자의 요청이나 요구사항(마우스, 키보드, 음성 입력 등)에 반응해서 동작 프론트엔드 개발자의 역할 웹 콘텐츠 종류에 적합한 구조를 설계 신문, 책 등의 레이아웃 생각해보기 적절한 배치와 일관된 디자인으로 시각적으로 보기 좋게 만듦 사용자의 요청을 잘 반영할 수 있도록 설계 즉각적인 소통처럼 느껴지도록 반응이 빠르고 부드럽게 이루어져야 함 사용되는 언어 HTML(HyperText Markup Language): 구조 설계 CS..