BEST

실전! 웹사이트제작! Step By Step! _Basic (한화캐미컬_반응형웹)

Name: 실전! 웹사이트제작! Step By Step! _Basic (한화캐미컬_반응형웹)
Price: 22000 KRW
Rating: 4.8 (22 reviews)

HTML5와 CSS3를 활용하여 웹사이트(한화캐미컬/솔루션)를 제작 실습과정으로, PC 모드 레이아웃과 반응형 페이지 제작을 완벽히 이해하고, 활용할 수 있는 실전! 웹페이지 제작 ! Step by Step!의 Basic Course 강좌입니다. (강의 완성 파일 첨부!)

(4.8) 수강평 22개

수강생 291명

난이도 초급

수강기한 무제한

J.영

LG전자

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

LG전자

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

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

4.8

5.0

김혜경

100% 수강 후 작성

Adobe에서 Bracket이 처음 나왔을때 환호성을 지르던 1인이었어요^^ 편집기가 다양하지만 강사님께서 Bracket으로 강의해주셔서 인상적이었습니다. 반응형 페이지 제작을 하면서 기본적인 부분을 꼼꼼하게 알려주셔서 감사하고 태그 이해부터 개발자 도구 활용법까지 정말 유익한 강좌 잘 들었어요. 주변 지인들에게 강력 추천하고 싶은 강좌들 앞으로도 많이 개설해주세요. 더위에 지치지마시고 건강 조심하세요^^

5.0

ws k

100% 수강 후 작성

정말 만족스러운 강의였습니다. 강의에서 사용하는 html 태그나 css 속성은 거의 다 알고 있는 것들인데 코드를 치고, 저장하고, F5를 누를 때마다 화면이 바뀌는 것이 놀랍고도 신기했습니다. 다음 강의도 기대되고, 좋은 강의 올려주셔서 감사합니다.

5.0

조동찬

100% 수강 후 작성

현재 개인사업을 하고 있는 40대 초반의 가장입니다. 다가오는 4차 산업 혁명 시대에 대비하기 위해 IT관련 기술의 핵심인 코딩에 관심이 생겨 기초부터 익히고 회사 홈페이지도 직접 제작할 생각에 검색하다가 강사님의 강의를 수강하게 되었습니다. HTML과 CSS 기초만 알고 있는 상태였는데 강사님의 강의를 들으며 실제 웹페이지를 제작해보니 이해가 너무 잘 되고 실제 활용법도 많이 배웠습니다. 이 강의를 계기로 웹페이지 제작에 대한 자신감을 얻은 아주 유용한 강의였습니다. 강사님의 대방 산업 강의도 곧 수강 예정입니다. 강사님의 강의에서 배운 것들을 기반으로 멋진 회사 홈페이지도 만들고 관련 자바스크립트 언어도 계속 학습하여 프런트엔트 개발까지 해 볼 생각입니다. 감사합니다.

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

웹접근성을 HTML 5 MarkUp - 문서구조 정의
여러가지 다양한 CSS3의 속성을 이해하여 Layout Design 적용
Block과 Inline속성에 대한 이해와 적용
position에 대한 이해와 적용
Animation 제작에 대한 이해와 적용
가상선택자 이해와 적용( :before, :after)
Skip_nav 제작
여러가지 다양한 hover, focus효과
z-index 에 대한 이해와 적용
FontAwesome 사용법과 적용
구글폰트 사용법과 적용
개발자 도구 활용법
반응형 웹페이지 제작방법과 적용

HTML과 CSS만 알아도
웹페이지 제작 OK!

UI.UX 디자이너 혹은 프론트 엔드 개발자로 취업을 희망하시는 분들이라면, 요즘 트렌드에 맞는 웹페이지를 구현한 포트폴리오가 최소 5~6개는 필수입니다.

