이젠온라인에듀
프론트엔드(퍼블리싱/웹개발)

왕초보를 위한 상세 페이지 제작 강의노트 (Photoshop,HTML, CSS 활용) (2024) Part.3-1

🌟 과정 소개: "제품의 가치가 판단되는 곳, 상세페이지 제작"
당신이 만드는 웹페이지는 얼마나 매력적으로 사용자에게 전달되고 있나요?
제품의 가치를 제대로 전달하기 위한 핵심은 바로 "상세 페이지 디자인"입니다.
아무리 좋은 상품이라도, 시선을 끄는 상세 페이지가 없다면 고객의 선택을 받기 어렵습니다.

본 과정은 Photoshop을 활용하여 디자인 레이아웃을 제작해보며, HTML과 CSS를 활용함으로써 기초 코딩개념을 배우고 이해하는 과정입니다.
왕초보 수강생들을 기준으로 기획, 디자인, 코딩까지 전 과정을 체계적으로 익히며, 실무에서 바로 활용 가능한 웹 제작 스킬을 단계별로 학습합니다.
강의 소개



왕초보를 위한 상세 페이지 제작 강의노트 (Photoshop, HTML, CSS 활용) 과정은 상세 페이지의 기획부터 디자인, HTML/CSS 코딩까지 웹페이지 제작의 전 과정을 실습을 통해 익히는 입문자 맞춤형 강의입니다.
디자인 감각을 코드로 구현하며, 웹디자인 실무에서 꼭 필요한 핵심 역량을 자연스럽게 체득할 수 있도록 구성되어 있습니다.

단순한 디자인 툴 사용법이나 HTML 태그 암기가 아닌, 실무에서 사용되는 상세 페이지를 직접 기획하고 디자인하며 코드로 완성하는 End-to-End 제작 역량을 단계별로 습득할 수 있습니다.
여러분은 이제 디자인과 개발을 모두 이해하는 실전형 웹디자이너로 한 걸음 나아가게 될 것입니다.

 

 

💡 이 과정을 통해 얻을 수 있는 것
📌 디자인부터 퍼블리싱까지: Photoshop → HTML/CSS 실습 기반 제작
📌 웹페이지 구조 이해 및 시맨틱 마크업 역량 강화
📌 반응형 및 다양한 브라우저 대응을 고려한 실전 설계 감각 습득
📌 실무형 프로젝트를 통한 포트폴리오 완성

 

🎓 수강 효과
✔ 기획-디자인-퍼블리싱까지 상세 페이지 제작의 전 과정을 이해
✔ Photoshop 디자인을 웹표준 기반 HTML/CSS로 구현하는 실전 역량 확보
✔ 다양한 화면에 대응하는 구조적 웹디자인 감각 향상
✔ 실습 프로젝트 기반의 포트폴리오 제작으로 취업/이직 경쟁력 강화

 

🙋‍♀️ 자주 묻는 질문 (FAQ)

Q. 완전 초보도 수강할 수 있나요?
A. 네! Photoshop과 HTML/CSS 모두 처음부터 설명하는 강의로 구성되어 있어 왕초보도 쉽게 따라올 수 있습니다.

Q. 디자인 프로그램을 다뤄본 적이 없어도 괜찮을까요?
A. 물론입니다. Photoshop 기본 사용법부터 친절하게 안내해드립니다.

Q. 실제 포트폴리오로 활용할 수 있나요?
A. 네! 실습을 통해 직접 만든 내용을 포토폴리오로 활용할 수 있습니다.

학습 목표
✅ 상세 페이지 제작에 필요한 기본 웹디자인 개념과 작업 환경 이해
✅ Photoshop을 활용한 시안 디자인부터 HTML/CSS를 이용한 웹 구현까지 실습
✅ 시맨틱 마크업과 레이아웃 구성으로 콘텐츠 전달력과 시각적 완성도 향상
✅ 다양한 화면 크기 대응을 위한 반응형 구성 및 브라우저 호환성 고려
✅ 실무형 상세 페이지 제작 프로젝트를 통한 포트폴리오 구축 및 실전 역량 강화
교육 대상
✨ 처음으로 웹디자인을 배우고자 하는 왕초보 입문자
✨ 그래픽 툴은 다뤄봤지만 웹 제작은 처음인 디자인 전공자
✨ 실무에서 HTML/CSS를 활용해 디자인 구현 역량을 높이고 싶은 현직 디자이너
학습 커리큘럼
  1. 교육 사이트 디자인

  2. 교육 사이트 코딩1 - HTML

  3. 교육 사이트 코딩2 - 메인 CSS

  4. 교육 사이트 코딩3 - 카테고리 CSS

  5. 브랜드 아파트 사이트 디자인

  6. 브랜드 아파트 사이트 코딩1 - HTML

  7. 브랜드 아파트 사이트 코딩2 - 메인 CSS

  8. 브랜드 아파트 사이트 코딩3 - 메뉴 CSS

  9. 화장품 사이트 디자인

  10. 화장품 사이트 코딩1 - 메인 CSS

  11. 화장품 사이트 코딩2 - 메인 CSS 인터랙션

  12. 메인 이미지가 강조되는 사이트 디자인

  13. 메인 이미지가 강조되는 사이트 코딩1 - HTML

  14. 메인 이미지가 강조되는 사이트 코딩2 - 메인 CSS

  15. 메인 이미지가 강조되는 사이트 코딩3 - 카테고리 CSS

환불 규정
  • 환불시 결제시 사용한 쿠폰은 복구되지 않습니다.
  • 환불금액은 정가가 아닌 실제 결제금액으로 계산됩니다.
  • 수강시작 후 7일 이내, 5강 미만 수강 시에는 100% 환불 가능합니다.
  • 수강시작 후 7일 이내, 5강 이상 수강 시 전체 강의에서 수강한 강의의 비율에 해당하는 수강료를 차감 후 환불 가능합니다.
  • 수강시작 후 7일 초과 시 정상 수강기간 대비 잔여일에 대해 아래 환불규정에 따라 환불 가능합니다.
    환불요청일 시 기준
    • 수강시작 후 1/3 경과 전, 실 결제금액의 2/3에 해당하는 금액 환불
    • 수강시작 후 1/2 경과 전, 실 결제금액의 1/2에 해당하는 금액 환불
    • 수강시작 후 1/2 경과 후, 환불 금액 없음
왕초보를 위한 상세 페이지 제작 강의노트 (Photoshop,HTML, CSS 활용) (2024) Part.3-1 대표 썸네일 이미지

왕초보를 위한 상세 페이지 제작 강의노트 (Photoshop,HTML, CSS 활용) (2024) Part.3-1

강의 구성
15
총 학습시간
7시간 56분
수강 기간
30 일간 수강
60,000