웹디자인 상세페이지 디자인을 홈페이지로!

안녕하세요!!

캄디자인입니다.(__)

글을 적고 있는 이 시간! 23년이 시작되었습니다.

날씨는 쌀쌀하지만 다들 행복하고 즐거운 2023년이 되시길 바랍니다~

웹디자인 상세페이지 디자인을 html로 홈페이지 제작 구현

오늘은 웹디자인 중 상세페이지 디자인을 html로 구현한 작업입니다.

메인 페이지! 첫번째 화면!

기존에 있던 상세페이지에서 제작된 상세페이지 입니다.

사실 항상 하던 작업이지만 포토샵으로 상세페이지만 작업을 하고 말았지만,

오늘은 웹사이트로 구현을 해봤습니다.

웹사이트의 레이아웃을 구현해야 하기에 번거롭긴 하지만

상세페이지 하나로 웹사이트를 구현하는 목적이 있기 때문에 열심히 했습니다ㅎㅎ

메인 이미지 후 정보

상세페이지에 나온 텍스트들을 참고하여 구현했습니다.

일단 반응형 홈페이지를 만들어야 하기에 이렇게 col과 md를 나누었습니다.

한번 더 반복되는 제품 이미지!

텍스트와 이미지들로만 구현하게 된다면

조금은 무료한 디자인이 될 수 있기 때문에 이렇게 한번 더 크게 반복되는 제품 이미지를 넣었습니다.

제품을 한번 더 보여준 뒤 제품의 디테일 텍스트

이제 제품의 디테일 텍스트가 들어갑니다.

그리고 좌, 우 대칭으로 포인트 텍스트와 설명이 들어가 있습니다.

고객 리뷰! 버튼과 스와이프 기능!

고객 리뷰의 경우에는 상세페이지 디자인에서 중요한 부분을 차지 합니다.

실제로 사용한 고객의 정보를 읽어볼 수 있기 때문에

리뷰 페이지를 따로 빼주는게 좋은거 같습니다.

다른 제품도 함께 보자!

홈페이지 제작에서는 이렇게 따로 다른 제품들도 추천으로 넣을 수 있지만

상세페이지 같은 경우에는 맵태그나 또는 code를 써서 다른 제품으로도 유도가 가능하게 할 수 있습니다.

마지막 제품 이미지!

마지막 끝 부분까지도 제품을 한번 더 출력시켰습니다.

웹디자인에 관한 궁금하신 점이 있으시면

아래 버튼을 눌러 문의주시면 됩니다.

다들 새해복 많이 받으시고 항상 행복하세요!!

저는 다음 포스팅으로 돌아오겠습니다요~

캄디자인_