롯데제과 메인페이지 클론 코딩

lotteConfectionery.css

0.03MB

lotteConfectionery.html

0.03MB

lotteConfectionery.js

0.02MB

images.zip

8.05MB

 

html과 css 로 대충 뼈대만 잡고 자바스크립트 작성하면서 조금씩 채워넣기로 했다. 

 

html css 구성할 때  내가 중요하게 생각한 것은 

• 쓸모 없는 태그 안 만들기 
• 한 번 쓰는 거는 id . 여러 번 쓰는 거는 class 

쓸모 없는 태그를 만들지 않는 건 여렵지 않은데 필요한 태그를 만들지 않은 게 나중에 좀 문제가 되었다. 

이 단계에서는 어떤 영역에 대한 이름을 짓는 거라 별로 안 어려웠다.  

 

그런데 자바스크립트 들어가면서부터 갑자기 뭔가 html 구조가 마음에 안들어서 싹 갈아 엎을까?? 한 시간정도 고민하다가 그냥 하기로 했다. 뭐가 마음에 안들었던건지는 기억이 안난다. 

 

자바스크립트 작성하면서 제일 귀찮았던 건 이름 짓는 거였다. 함수 이름이나 변수 이름이나 관련있는 것으로, 이름만 보면 이게 뭐 하는 건지 딱 알 수 있게 만들고 싶었는데, 함수랑 변수가 점점 늘어나니까 이름을 짓기가 힘들었다. 

 

 제일 어려웠던 부분은

프로덕트 부분에서 제품이 하나씩 올라오면서 왼쪽으로 빠지는 부분 만드는 거 였다. 조금만 바꾸면 될줄 알았는데  2.5일 정도 계속 콘솔창만 보고있다.  잘 되다가 갑자가 한번씩 삐끗하는 경우가 많았다.  셋인터벌을 셋타임아웃으로 바꾸니까 해결되었다. 

 

 개인적으로 아쉬운 부분은 

 어떤 움직임을 주고자 할 때. css만 줘도 되는건데 굳이 js에서 함수를 통해 각 엘리먼트의 클래스를 더하거나 빼면서 헛고생을 한 부분이랑. 마지막에 다 했다는 생각에 천천히 진행한점.(빨리 했으면 하나 더 만들었을듯.) 

 

앞으로 나아갈 방향은

html. css를 잘 다루기 위해서  시간이 나면 틈틈이  더 많은. 다른 웹사이트 클론코딩을 해야겠다. 내가 어디로 갈지는 모르겠지만. 할줄 아는게 나쁜건 아니니까.