기말 대체과제로 만든 웹페이지 HTML과 CSS.Zip

인터넷 프로그래밍 기말고사 대체과제 웹페이지로 쇼핑몰을 만들었다. (별 거 없음)

처음 만들어봐서 많이 부족하지만 기록하고자 블로그에 올려본다. 너무 부족한 사이트라 html, css, js 소스는 올리지 않으려고 한다. 어차피 궁금해하는 사람도 없을 것 같고해서 말이다.

 

주제를 한~참 못 정하다가 내 고향인 양양을 중심으로 만들었다.

Main 섹션은 시원한 느낌을 주기 위해 바다사진을 넣고 main color는 #0156ae로 만들었다. 

쇼핑몰 내 모든 Button을 누르면 letter-spacing으로 글자의 간격을 넓혔다.

 

스크롤을 내리면 볼 수 있는 ABOUT 섹션

 

BEST 섹션이다.

 

쇼핑몰 사진은 목업 파일을 이용해서 직접 만들거나, 직접 찍은 사진을 이용했다. 마우스 포인터를 상품 박스에 올리면 박스 background가 main color와 같아지게 구현했다. 텍스트들은 하얀색으로 변한다.

 

product 섹션이다.

 

폰트어썸(https://fontawesome.com/) 사이트에서 아이콘을 이용하여 쇼핑카트, 찜, 상세보기 아이콘들을 넣었다. 역시 아이콘에 마우스 포인터로 올리면 background는 main color로, 아이콘 이미지는 하얀색으로 변하게 만들었다.

 

리뷰 섹션이다.

 

귀여운 울 말랑이와 콩떡이(지금은 엄청 커진..)와 우주소녀 엑시로 리뷰 섹션을 꾸몄다. 프로필 사진처럼 사진을 넣고 별점 아이콘까지 넣었다.

 

Footer 섹션이다.

 

최대한 깔끔하게 만들기 위해 노력했다. 여기서도 마우스 포인터를 올리면 아이콘 background가 하얀색으로 변하게 구현했다. sns로 넘어가는 아이콘과 쇼핑몰 Main에 있는 Navbar를 Footer에도 구현했다.

 

반응형으로 만들었다.

 

아주 약간의 자바스크립트 기능을 사용했다. width가 768px 이하가 되면 menu-bar가 생기고 누르면 상단에 있던 navbar가 우측에 생기는 모습을 볼 수 있다.

 

나중에 백엔드 공부를 시작한 뒤엔 이 사이트에 다른 기능을 넣어보려고 한다.