220809 홈페이지 구현 발표!

장장 2주간의 개인 첫 프로젝트? 가 끝났다.

 

주어진 문제를 똑같이 구현하고 홈화면을 구현하는 것이였는데

 

다른 페이지를 만들어도 상관없다고 하셨다.

 

일단 홈화면은 만들어 놓고 , 한번 컨셉을 뒤집었다가

 

나머지 페이지 들도 js와 html,css로 구현했다.

 

오늘이 그 발표일...

 

일단 지각... 7시 반에 일어나려고 했던게 문제 였다. 3시반에 자놓고 7시반에 일어나려하다니.

 

알람 끄고 다시 자 버려서 일어나니 9시 10분... 어이구

 

가는 와중에 서술형 시험 문제 외우고 부리나케 도착. 시험 시작한지 얼마 안됐는지

 

바로 시험 문제를 주셔서 풀고 제출하고

 

두번째 논술형 문제 풀고 ppt랑 vscode 작업했다.

 

어제 홈페이지에 들어갈 레트로 배경화면 만든다고 늦게 자서.. 그래도 재밌었다.

 

슬라이드 구현을 내 힘으로 해보려고 했는데 다행히 addEventListener("click",function(){ });

 

내장 함수가 있어서 사용했다. 슬라이드의 back 버튼과 next 버튼을 누르면

 

이벤트가 실행되도록 하는 것이였는데 function 메서드 안에 

 

내가 cnt = 1; 로 설정한 변수값을 증가 시키도록 했고 이미지가 반복되는 함수를 만들어 안에서 실행되도록 했다.

 

이미지가 반복되는 함수는 cnt==1 일때 이미지가 있는 쿼리값을 block;으로 설정하고, 다른 이미지들은 display=none;을 줌으로 해결!

 

같이 수업 듣는 분의 도움으로 setinterval() 을 사용, cnt>3 이면 다시 1로 회귀하도록 하고 그것이 *000초 마다 실행되도록 했다.

 

그럼 숫자는 1 2 3 1 2 3 이렇게 반복되므로 그에 해당하는 이미지가 계속 바뀌게 되지.

 

나는 썼다가 지웠는데 다시 코드를 구현할 수 있었다.

 

한가지 해결이 안된 것은 버튼을 누를 때 슬라이드가 멈추지 않는다는 것과, 

 

자연스럽게 넘어가는 효과를 구현하지 못했다는 것이다. 

 

오늘 다른 분들의 발표를 봤는데, margin을 이미지 크기만큼 주거나, white-wrap=nowrap;을 사용해서 옆으로 이미지를 늘린다음 

 

넘어가게 하거나 나처럼 cnt를 증가 시키면서 setinterval 말고 settimeout을 사용해서 만든 분도 계셨다.

 

역시 다른 사람이 만든 코드를 보면서 질문하니까 얻는 것이 많아 진다.

 

오늘 숨어있던 실력자 분들을 알수 있었다. 

 

이미지는 내가 제일 화려할 지 몰라도 완성도는ㅠㅠ

 

하지만 괜찮다. 나만큼 다른 페이지 구현에 힘쓴 사람도 없으니까. 나는 확장성을 가졌으니까.

 

발표 시간이 조금 더 길었다면 좋았을텐데. 이제 발표는 없겠지만 꾸준히 개인적으로 페이지를 만들어봐야겠다.

 

그리고 db연동이랑 자바도 다시 복습해서 완벽하게 홈페이지를 구현할 수 있도록 해야겠다

 

 

 

이미지랑 gif , 배경 만들고 핀터레스트 뒤지느라 고생했다!! 내일 부터 다시 힘내서 공부합시다