본 강의는 웹사이트 제작 시리즈 강의인 "실전! 웹사이트 제작 Step By Step"의 Basic Curse로, 한화솔루션/케미컬 사이트의 메인 페이지를 그대로 제작해 보는 강의입니다.

"실전! 웹사이트 제작 Step By Step" 강의시리즈는 현재 상용화되어 있는 웹사이트들 중, 최신 트렌드에 맞고 심미적인 요소가 뛰어나며, 포트폴리오 제작으로 적합한 웹사이트를 선택해서 그대로 제작해 보는 강의들로 구성되어 있으니 학습에 참고하시길 바랍니다.

>> CSS Animation 제작

>> 마우스 hover시 scale이 커지는 - CSS Animation 제작

>> 가상컨텐츠를 이용하여 마우스 hover시 슬라이드 되는 Animation 제작

>> PC모드 레이아웃부터 테블릿(1024px, 768px), 모바일해상도 (414px, 320px)제작

>> PC모드 레이아웃부터 테블릿(1024px, 768px), 모바일해상도 (320px) 스크롤화면

강의는 HTML과 CSS에 대한 기초는 있으나, 레이아웃에 대한 감이 전혀 없으신 분들을 대상으로 실제 웹페이지를 그대로 구현하며 진행됩니다. 한화솔루션/케미컬 사이트의 메인페이지를 직접 제작해보는 과정을 통해서, HTML5와 CSS3를 활용하여 레이아웃 제작에 대한 이해를 높이고, 어떠한 레이아웃을 제작하더라도 자신감 있게 응용하고 제작할 수 있도록 여러분을 도와드리겠습니다.
반응형 페이지 제작에 대해 완벽한 이해와 제작 역량 강화는 물론, 훌륭한 퀄리티의 포트폴리오 또한 가져가실 수 있도록 차근 차근 함께 학습해봅시다.

Step By Step!
지금 바로 시작하세요.

실무에서 꼭 필요한 인터렉티브 요소들로 구성된 웹페이지 강의를 들으며 포트폴리오도 함께 준비하신다면, 강의가 끝날 무렵엔 고퀄리티의 포트폴리오를 완성해서 취업 성공에 더욱 가까워질 수 있을 것입니다.

강의가 끝나고 나면
얻는 것 :D

1. 탄탄한 레이아웃 제작 실력

웹페이지 제작을 위해서는, HTML과 CSS를 기반으로 한, 정확한 레이아웃 작성이 가장 중요합니다. HTML과 CSS에 대한 기초는 있으나, Layout Design에 대해 전혀 감이 오지 않으신 분들도 기초부터 꼼꼼하게 알려드리는 본 강의를 성실하게 따라오시면, 어느새 레이아웃 제작의 탄탄한 기본기가 다져져 있는 것을 느끼실 수 있을 거예요!

2. 업무 생산성 UP!

업무 생산성을 높이려면 라이브러리와 플러그인을 이용해서, 단시간에 인터렉티브한 웹사이트를 구현할 수 있어야 합니다. 본 강의에서는 웹페이지 레이아웃 제작부터 반응형 페이지 제작까지 확실히 공부할 수 있으며, 실무에서 필요로 하는 스크립트, 플러그인, 애니메이션 등을 이용해서 웹페이지를 만듭니다. 강의를 들으며 꾸준히 실습하다 보면, 어느새 업무 역량이 UP! UP!

3. 고퀄리티 포트폴리오

업무 역량을 드러내고 새로운 기회를 잡기 위한 효과적인 준비물 중 하나는 바로 고퀄리티의 포트폴리오입니다. 강의를 들으며 실습하다보면 나만의 포트폴리오가 쌓일거예요. 본 강의 뿐만 아니라, 이후 이어지는 웹사이트 제작 실습 강의를 들으며 꾸준히 웹페이지를 구현하다 보면, 취업에서 나의 가장 큰 무기가 되어 줄 포트폴리오를 완성할 수 있을 것입니다.

4.오픈채팅방 운영

