본문 바로가기
html

쇼핑몰 과정(1)

by coie 2021. 2. 3.

오늘은 

전날과 같이 팀 프로젝트가 아닌

혼자서 만들고 있는 쇼핑몰 사이트를 만드는데...

nav에 hover와 active그리고

전체 틀을 짜기 까지는

아 이제 어느정도 쉽게 만드는구나~~했는데

역시나 css가 가끔 더 어려운것같다.

먼저 input의 radio를 카테고리에서 설정 할 수 있도록 할려고 했는데....

하다보니 너무 밋밋한 느낌이 나기 시작하여

위와 같이 클릭을하면 효과를 넣었는데

여기 까지는 음....css는 조금 더 해야지 하는 정도?로 끝났다.

 

중간의 제목 부분도 조금 큰것 같기는 하지만

textarea로 하나하나 설정해주니 금방 끝!

 

그런데 

제일 문제점이 쇼핑몰의 경우 메인 썸네일? 이미지를 보고 사람들이

고르므로 사진이 업로드 되어야한다고 생각했다.

그런데 막상 input으로 만들어보니 이렇게 끝...?

 

그래서 일단 input의 모양을 위의 radio와 같이 바꾼후 

다음 문제가 이미지 미리보기.....

아무래도 본인이 올린 이미지를 바로바로 확인 할 수있다는 것이

큰 장점으로 느꼈기 때문에 넣어보자 했다.

그래서 구글선생님에게 물어보니

                                                                      FileReader()

라고 하는 새로운 스크립트를 주셨고

readAsDataURL라는 새로운 것도 주셨다....

이렇게 저렇게 검색을 하고 

나름대로 이해를 하다보니 

위 아래 합쳐서 한페이지를...

몇시간을 들여서 만들었다.

뭔가 하면 할수록

들이는 시간은 늘어나는데 이렇게 한페이지밖에 못 만들었다는 것에

아직 부족하다는걸 뼈저리게 느끼게 해주면서

나머지 페이지는 쉽지 않을까~

하는 기대감도 생기고...

한숨만 나오는 것 같다...ㅎ

 

rwd117.github.io/shop/%EC%82%AC%EC%9D%B4%ED%8A%B8/sub/write.html

 

Document

 

rwd117.github.io

 

언제 쯤 되야 완벽한 사이트를 만들 수 있을지... 내일은 버튼 부분 까지 수정 등등 을 목표로

'html' 카테고리의 다른 글

쇼핑몰 과정(2)  (0) 2021.02.04