카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)

Name: 카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)
Price: 33000 KRW
Rating: 5 (13 reviews)

카페 24에 올라온 베스트 쇼핑몰 디자인을 직접 클론코딩해보며 빠르게 HTML과 CSS를 학습할 수 있습니다. HTML + CSS에 대한 기본적인 이론을 학습하고 직접 클론코딩을 통해 쇼핑몰 디자인을 완성하여 이론에서 배웠던 내용을 적용하고 견고하게 HTML과 CSS의 틀을 잡을 수 있게 강의를 구성했습니다

(5.0) 수강평 13개

수강생 167명

난이도 입문

수강기한 무제한

같이코딩

실습 중심

html

css

클론코딩

HTML/CSS

웹 디자인

실습 중심

html

css

클론코딩

HTML/CSS

웹 디자인

삼성

임직원들도 이 강의를 듣고 있어요!

삼성

임직원들도 이 강의를 듣고 있어요!

먼저 경험한 수강생들의 후기

5.0

companyable

32% 수강 후 작성

초짜도 이해하기 쉽게 잘 설명 해 주십니다.

5.0

freehy1356

32% 수강 후 작성

이해 잘가게 차근히 설명해줌

5.0

빠른 까치

30% 수강 후 작성

지금까지 여러 온라인 코딩 강의를 들어봤지만, 이렇게 딕션이 또렷하고 설명이 깔끔한 강의는 처음이었습니다. 처음에는 유명하지 않아서 반신반의했는데, 오히려 강사님의 실력이 정말 탄탄하다는 걸 느꼈습니다. 개념 설명도 군더더기 없이 정리돼 있고, 예시도 실용적이라 이해가 훨씬 빠릅니다. ‘이 분 나중에 유명해지면 어쩌지’ 싶어서 바로 결제했어요. 초보자 분들, 특히 집중 안 되는 분들한테 강력 추천합니다. 자바스크립트 강의도 꼭 나왔으면 좋겠어요. 바로 수강할 의향 100%입니다.

수강 후 이런걸 얻을 수 있어요

HTML + CSS 핵심 이론
아무리 복잡한 레이아웃도 설계할 수 있어요.
나만의 포트폴리오 만들기
GIT을 통한 프로젝트 배포

클론 코딩 = 받아쓰기? NO!
직접 코딩하며 완성하는 HTML, CSS의 기반 🏃

카페 24 베스트 쇼핑몰
받아쓰기가 아니라, 내가 직접 만들어요🔥

이론에 대한 내용을 주르륵 읽으면서 공부하는 방법보다 무언가를 직접 만들면서 배운 내용을 써먹을 때가 가장 빠르게 코딩을 배우는 방법이라고 생각합니다. 카페 24 베스트 쇼핑몰 디자인을 클론코딩하기 위한 핵심적인 html, css 이론을 배우고, 배운 내용을 바탕으로 클론코딩을 진행하게 되며 최종적으로 나만의 쇼핑몰을 만들게 됩니다.

결국엔 받아쓰기할 것 같다고요?
왜 이렇게 작성해야 하는지 차근차근 보여드립니다.

클론코딩의 폐허는 "결국엔 받아쓰기"가 되는 경우라고 생각하는데요.
그렇게 되지 않도록 왜 이렇게 코드를 적어야 하는지 한 땀 한 땀 레이아웃을 그리면서 수업을 진행합니다. 강의를 다 듣고 나면 다른 복잡한 레이아웃을 가지는 웹사이트를 혼자서 만들 때도 겁먹지 않고 쉽게 프로젝트에 적용할 수 있으실 거라 생각합니다 :)

강의를 들은 후 여러분은 💡

방대한 양의 HTML, CSS가 더 이상 무섭지 않게 됩니다.
복잡한 레이아웃을 가지는 웹사이트도 스스로 만들 수 있습니다.
추후 Javascript를 학습할 때 HTML 요소를 자유롭게 다룰 수 있습니다.

같이코딩만의 강의 특징 ⭐

클론코딩을 통해
배워요

배웠던 이론들을 클론코딩으로 직접 프로젝트를 만들면서 정확하고 빠르게 코딩을 배울 수 있어요.

그냥 넘어가지
않아요

이 강의는 개발 입문자 혹은 비전공자를 위해 만들었어요. 알 거라고 생각하고 그냥 넘어가는 부분 없이 꼼꼼히 짚어드려요.

