Project/개인 프로젝트 (11) 썸네일형 리스트형 작성해야 할 글 리스트 ... 프로젝트 포스팅 넘 힘들다 ... 그래서 안 썼ㄷ ㅏ... 겨울 방학에는 다 쓰자 ... 앞으로 뭐 써야할 지 우선 적는당 시기 주제 비고 여름 방학 메이커스 데이 -> smcl 박람회 웹 / 스마클 / 팀플 10/1 sejong maps 웹 / 해커톤 / 팀플 박람회 (안 써도 무방) 기계 + AI / 견학 / 다인 9/24~11/29, 12/26 IoT 과방 하드 + 웹 / 학과 행사 / 팀플 나의 비전 통신 / 고찰 / 개인 12월 말 데이터 분석 프로젝트 AI 기초(data) / 스마클 / 팀플 러닝저널 2편(11/21, 12/16) overleaf 사용기 플랫폼? + unity 소개(사용 용도) [JS] 바닐라 JS | 깃(git)과 함께 하는 테트리스 클론 코딩 일지 (1) 오늘, 내일 노마드 코더 챌린지 일정도 없고 강의도 이미 다 들은 거길래 이때가 기회다 싶어서 얼른 테트리스를 만들어 보기로 했다. 테트리스를 만드는 데에도 나름 버전 구분이 필요할 거 같아서 아직은 생소한 깃/깃허브 연습을 하기에 좋은 기회라고 생각했다. 그리하여 21.07.31 5PM! 깃(git)을 사용하여 테트리스 만들기 시작이다! cod Scalper님의 https://youtu.be/1lNy2mhvLFk 영상을 보고 만들었다. 클론 코딩은 무작정 베끼면 아무 소용이 없다고 생각한다. 오래 걸리겠지만 이해하는 것을 주목표로 하고 열심히 따라가 보겠다. 만들면서 생기는 궁금증은 이 인용 말풍선에 넣어보겠다. 원격 레파지토리와 로컬 파일 연결하기 원래 이건 손쉽게 될 거라고 생각했는데 조금 삐걱거림.. [JS] 바닐라 JS | #chall2) window resize 를 listen하여 반응하는 사이트 만들어보기 🌈 미리 보기 1. 가로 900px 이하 2. 가로 900px 미만 && 1400px 이상 3. 가로 1400px 초과 ⌨️ 소스 1. window.innerWidth 함수 사용 2. 미디어 쿼리 사용 -> 가으더님 코드 같이 공부하는 팀원인 가으더님은 미디어쿼리를 공부한 후 적용해보셨다고 한다. (가으더님 블로그: https://yh4752.tistory.com/) 💻 결과 결과는 동일하다. 가으더님의 코드를 if-else문으로 묶을 수 없는지도 생각해보면 좋을 거 같다. 💬 특징 ✔️ javascript의 화면 단위 (px -> vw 단위 변환) CSS는 viewport 기능을 지원하고 그에 따라 vh, vw 단위가 존재한다. 그러나 Javascript는 vh, vw 같은 단위를 지원하지 않는 듯하다.. [JS] 바닐라 JS | #chall1) 여러가지 event 함수 만들어 사용해보기 🌈 미리 보기 처음으로 html에 js와 css를 연결해 보았다. js에 html 요소를 불러오는 것은 querySelector 함수를 이용했다. 그리고 addEventListener 함수를 사용해보았다. event를 추가하는 법은 두 가지이다. 1. title.addEventListener("click",handleTitleClick); 이 방법을 사용하면 나중에 removeEventListener를 통해서 event listener를 제거할 수 있기 때문에 더욱 선호된다. 2. title.onclick = handleTitleClick; 이런 방법도 있다. (변수).on(eventname) = (함수이름); 으로 작성하면 된다. 이번 chall에는 모두 첫 번째 방법을 사용해보았다. 또한 event는.. [HTML, CSS] 뮤직 플레이리스트 + 현재 재생 곡 화면 클론 🌈 미리 보기 ⌨️ 소스 소스는 아래에서 확인할 수 있다. See the Pen challenge_7 by 유지원 (@jiyajiwon) on CodePen. 💻 결과 아래에서 실제로 어떻게 작동하는지 테스트 해볼 수 있다. 🎈 느낀 점 progress 바를 animation을 이용해서 제대로 만들어 보고 싶다. 폰트를 귀여운 걸 쓰니까 만드는 재미가 있는 것 같다. [HTML, CSS] 도서 라이브러리 프레임 클론 🌈 미리 보기 ⌨️ 소스 See the Pen challenge_6 by 유지원 (@jiyajiwon) on CodePen. 💻 결과 아래에서 실제로 어떻게 작동하는지 테스트 해볼 수 있다. 💬 특징 ✔️ overflow-x 사용하여 수평 방향 스크롤바 만들기 css에서 container 클래스에 overflow-x 를 설정하였다. overflow-x: scroll; 이라고 입력하면 된다. 스크롤바를 넘기면 그 뒤의 내용을 볼 수 있다. ✔️ -webkit- 이용하여 스크롤바 꾸미기 -webkit-scrollbar{ }, -webkit-scrollbar-thumb{ }, -webkit-scrollbar-webkit-scrollbar-track{ }을 이용하여 스크롤바를 꾸몄다. 🎈 느낀 점 스크롤바를 사.. [HTML, CSS] 뮤직 플레이리스트 프레임 클론 🌈 미리 보기 ⌨️ 소스 소스는 아래에서 확인할 수 있다. See the Pen challenge_5 by 유지원 (@jiyajiwon) on CodePen. 💻 결과 아래에서 실제로 어떻게 작동하는지 테스트 해볼 수 있다. 🎈 느낀 점 나 시리즈 태그를 쓰면 정렬에 문제가 생기는 경우가 있는 것 같다. 예를 들어서 문장의 위 아래로 쓸데 없는 공백이 생기는 경우가 있다. 이 경우를 대비해서 짧은 text는 span으로 쓰고 기타로 폰트를 조정하는 게 낫겠다. [HTML, CSS] 두 가지 애니메이션이 재생되는 사이트 (animation 응용) 🌈 미리 보기 ⌨️ 소스 소스는 아래에서 확인할 수 있다. See the Pen challenge_4 by 유지원 (@jiyajiwon) on CodePen. 💻 결과 아래에서 실제로 어떻게 작동하는지 테스트 해볼 수 있다. 🎈 느낀 점 애니메이션 싱크를 어떻게 맞추는 건지 잘 모르겠다. 저렇게 맞추기 조금 힘들었다. 이전 1 2 다음