보다 원활한 학습을 위해, J.young이 운영하는 잘난웹디 오픈채팅방에 가입하시면,
피그마, UI.UX, 코딩, 포트폴리오제작 관련 핵꿀팁과 무료웨비나 링크 등을 공유해드립니다.

- 오픈채팅방명 : 잘난웹디
- 코드 : jyoung

시선을 사로잡는 웹사이트 제작을 위한
커리큘럼 알아보기

1.웹접근성을 html MarkUp-문서구조 정의
2.여러가지 다양한 CSS3의 속성을 이해하여 Layout Design 적용
3.position에 대한 이해와 적용
4.Block과 Inline속성에 대한 이해와 적용
5.Animation 이해와 적용
6.가상선택자 이해와 적용(:before, :after)
7.여러가지 다양한 hover, focus효과
8 .z-index 에 대한 이해와 적용
9.skip_nav제작
10.FontAwesome 사용법과 적용
11.구글폰트 사용하기
12.개발자 도구 활용법

이 강의만의 특별한 점! 궁금해요!

Q1. 취업에 도움이 될까요?
A1. 장문의 글보다는 하나의 이미지가 더 강렬하게 와 닿지요. 강의를 들으며 웹페이지를 제작해둔다면, 인사 담당자의 눈에 확 드는 화려한 포트폴리오를 만들 수 있어서 취업에 큰 도움이 될거예요.

여기서 다루는 툴

이 강의 이후, 디자인 풍과 스타일이 다른
9개의 웹사이트 제작 강의가 순차적으로 오픈됩니다.

포트폴리오를 준비하는 수강생 분들은 이를 참고하여
고퀄리티의 웹페이지 제작을 함께 해주시기 바랍니다.

html, css, html/css, website, 웹사이트, 코딩 ,coding ,jquery, 제이쿼리, 레이아웃, 인터렉티브웹, interactive web, web design, 웹디자인, 포트폴리오, 퍼블리싱

이런 분들께
추천드려요

학습 대상은
누구일까요?

HTML/CSS기초는 있으나 웹페이지 제작이 두려우신 분
그래픽 디자이너가 프론트앤드개발자로 전향하고 싶으신 분.
웹디자이너, 퍼블리셔로 취업을 위해 빠르게 포트폴리오를 제작하고 싶으신 분
웹디자이너, 퍼블리셔로 취업을 위해 다양한 레이아웃을 설계 구현하고 싶은 분들

선수 지식,
필요할까요?

HTML/CSS

안녕하세요
J.영입니다.

4,950

명

수강생

255

개

수강평

238

개

답변

4.9

점

강의 평점

개

강의

"UIUX웹기획 .디자인. 프론트엔드 부트캠프 강사 J. 영입니다.

저는 지난 20년간 웹 및 앱 개발 회사를 운영하며, 현장의 치열함을 몸소 겪어왔습니다. 그 경험을 바탕으로 현재는 대학과 전문 교육 기관에서 UI/UX 디자인부터 프론트엔드 개발까지, 후배 전문가들을 양성하는 데 매진하며, 현재까지 500명이상 실무 진출 시키고 있습니다.

저의 강의 철학은 명확합니다.

기초부터 실무까지 막힘없는 연결
현업이 원하는 핵심 기술의 압축
취업 성공을 부르는 실무형 포트폴리오 완성

어디서부터 시작할지 막막하신 분, 이직을 꿈꾸지만 시간이 부족한 직장인, 그리고 코딩이 남의 이야기처럼 느껴지는 초보자분들까지. 제가 걸어온 20년의 길을 여러분의 지름길로 만들어 드리겠습니다. 당당히 실무자로 서는 그날까지, 여러분의 든든한 사수가 되어 최선을 다해 돕겠습니다.

J.young이 도와드리겠습니다.!!
또한!! 학습하시다 궁금하신 점 있으시면 댓글 남겨주시면
도움이 드릴 수 있는 답을 드리도록 최선을 다하겠습니다.