챕터별 학습 내용 📚

챕터 1. HTML의 태그와 다양한 속성에 대한 이론

html 동작 원리
태그와 속성
시멘틱 태그
많은 양의 태그 공부법

챕터 2. 클론코딩을 위한 CSS 이론

css 적용법 및 문법
margin과 padding
box 구조
flex box
transition과 transform
animation

챕터 3. 본격적인 클론코딩 시간 🔥

주어진 사진에서 레이아웃 짜기
레이아웃 구현을 위한 css 작성방법
효율적인 css 파일 관리 방법 및 css 방법론
재사용 가능한 css 코드를 작성해보고 5분만에 하위페이지를 완성하기

챕터 4. 내가 만든 웹페이지 git을 통해 배포해 보기

html 동작원리
태그와 속성
시멘틱 태그
많은 양의 태그 공부법

자주 묻는 질문 ✅

Q. 코딩을 처음 배우는 사람들도 들을 수 있나요?

이 강의는 웹 개발자 입문자 혹은 비전공자를 대상으로 제작되었습니다 :) 누구나 쉽게 따라올 수 있도록 알꺼라고 생각하고 넘어가는 부분 없이 step by step으로 강의가 진행됩니다.

Q. 클론코딩은 어떤식으로 진행되나요?

템플릿이 주어진 상태에서 시작하는 것이 아닌 백지상태에서 코드를 적게 됩니다. 완성해야 할 레이아웃 사진을 보고 차근차근 사진과 같은 레이아웃을 만드는 방식으로 수업을 진행하게 됩니다 :)

Q. 선수학습이 필요한가요?

선수학습 지식은 필요하지 않습니다. 강의 챕터 1, 2에서 클론코딩을 하는데 있어 필요한 html, css의 기본 이론을 다루고, 클론코딩을 진행하면서 추가로 필요한 이론 부분은 해당 파트에서 자세히 다루니 걱정하지 않으셔도 됩니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

코딩을 처음하는 사람
웹 개발자 혹은 풀스택 개발자를 희망하는 사람

선수 지식,
필요할까요?

코딩을 배우고 싶은 마음

안녕하세요
같이코딩입니다.

167

명

수강생

개

수강평

개

답변

5.0

점

강의 평점

개

강의

웹개발자로 이것저것 프로젝트를 만드는 것을 좋아하는사람이에요

직접 부딫혀가며 쌓아온 웹개발 지식을 공유 해드리고 있습니다 :)

youtube : https://www.youtube.com/channel/UCZBb3nGVrWCydwmY-CAvcOg

커리큘럼

전체

47개 ∙ (6시간 17분)

해당 강의에서 제공:

수업자료

섹션 1. 강의 준비

4개 ∙ (10분)

1. 강의 소개
01:55
2. 일단 준비해야 하는 것
02:43
3. HTML, CSS가 뭔가요?
04:00
4. Javascript란?
02:01

섹션 2. HTML - 이론 Part

9개 ∙ (58분)

5. 우리의 첫 HTML
05:24
6. HTML 태그에 대해 (1)
04:49
7. HTML 태그에 대해 (2)
06:22
8. 태그는 속성을 가집니다
06:08
9. HTML의 구조 알아보기
06:27
10. 이렇게 많은 태그 다 외워야 하나요?
05:51
11. Semantic tag
05:46
12. form tag (1)
09:47
13. form tag (2)
07:28

섹션 3. CSS - 이론 Part

15개 ∙ (1시간 46분)

14. HTML에 CSS적용하기
03:43
15. CSS의 기초 문법
05:54
16. box에 대해
07:43
17. border 이해하기
04:02
18. margin으로 간격 조정하기
07:25
19. padding에 대해
02:35
20. id와 class
06:05
21. css의 state에 대해 알아봅시다
07:51
22. flex box
14:33
23. position을 통해 요소 움직이기
08:56
24. 다양한 css의 선택자
13:16
25. 가상 클래스(pseudo-class)
05:36
26. transition을 통해 예쁘게 변화주기
04:36
27. transform에 대해
08:02
28. 요소에 animation 효과주기
05:49

섹션 4. 쇼핑몰 클론코딩을 해봅시다

16개 ∙ (3시간 10분)

섹션 5. 배포해봅시다

3개 ∙ (11분)

강의 게시일: 2023. 11. 28.

마지막 업데이트일: 2025. 08. 12.

수강평

전체

13개

5.0

