JC story

이전에 만들었던 Music App을 Loopstation으로 응용해보았습니다! Music App을 만들면서 이것저것 시도하다 보니 Loopstation에 대한 아이디어가 번뜩 떠올라 시도하게 됐습니다. ㅎㅎ 앱의 순서를 우선 보시면 Record 버튼을 눌러 녹음 시작 음이 담긴 A, S, D, F, G 키를 눌러 연주 Stop 버튼을 눌러 녹음 정지 및 다운로드, 그리고 녹음된 음원 중복 재생 reset 버튼을 통해 중복 재생 정지 입니다. HTML&CSS HTML과 CSS는 Music App에 기반됐습니다. Music App에서 추가적으로 녹음 시작 버튼, 중지 버튼, 리셋 버튼 그리고 녹음 경과 시간을 표시해주는 부분에 대한 p태그 이렇게 새로 추가되었습니다. 음원 장착 부분은 위에 링크된 Music..

이번에는 'Dev Ed' 유튜브에 있는 내용 중 Javascirpt Tutorial 중 하나인 Build A Mysic App With Javascript 를 진행하였습니다. 각 버튼을 누르면 사전에 저장해 놓은 소리가 나면서 간단한 jump animation 이 실행되는 예제입니다. 음이 들어간 예제를 해보니 더 재미있고 어떤 방향의 애플리케이션을 만들어 봐야겠다는 생각까지 들게 되네요! HTML HTML 구성은 매우 간단합니다. header에 h1 tag와 p tag 만 사용하여 간단하게 구성하였습니다. 그리고 각 버튼은 div를 이용하여 구성하고 div 안에 재생할 음악을 audio에 담습니다. CSS 공이 튀어 오르는 animation CSS는 @keyframes jump {}를 이용합니다. an..

'Dev Ed'의 유튜브를 보면서 Javascript 실습을 진행하고 있습니다. 실습을 계속 진행하면서 감 잡는 것이 중요하다고 생각하여 앱 만들기를 따라 하면 공부하였습니다. 이번에 진행한 영상은 Build A Meditation App with Javascript HTML&CSS입니다. 위 영상은 Dev 가 미리 만든 Git-hub MeditationApp_Tutorial을 재구현 하는 내용입니다. 이 APP의 내용은 빗소리나 해변가의 소리를 들려주며 명상에 도움을 주는 앱입니다. 소리를 몇 분 동안 들려줄 것이며 남은 시간을 중앙 디스플레이에 원형 띠와 숫자로 표시해줍니다. HTML 중요 HTML Tag는 audio와 video입니다. audio와 video는 앱에 원하는 소리와 동영상을 넣을 수 ..

독학에 재미를 느끼면서 프로그래밍 독학을 시작했습니다. 예전부터 프로그래밍 공부는 조금씩 했지만 항상 문법만 익히고 끝내고 익히고 끝내고를 반복하여 실제로 사용해보지는 못했습니다. 마치 영어 단어만 외우고 실생활에 사용하지 못하는 것과 마찬가지 었죠.. 이번에는 문법을 익힌 후 유튜브 영상들을 참고하면서 실습을 진행했습니다. 반복해서 여러 유형 실습해보면 제 것이 될 것이라는 믿음은 학창 시절 공부하면서 확인을 했고 이번에도 똑같이 적용해보고 있습니다. 실습 유튜브 영상은 'Dev Ed'라는 유투버의 재생목록에 있는 Javascript Animation Tutorials입니다. 사이트에 들어갔을 때 특정 버튼을 누르면 버튼이 변하면서 무언가 동작하거나 창이 나오거나 이러한 애니메이션을 제작하는 과정을 모..