실무경력

- 2017~현) UIUX & 웹 Director
- 2015년~2017년(주)엘리에셀 총괄 이사
- 2003년~2015년 (주)어뮤징웨어 총괄 이사
- 2003년: 서우씨앤디 디자인실장

- 현)
- UIUX웹기획/ 디자인/프론트엔드 부트캠프 강사 (이젠DX아카데미 -강남점)
- 디자인.개발 포트폴리오 전문 강의 및 팀그룹강의

* 운영중인 유튜브 (코딩하는 디자이너)

https://www.youtube.com/channel/UCISuuIbv_SnkE6d4oDgrBWQ
오픈채팅방 운영

보다 원활한 학습을 위해, J.young이 운영하는 잘난웹디 오픈채팅방에 가입하시면,
강의 질문과 포트폴리오 관련 피드백 드립니다.

- 오픈채팅방명 : 잘난웹디
- 코드 : jyoung

커리큘럼

전체

26개 ∙ (4시간 0분)

해당 강의에서 제공:

수업자료

섹션 1. 한화솔루션/캐미컬_header 영역 제작하기

3개 ∙ (38분)

1. header 영역_ HTML MakeUP
13:44
2. header영역_CSS Layout Design.1
13:23
3. header영역_CSS Layout Design.2
11:46

섹션 2. 한화솔루션/캐미컬_Section.Main 영역 제작하기

3개 ∙ (19분)

4. section.main 영역_HTML MakeUp과 CSS Design.1
10:02
5. section.main 영역_ CSS Layout Design.1
07:01
6. section.main 영역_mainTitle Animatiion 적용
02:06

섹션 3. 한화솔루션/캐미컬_ABOUT Hanwha Solutions 영역 제작하기

3개 ∙ (21분)

7. section.about 영역_HTML MakeUp
03:45
8. section.about영역_CSS Layout Design.1
12:06
9. Section.about영역_CSS Layout Design.2
06:06

섹션 4. 한화솔루션/캐미컬_OUR PRODUCT INNOVATIONS 영역 제작하기

2개 ∙ (18분)

섹션 5. 한화솔루션/캐미컬_CHALLENGE ME 영역 제작하기

3개 ∙ (24분)

섹션 6. 한화솔루션/캐미컬_SNS CHANNEL 영역 제작하기

3개 ∙ (24분)

섹션 7. 한화솔루션/캐미컬_footer 영역 제작하기

1개 ∙ (13분)

섹션 8. 한화솔루션/캐미컬_반응형웹 (max-width: 1599px) Layout Design

2개 ∙ (16분)

섹션 9. 한화솔루션/캐미컬_반응형웹 (max-width: 1024px) Layout Design

2개 ∙ (15분)

섹션 10. 한화솔루션/캐미컬_반응형웹 (max-width: 768px) Layout Design

1개 ∙ (19분)

섹션 11. 한화솔루션/캐미컬_반응형웹 (max-width: 414px) Layout Design

1개 ∙ (16분)

섹션 12. 한화솔루션/캐미컬_반응형웹 (max-width: 320px) Layout Design

1개 ∙ (10분)

섹션 13. 브라켓 설치강좌

1개 ∙ (2분)

강의 게시일: 2020. 03. 21.

마지막 업데이트일: 2025. 05. 19.

수강평

전체

22개

4.8

22개의 수강평

