DH의 개발 공부로그

순서도 폴더구조 Link https://shape2ee.github.io/javascript-class/calculator/index.html HTMLE 코드 7 8 9 + 4 5 6 - 1 2 3 / C 0 = * CSS 코드 @charset "utf-8"; main { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; } .grid { display: grid; gap: 12px; grid-template-rows: repeat(5, 80px); grid-template-columns: repeat(4, calc(25% - 9px)); width: 50%; max-width: 300px; } ..

학원 수업이 끝나고 휴식과 예비군등 바쁘게 지내면서 시간이 지나고, 그리고 계속 걸리고 싶지 않았던 코로나에 걸리면서 일주일동안 고생을 하고 나니.... 컨디션이 올라오지않고 계속해서 쉬고 싶은 마음이 강했습니다. 그래도 다시 일어나서 시작을 해야하니까, 예전에 유튜브 "코딩 알려주는 누나" 채널에서 미뤄두었던 자바스크립트 슈팅게임 만들기를 해보고자 컴퓨터를 켰습니다. 자바스크립트 슈팅게임! 1. 폴더 구조 2. JavaScript let canvas; let ctx; canvas = document.querySelector("canvas"); ctx = canvas.getContext("2d"); canvas.width = 400; canvas.height = 700; 게임에서의 움직임을 자연스럽게 표..

며칠전에 기초 작업을 해둔 가위바위보 게임을 주말을 맞아서 완성을 하였습니다. 가위바위보 게임 바로가기 가위바위보 게임 코드 보러가기 저번에 생각했던 것처럼 디자인을 전체적으로 수정을 하였고, 호버 이벤트를 이용하여 사용자와 상호작용 할 수 있도록 하였습니다. 누구나 다 아는 가위바위보 게임이지만, 그래도 사용자에게 한번 더 알려주기 위해 게임설명서를 모달창으로 만들어서 추가하였습니다. 그리고 기능적인 면을 신경을 써서 추가하였고 이부분은 코드로 설명드리겠습니다. 주요 코드 사용성 문제 const gameStart = (e) => { const target = e.target; resetImg(); setTimeout( () => { switch(target.textContent) { case "가위" ..

포트폴리오 작업과 자바스크립트 공부를 병행하면서 머리가 아프고 집중력이 떨어져서 갑자기 토이 프로젝트나 한번 만들까라는 생각과 함께 바로 작업을 하였습니다. 우선 기초는 작업을 다 했지만 디자인과 가위바위보 이미지도 임시로 넣어둔 이미지라 변경 예정이며, 아직 수정할 부분이 많은 프로젝트지만 기록을 남기고 싶어서 이렇게 작성합니다. 방식은 가위바위보를 선택하면 컴퓨터가 랜덤으로 가위바위보를 선택하여 승부하는 게임으로 작업했습니다. 1. HTML 코드 가위바위보 게임을 해보아요😊 My Point 0 Your Point 0 reset 가위 바위 보 html 코드는 이렇게 작성을 하였습니다. bem 네이밍 방식을 공부하고 있고, 아직 부족한게 많지만 이번 프로젝트에 적용하고 싶어서 bem 방식으로 작업했습니다..

Lotte Cinema 롯데시네마 페이지를 리디자인 하였습니다. 기존의 롯데시네마가 다른 영화관 사이트에 비해 올드한 느낌이 있다라고, 개인적으로 생각되어 리디자인하여 작업을 했습니다 ReDesign 반응형웹 시멘틱 마크업 작업페이지 Main, 메인 페이지 Movie, 영화 페이지 Tiketing, 예매하기 페이지 느낀점 & 힘들었던 점 BEM방식의 네이밍 방식을 적용하겠다는 생각을 가지고 작업 하였고, 적용은 시켰지만 헷갈리는 부분이 css에서나 class네이밍에 있어 완벽하게 하지는 못한거 같아 개인적으로는 아쉽습니다. 공부를 더 해야할 것 같습니다. 메인 배너 슬라이드를 플러그인의 도움 없이 오로지 javascript로 작업을 해보고 싶어서 적용은 하였지만 마우스 드래그와 터치로는 작동을 시키지 못..