13개의 수강평

gusckdska123@naver
수강평 1
∙
평균 평점 5.0
2024. 11. 24.
5
81% 수강 후 작성
설명을 완전 쉽게 해주셔서 진도를 따라가기 너무 좋습니다
freehy1356
수강평 1
∙
평균 평점 5.0
2025. 10. 08.
5
32% 수강 후 작성
이해 잘가게 차근히 설명해줌
jaekon seo
수강평 4
∙
평균 평점 5.0
2025. 08. 04.
5
100% 수강 후 작성
프로젝트 진행때 도움이 되는 많은 팁들과 유용한 사이트에 대한 정보 무엇보다 github에 대한 지식은 정말 많이 도움이 될듯 합니다. 감사합니다.
빠른 까치
수강평 1
∙
평균 평점 5.0
2025. 08. 07.
5
30% 수강 후 작성
지금까지 여러 온라인 코딩 강의를 들어봤지만, 이렇게 딕션이 또렷하고 설명이 깔끔한 강의는 처음이었습니다. 처음에는 유명하지 않아서 반신반의했는데, 오히려 강사님의 실력이 정말 탄탄하다는 걸 느꼈습니다. 개념 설명도 군더더기 없이 정리돼 있고, 예시도 실용적이라 이해가 훨씬 빠릅니다. ‘이 분 나중에 유명해지면 어쩌지’ 싶어서 바로 결제했어요. 초보자 분들, 특히 집중 안 되는 분들한테 강력 추천합니다. 자바스크립트 강의도 꼭 나왔으면 좋겠어요. 바로 수강할 의향 100%입니다.
companyable
수강평 2
∙
평균 평점 5.0
2025. 10. 14.
5
32% 수강 후 작성
초짜도 이해하기 쉽게 잘 설명 해 주십니다.

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

핵심만 골라배우는 CSS3

수코딩

프론트엔드 입문자들은 필수적으로 익혀야하는 CSS3!! 기초부터 시작해서 고급에 이르기까지 CSS3를 샅샅히 파헤쳐봅니다!

입문

HTML/CSS

핵심만 골라배우는 CSS3

수코딩

모던 웹 인터렉티브 CSS3 [PART3/3]

영코디 킴쌤

초등학생 코딩교육부터 시작하여 IT소프트웨어학과의 고등학생, 컴공과 대학생, 비전공자인 취준생을 대상으로 15년 넘게 코딩교육에 전념해온 현직 스타강사 영코디 킴쌤의 쉽고 재미있는 코딩강의를 이제 오프라인 뿐만 아니라 온라인에서도 만나실 수 있습니다. 500여명이 넘는 프론트엔드, 백엔드, 풀스택, 웹 개발자를 배출해온 영코디 킴쌤과 함께라면 당신의 개발자 꿈도 곧 현실이 됩니다!

입문

HTML/CSS, 웹 디자인, css3

모던 웹 인터렉티브 CSS3 [PART3/3]

영코디 킴쌤

웹디자인기능사 실기 문제풀이 A-1

Dongho Lee

웹 디자인 기능사 실기시험을 충실하게 준비합니다. 다양한 방법으로 문제를 해결합니다.

초급

HTML/CSS, 웹 디자인

웹디자인기능사 실기 문제풀이 A-1

Dongho Lee

퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)

코딩웍스(Coding Works)

코딩웍스가 다년간의 강의 노하우를 집대성한 자체제작 HTML+CSS+FLEX+JQUERY 퍼블리싱 핵심 이론서 교재. 불필요한 내용없이 딱! 필요한 핵심 내용만 정리된 최고의 퍼블리싱 이론교재. 퍼블리싱 입문을 위한 핵심 이론서 PDF 교재와 예제파일 다운로드 컨텐츠입니다.

입문

HTML/CSS, jQuery, Flex

퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)

코딩웍스(Coding Works)

모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]

영코디 킴쌤

입문

HTML/CSS, 웹 디자인, 클론코딩

모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]

영코디 킴쌤

모던 웹 인터렉티브 CSS3 [PART1/3]

영코디 킴쌤

입문

HTML/CSS, css3, 웹 디자인

모던 웹 인터렉티브 CSS3 [PART1/3]

영코디 킴쌤

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

webstoryboy

웹디자인기능사 출제기준 2023년 버전에 맞추어 누구나 합격할 수 있도록 제작하였습니다. 5가지 유형을 배우고 빠르게 합격합시다!