code0314
수강평 2
∙
평균 평점 5.0
2025. 10. 19.
5
31% 수강 후 작성
몰입해서 하다보면 금방금방 시간이 지나가는... 지루할 틈이 없네요^^ 실전 투입하기 전에 clone코딩 식으로 학습하는거 강추합니다.
ws k
수강평 6
∙
평균 평점 4.3
2020. 04. 10.
5
100% 수강 후 작성
정말 만족스러운 강의였습니다. 강의에서 사용하는 html 태그나 css 속성은 거의 다 알고 있는 것들인데 코드를 치고, 저장하고, F5를 누를 때마다 화면이 바뀌는 것이 놀랍고도 신기했습니다. 다음 강의도 기대되고, 좋은 강의 올려주셔서 감사합니다.
- J.영
  지식공유자
  2020. 04. 11.
  WS K님 열공해 주신점과 좋은 수강평 정말 감사드립니다. 더 열심히 촬영해야겠다는 의지가 생깁니다^^ 앞으로 더 좋은 강좌로 ...늘 함께하겠습니다 진심으로 감사드립니다. 오늘도 좋은 하루 되세요^^
- J.영
  지식공유자
  2020. 07. 03.
  안녕하세요 ~~ ws k 님 수강평이벤트 공지 올렸습니다 ~~^^ 확인해주세요
cnqjatlr2175
수강평 3
∙
평균 평점 5.0
2024. 10. 30.
5
65% 수강 후 작성
html, css 배우긴 했는데 헷갈리는게 많았는데 웹제작하면서 어디에 어떻게 사용하는지 잘알려주셔서 쉽게 복습할 수 있었습니다!
- J.영
  지식공유자
  2024. 11. 01.
  cnqjatlr2175님 높은 수강평 감사드립니다. 이후 제가 이번에 올린 html/css 기초탄탄 초스피드 완강코스 강의(무료강의)도 들어보신다면 실무활용에 많은 도움이 되리라 생각됩니다. 기초강의이지만 실무적용에 도움이 되실겁니다 감사합니다^^ J.young드림
김혜경
수강평 4
∙
평균 평점 4.8
2020. 06. 29.
5
100% 수강 후 작성
Adobe에서 Bracket이 처음 나왔을때 환호성을 지르던 1인이었어요^^ 편집기가 다양하지만 강사님께서 Bracket으로 강의해주셔서 인상적이었습니다. 반응형 페이지 제작을 하면서 기본적인 부분을 꼼꼼하게 알려주셔서 감사하고 태그 이해부터 개발자 도구 활용법까지 정말 유익한 강좌 잘 들었어요. 주변 지인들에게 강력 추천하고 싶은 강좌들 앞으로도 많이 개설해주세요. 더위에 지치지마시고 건강 조심하세요^^
- J.영
  지식공유자
  2020. 06. 29.
  kate님 감사합니다. 제 강좌 아껴주시고 열심히 들어주신 점 잘 알고 있습니다. 진심으로 감사드립니다. 제가 더욱 더 좋은 강의로 실력과 스킬을 업그레이드 시켜드릴 수 있도록 최선의 자세로 준비하도록 하겠습니다. 다음 강좌는 7월중에 오픈 예정입니다. 이사가 있는 관계로 출시가 늦어져 죄송합니다. 다시 한번 감사드립니다^^
조동찬
수강평 3
∙
평균 평점 5.0
2020. 11. 09.
5
100% 수강 후 작성
현재 개인사업을 하고 있는 40대 초반의 가장입니다. 다가오는 4차 산업 혁명 시대에 대비하기 위해 IT관련 기술의 핵심인 코딩에 관심이 생겨 기초부터 익히고 회사 홈페이지도 직접 제작할 생각에 검색하다가 강사님의 강의를 수강하게 되었습니다. HTML과 CSS 기초만 알고 있는 상태였는데 강사님의 강의를 들으며 실제 웹페이지를 제작해보니 이해가 너무 잘 되고 실제 활용법도 많이 배웠습니다. 이 강의를 계기로 웹페이지 제작에 대한 자신감을 얻은 아주 유용한 강의였습니다. 강사님의 대방 산업 강의도 곧 수강 예정입니다. 강사님의 강의에서 배운 것들을 기반으로 멋진 회사 홈페이지도 만들고 관련 자바스크립트 언어도 계속 학습하여 프런트엔트 개발까지 해 볼 생각입니다. 감사합니다.
- J.영
  지식공유자
  2020. 11. 09.
  조동찬님 수강평 감사드립니다^^ 지금부터라도 얼마든지 프론트엔드까지 공부하실 수 있으시죠~~ 회사 홈페이지도 아셔야 관리를 하실 수 있는만큼 배움의 길!!응원드립니다!!! 이어서 대방산업도 수강해주시는 점 감사드리고.. 대방산업 레이아웃과 화려한 인터렉티브 요소를 추가하시는데 많은 도움이 되실겁니다. 감사합니다^^ J.young드림

