본문 바로가기

전체 글

 (325)
20200806 T.I.L 오늘 한 일 영화관 좌석 선택 페이지를 완성했다. 동영상플레이어를 커스텀해서 페이지를 만들었다. 동영상이 진행이 될때 진행 바를 움직여서 시간을 바로바로 옮기고 싶었는데 클릭을 정확하게 하지 않으면 너무 버벅대고 그래서 어떻게 해결해야하는지 고민을 많이 했는데 그부분은 해결하지 못했다. ㅜㅜㅜ 일단은 클릭의 정확도를 높이면 선택이 잘되니 추후에 넷플릭스 클론코딩을 할때 더 고민해봐야할 점인거같다. 이 커스텀 동영상 플레이어 페이지를 만들다가 내가 정말 좋아하는 넷플릭스 페이지를 클론 코딩해보고싶은 마음이 생겼다. 20개의 프로젝트가 다 끝나면 바루 실행으로 옮겨야겠다. 코딩 기초 문제 10문제 정도를 풀어보면서 앞으로 어떻게 공부해나가야 할지 고민해봤다. 파이썬으로 그래도 알고리즘 문제 몇개는 풀어봐서 ..
2020.08.05 T.I.L 오늘 한 일 오늘은 생각보다 동생을 돕는일이 길어져서 공부를 오래하지 못했다 ㅜㅜ 원래 주말에는 그래도 평일보다는 여유가 있게 공부하는 편인데 이번 주말은 버닝해야 할 것 같다. 그래도 타자연습으로 간단히 공부를 시작했다. 영화관에서 영화선택과 좌석선택을 할 수 있는 페이지를 만들었다. html, css를 완성한다음 자바스크립트로 좌석을 클릭하여 선택하고 다시 클릭하여 선택을 취소할 수 있게 하고 선택한 좌석수와 영화의 가격에 맞는 총 가격을 보여주는 것까지 완성했다. 아직 서버에 선택한 정보를 넘겨주거나 페이지를 새로 고침해도 그 기록이 그래도 남아있는기능을 추가해야한다. 앞으로 할 일 지금 하는 페이지 작업을 마무리하고 ES6공부와 ES5 복습을 해야한다. 그리고 코딩 초급문제부터 차근히 풀어봐야겠다.
20200804 T.I.L 오늘 한 일 오전에는 자바스크립트 ES6에 대한 강의를 듣기 시작했다. ES5와는 확실히 다르게 추가된 점들이 많은 거 같은데 여기서 내가 ES5 강의를 듣기를 정말 잘한 거 같다. 기본 개념이 좀 잡혀있어서 다른 점이 어떻게 다른지 파악할 수 있고 일단 ES6를 가르치는 강의는 자바스크립트 기본에 대한 내용이 없고 전체를 어우르는 강의는 본질을 너무 얕게 배우는 느낌이 들었달까... 두 개를 분리해서 차근차근 배워나가는 게 좋은 거 같다. 아직 그래도 ES5에 대한 거도 확실히 100% 다 파악하지는 못한 거 같아서 열심히 복습도 해야겠다. 복습을 안 하니까 다 까먹는 느낌이다. ㅜㅜ 또 바닐라 자바스크립트로 웹페이지 만드는 실습하는 강의도 함께 시작했다. 첫프로젝트 때는 매번 제이쿼리로 시작을 해서 ..
20200803 T.I.L 오늘 한 일 SPACE PIG 작업을 모두 마쳤다! 하루 종일 코드를 적어 내려 가고 여기저기 css를 고치며 결국 완성을 해 냈다. 아직 내가 보기에 만족스러운 부분들이 투성이이고 내 능력 밖이지만 원하는 기능들을 더 추가하고 싶은 마음이 굴뚝같아서 아쉽지만 프로젝트의 묘미는 끝을 둔다는 거에 있다. 언젠가 내가 더 발전해서 이 프로젝트를 다시 시작할 수 있겠지만 지금의 최선을 다하고 완성을 했다는 거에는 만족감을 만끽해도 된다. 그래도 약간의 아쉬운점은 일단 이미지 용량이 너무 많아서 그런가;;; 이미지가 초반에 자꾸 깨진다. 앞으로 트래픽 문제? 에 대해서도 좀 더 알아보고 싶다. 그리고 마우스 휠이 부드럽지 않아서 스크롤바를 직접 내려보는 걸로 두 번째 동영상을 찍어보았다. 앞으로 할 일 알고리즘..
[반응형 웹의 기초] 이벤트 추가하기 addEventListener, 스크롤바 만들기 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. addEventListener( ) 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다. 일반적으로 Element, Documnet, Window 지만 이벤트를 지원하는 모든 객체를 대상으로 할 수 있다. target.addEventListener(type, listener); type: 반응할 이벤트 유형을 나타낸다. (대소문자 구분) listener: 여기에는 함수가 들어간다 안에 함수를 바로 작성해주어도 되고 함수 이름을 넣어주고 함수는 따로 작성해주어도 된다 window.addEventListener('click', function () { new Character(); }); . function clic..
20200802 T.I.L 오늘 한일 마우스 이벤트를 이용해 마우스를 움직였을 때 우주공간이 3d 관점에서 보일 수 있도록 만들었다. 캐릭터의 팔다리 부분들과 몸통, 꼬리까지 css로 하나의 캐릭터로 조립을 완성했다. 중간에 우주 되지의 손이 검은색이라 우주공간에서 안 보이는 부분도 포토샵으로 색을 수정해서 보이도록 했다. 조립한 각각의 팔다리 꼬리들의 에니메이션들을 완성했다. 꼬리는 항상 흔들거리게, 팔다리는 class 이름이 swim 일 경우에 흔들거리게 만들었고 data-direction 이 forward, backward, left, right일 때 포지션에 맞게 캐릭터를 회전시켜 정말 수영하는 것처럼 보이게 만들었다. 대강의 css들은 모두 완성한거같다. 내일 할 일 오늘 자바스크립트 코드를 많이 작성하지 못해서 못한 블..
20200801 T.I.L 오늘 한일 하던 실습 페이지 완성했다. 금방금방 쉽게 할 수 있을 줄 알았는데 생각처럼 술술 풀리지는 않았다 ㅜㅜ 역시 뭐든 만만히 보면 안 된다. 새로 프로젝트를 계획했다. 이름하야 프로젝트 'Space Pig'! 유유자적하게 우주를 수영하는 돼지 캐릭터가 있는 웹페이지를 구현해보고 싶었다. 그래서 우주 느낌이 나는 Psd 템플릿과 돼지 캐릭터를 엄청 서칭 해서 찾아봤다. 무료 템플릿과 캐릭터를 찾는 거는 정말 어려웠다. ㅜㅜㅜㅜ 게다가 나는 캐릭터가 3D 공간의 캐릭터로 보이길 원해서 뒷면까지 고려하고 팔다리의 움직임 또한 고려를 해야 하여서 평면적인 캐릭터에 포토샵 작업 또한 필요했다. 내가 포토샵을 다루는데 그나마 능숙한 편이라 다행이다 ㅜㅜ 이렇게 코딩할 때 쓸 수 있을 줄이야 ㅎㅎㅎ 뭐든 알고..
20200731 T.I.L 시작 제대로 공부를 시작하고 블로그를 시작한지 적어도 한달은 지난것 같은데 이제야 TIL을 시작한다. 공부를 하면서 내가 오늘 뭐했는가에 대한기록을 남기고 싶어 TIL( Today I Learned )을 시작하기로 했다. 혼자 공부를 하다보니 여러모로 혼란스러울때가 많다. "내가 올바른 방향으로 공부를 하고 있는것인가? 나는 얼만큼 발전을 했나?" 나는 부트캠프나 국비지원교육과 같은 교육기관에 다니면서 공부하는것이 아니라 혼자 공부를 하기때문에 주변과 비교할 만한 상황이 아니니 언제나 나의 위치란 어디인가를 고민하게 된다. 옆에서 알려주는 선생님이 없으니 정보를 찾는것은 오롯이 내 몫이다.(그래서인지 정보를 검색해서 찾는 능력이 나날이 늘어나는것 같기도 하다 ㅎㅎ 생존 검색 또한 개발자의 큰 자질이라고 자기합..

티스토리툴바