초급

HTML/CSS, jQuery, JavaScript

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

webstoryboy

퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)

코딩웍스(Coding Works)

취업을 위해 면접을 자주 봐야 합니다. 면접을 자주 보기 위해서는 괜찮은 퍼블리셔 개인 포트폴리오 홈페이지가 반드시 있어야 합니다. 코딩웍스가 심혈을 기울여 만든 괜찮은 개인 포트폴리오 홈페이지 제작 가이드 교재(PDF)입니다. 해당 교재는 인터넷에서 구글링 해서 구할 수 있는 내용이 아닙니다. 코딩웍스가 수년간 현장에서 300여 명의 학생에게 퍼블리싱 이론, 실전, 개인 포트폴리오 홈페이지 제작 강의하고 학생들이 빨리 원하는 회사에 취업할 수 있도록 개인 포트폴리오 홈페이지 제작 방법을 상세하게 담은 세상에 하나뿐인 퍼블리셔 취업 개인 포트폴리오 홈페이지 제작 가이드(PDF) 입니다.

초급

포트폴리오, 웹 디자인, HTML/CSS

퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)

코딩웍스(Coding Works)

프론트엔드 입문: HTML, CSS 가장 쉽게 이해하기

3년차 프론트엔드 개발자가 가장 쉽게 알려주는 HTML, CSS 기초 강의입니다.

입문

HTML/CSS, html5, css

프론트엔드 입문: HTML, CSS 가장 쉽게 이해하기

입문자를 위한, HTML&CSS 웹 개발 입문

짐코딩

HTML과 CSS를 배워서 웹사이트 제작에 필요한 기본 지식을 배울 수 있습니다. 코딩을 처음 접할 때 두려움이 없도록 정말 알기 쉽게 설명한 강의입니다.

입문

HTML/CSS

입문자를 위한, HTML&CSS 웹 개발 입문

짐코딩

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

코딩웍스(Coding Works)

웹디자인개발기능사(구 웹디자인기능사) 출제기준(2025.1.1 ~ 2027.12.31)까지 시행되는 출제기준에 정확히 맞춘 웹디자인 기능사 실기 시험 내용에 최적화 되어 있는 실기시험 전문 강의로서, HTML+CSS+JQUERY 퍼블리싱, 코딩웍스 웹디자인개발기능사 실기시험 강의는 다릅니다. 2026년 웹디자인개발기능사 모든 시험 유형(A,B,C,D,E,F 유형) 완벽 제작 수업영상이 모두 반영되어 있습니다.

입문

HTML/CSS, jQuery, 웹 디자인

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

코딩웍스(Coding Works)

Canva로 쉽게! 프로 수준의 웹사이트 & LP 제작 가이드 강좌: LP 템플릿 4종 & 독자 도메인 설정 매뉴얼 포함

UMINO

초보자도 무료로 세련되고 전문적인 웹사이트나 랜딩 페이지를 제작하고 싶은 분들을 위해. Canva를 사용해서 빠르게 매력적인 웹사이트를 만드는 방법을 배워보세요. 창업·부업 비즈니스용 LP나 프로필 페이지에도

입문

웹 디자인, website, canva

Canva로 쉽게! 프로 수준의 웹사이트 & LP 제작 가이드 강좌: LP 템플릿 4종 & 독자 도메인 설정 매뉴얼 포함

UMINO

퍼블리셔 취업 진짜 실전 가이드(PDF)

코딩웍스(Coding Works)

퍼블리셔 취업을 위한 진짜 가이드 전자책(PDF)으로 효율적인 퍼블리싱 학습방법, 좋은 퍼블리싱 강의 잘 가르치는 퍼블리싱 강사 고르는 안목, 신입이지만 경력자처럼 퍼블리싱하는 요령, 바람직한 코딩 습관과 원칙, 개인 포트폴리오 홈페이지 제작 방법, 디자이너 개발자와의 협업 요령, 퍼블리셔로 알아야 할 필수 사이트, 포토샵 UI 디자인 실력키우기 등 퍼블리셔 취업을 위해 반드시 알아야 하는 HTML+CSS+JQUERY 퍼블리싱 기본기를 상세하게 알려드립니다. 또한, 국비지원 퍼블리셔 과정에 대해 상세히 설명합니다.

입문

HTML/CSS

퍼블리셔 취업 진짜 실전 가이드(PDF)

코딩웍스(Coding Works)