J.영님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

Figma MCP × AI로 4시간만에 완성하는 반응형 웹포트폴리오

J.영

Figma디자인 + AI활용코딩 + 배포까지 풀스택 코스!! [피그마 + 바이브코딩 (HTML/CSS/Tailwind/React) + Git + vercel 배포] 내 디자인 그대로!! 1픽셀도 오차없이 바이브코딩으로 완성! AI활용으로 실무 생산성을 5배 높이는 풀스택 공략집! 디자인도 코딩도 모두 가능한 풀스택 디자이너, 당신도 될 수 있습니다. ✅ 내 디자인의 의도까지 한 픽셀의 오차 없이 구현 ✅ AI가 이해하는 디자인 설계 ✅ AI를 정확하게 통제하는 프롬프트 제작능력 ✅ AI가 맘대로 작성한 코드 척척 수정능력 디자인부터 코딩 배포까지 1/5로 단축되는 놀라운 경험을 느립니다.

초급

HTML/CSS, Figma, 포트폴리오

Figma MCP × AI로 4시간만에 완성하는 반응형 웹포트폴리오

J.영

html/css 기초탄탄 초스피드 완강코스

J.영

html/css초보 입문자를 대상으로 기초를 탄탄하게 다지며, 물론 반응형 레이아웃 제작 실전을 배울 수 있습니다.

입문

HTML/CSS, Flex, css3

html/css 기초탄탄 초스피드 완강코스

J.영

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

J.영

"2026년도 UIUX디자이너 |코딩하는 디자이너 에이전시 합격 포트폴리오 공개" 면접관의 눈길을 사로잡는 UIUX 웹 포트폴리오를 제작하는 실전 강의입니다. 단순한 포트폴리오 제작이 아닌, 인터랙션을 활용해 차별화된 결과물로 UIUX 디자이너로 취업 경쟁력을 높일 수 있도록 설계된 커리큘럼입니다.

초급

HTML/CSS, JavaScript, 웹앱

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

J.영

실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)

J.영

실전! 웹사이트제작 Step By Step! 크루알라모드(https://crewalamode.com/) 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고 있는 화려한 인터렉티브 웹을 그대로 제작, 구현해 보는 과정으로 복잡한 레이아웃도 쉽고 빠르게 제작하는 실무 핵심 노하우를 그대로 알려드립니다.

초급

반응형 웹, jQuery, HTML/CSS

실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)

J.영

실전! 웹사이트제작! Step by Step! ('라한호텔' 사이트제작_Application Course)

J.영

'호텔 현대라한_목포점' 사이트 제작으로, 실제 웹사이트 메인페이지를 그대로 제작·구현해보는 강의입니다. html/css기초 지식이 있는 분들을 대상으로 html Markup과 Layout제작에 대한 이해는 물론 Fixheader, Image Slider, MenuOpen Bar, Scroll Animation 제작까지의 웹에서 꼭 필요로한 skill을 배울 수 있는 웹페이지 제작 실전! 강의입니다.

초급

HTML/CSS, jQuery, 인터랙티브 웹

실전! 웹사이트제작! Step by Step! ('라한호텔' 사이트제작_Application Course)

J.영

실전! 웹사이트제작! Step by Step! ('돕다' 사이트제작_Application Course)

J.영

돕다 사이트 제작 Application Course로, 실제 웹사이트 메인페이지를 그대로 제작·구현해보는 강의입니다. 무료 강의로 오픈한 돕다 사이트 Basic Course의 Layout과 Animation 위주의 단순한 구조의 코딩에서 Fixed header, Image Slider, Mobile navigation, Scroll Animation, 반응형 등을 추가하며 코딩 하나하나를 수정보완하며 완성해가는 웹페이지 제작 실전! 강의입니다. (본강의는 돕다-Basic Course를 들으시고 수강하셔야 학습 효과가 크다고 볼 수 있습니다.)

초급

HTML/CSS, jQuery, 인터랙티브 웹

실전! 웹사이트제작! Step by Step! ('돕다' 사이트제작_Application Course)

J.영

실전! 웹사이트제작! Step by Step! ('돕다' 사이트제작_Basic Course)

J.영

[웹사이트제작 Step By Step] Basic-course로, 돕다(http://dopda.co.kr/) 메인페이지를 그대로 제작해 보는 과정입니다. 본 Basic Course는 CSS 레이아웃 제작과 애니메이션에 대해 다루며, 이어서 Application-course에서는 이미지슬라이드 효과, 반응형제작, 스크롤 애니메이션, Fix Header 등의 인터렉티브 요소를 추가하여 개설될 예정입니다.

초급

HTML/CSS, jQuery, 인터랙티브 웹

실전! 웹사이트제작! Step by Step! ('돕다' 사이트제작_Basic Course)

J.영

실전! 웹사이트제작! Step by Step! (한국소비자원 소비자시대- 레이아웃제작 기초)

J.영

[웹사이트제작 Step By Step] 초급 강좌로, 한국소비자시대 웹진(현재는 리뉴얼 됨) 메인페이지를 그대로 제작해 보는 과정입니다.

초급

HTML/CSS, jQuery, 인터랙티브 웹

실전! 웹사이트제작! Step by Step! (한국소비자원 소비자시대- 레이아웃제작 기초)

J.영

실전! 웹사이트제작! Step by Step! (뮤자인_반응형웹)

J.영

[웹사이트제작 Step By Step] 3단계 강의로, 뮤자인(https://musign.net) 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고 있는 화려한 인터렉티브 웹을 그대로 제작, 구현해 보는 과정으로 복잡한 레이아웃도 쉽고 빠르게 제작하는 실무 핵심 노하우를 그대로 알려드립니다^^

초급

HTML/CSS, jQuery, 인터랙티브 웹

실전! 웹사이트제작! Step by Step! (뮤자인_반응형웹)

J.영

실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)

J.영

[웹사이트제작 Step By Step] 3단계 강의로, 대방산업 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고있는 화려한 인터렉티브 웹을 그대로 제작 구현해 보는 과정으로 화려한 만큼, 난이도가 있는 강의입니다.

초급

HTML/CSS, 반응형 웹, jQuery

실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)

J.영

실전! 웹사이트제작! Step by Step! (와이스튜디오_반응형웹)

J.영

실전! 웹사이트 제작! Step By Step의 Applcation Course로 html/ CSS/ jQuery 와plug_in을 사용하여 와이스튜디오(http://www.ystudio.co.kr/) 의 메인페이지를 그대로 제작해 보는 과정입니다. (강의 완성 파일 첨부!)

초급

HTML/CSS, jQuery, 인터랙티브 웹

실전! 웹사이트제작! Step by Step! (와이스튜디오_반응형웹)

J.영

비슷한 강의

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

실전! 웹사이트제작! Step by Step! (와이스튜디오_반응형웹)

J.영

초급

HTML/CSS, jQuery, 인터랙티브 웹

실전! 웹사이트제작! Step by Step! (와이스튜디오_반응형웹)

J.영

실전! 웹사이트제작! Step by Step! (뮤자인_반응형웹)

J.영

초급

HTML/CSS, jQuery, 인터랙티브 웹

실전! 웹사이트제작! Step by Step! (뮤자인_반응형웹)

J.영

실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)

J.영

초급

반응형 웹, jQuery, HTML/CSS

실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)

J.영

시험 전에 꼭 봐야 할 웹디자인기능사 공개 문제 (2020) Part.2

유용한IT학습

웹디자인기능사 실기를 준비하기 위한 기초 내용을 공개 문제를 통해 학습하는 강의입니다. 실무에서 웹 코딩을 활용하고자 하는 웹디자이너에게도 유익한 강의에요.

초급

HTML/CSS, JavaScript

시험 전에 꼭 봐야 할 웹디자인기능사 공개 문제 (2020) Part.2

유용한IT학습

가볍게 실전 html (인터넷 업로드까지)

두노피

입문편에서 연습으로 만들어봤던 VD 사이트 메인페이지를 실전으로 만들어볼거에요~

초급

HTML/CSS, upload-file

가볍게 실전 html (인터넷 업로드까지)

두노피

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

webstoryboy

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

초급

HTML/CSS, jQuery, JavaScript

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

webstoryboy

(English) Build a First-person View 3D Website with Three.js

1분코딩

In this lesson, you'll create a first-person 3D website that works on both desktop and mobile.

초급

Three.js, 인터랙티브 웹, 3d

(English) Build a First-person View 3D Website with Three.js

1분코딩

웹 애니메이션의 새로운 표준, Web Animations API

1분코딩

라이브러리는 선택이지만, 웹 표준 기술은 필수입니다. 웹 애니메이션의 새로운 표준인 Web Animation API에 남들보다 빠르게 적응하고, 실무에도 바로 활용해보세요!

초급

Web Animations API, JavaScript, HTML/CSS

웹 애니메이션의 새로운 표준, Web Animations API

1분코딩

바~로 실습! 개념몰라도 됨, HTML 시작

두노피

개념을 외우는게 아니라 실습을 통해 개념도 배우는 수업입니다. 다른곳에서 코드를 보면 울렁거리거나 토할것같은 분들도 오세요. 누구나 할 수 있습니다.

입문

HTML/CSS, 웹 디자인

바~로 실습! 개념몰라도 됨, HTML 시작

두노피

[환상의족발] 디자인부터 코딩까지

두노피

맛있는 족발이에요~ 요즘 족발 장난 아니던데...꿀꺽

초급

Photoshop, HTML/CSS, 클론코딩

[환상의족발] 디자인부터 코딩까지

두노피

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

코딩웍스(Coding Works)

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

초급

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

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

코딩웍스(Coding Works)

[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)

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

코딩웍스(Coding Works)

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

입문

HTML/CSS

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

코딩웍스(Coding Works)

웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)

두노피

전국 합격률 60%중에 우리반 합격률은 90%! 시험요구사항을 파악하면 가능합니다. 실기 책 사지마요 어려워요

초급

HTML/CSS, jQuery

웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)

두노피

효과적인 모바일 UX 만들기 (디자인 + 코딩)

유용한IT학습

Photoshop과 Adobe XD 프로그램을 활용해 다양한 디바이스의 웹, 앱 레이아웃을 디자인해 본 뒤 간단한 코딩 기술을 학습해 직접 구현해볼 수 있게 됩니다.

초급

HTML/CSS, jQuery, XD

효과적인 모바일 UX 만들기 (디자인 + 코딩)

유용한IT학습

스프링 프레임워크는 내 손에 [스프2탄]

박매일

[스프2탄]에서는 게시판 기능 중 답변 달기, 페이징 처리, 검색 기능을 완벽하게 구현해보기 위한 Spring Legacy 프로젝트와 Spring boot와 Spring JPA 및 Security를 이용한 게시판 프로젝트를 직접 해봄으로써 융합 역량을 가지고 있는 백엔드(Java Backend) 개발 전문가를 만드는 과정입니다.