웹 개발

Do it! 프론트엔드 웹 디자인 입문

웹 디자인 분야 베스트셀러! Do it! 프런트엔드 웹 디자인 입문이 전면 개정판으로 돌아왔습니다. 꼭 알아야할 웹 디자인 6대 기술을 소개합니다!

(4.7) 수강평 41개

수강생 2,544명

웹 디자인

초급자를 위해 준비한
[웹 개발, 웹 퍼블리싱] 강의입니다.

Do it! 프런트엔드 웹 디자인 입문

프런트엔드 웹 디자인 입문. ‘웹 사이트 이 기능은 도대체 어떻게 만들지?’ 당신이 만들고 싶은 그 기능, 더 이상 인터넷 검색해서 짜깁기하지 말고 이 강의를 보자. 유명 웹 에이전시 열에 아홉은 사용한다는 반응형 웹, 패럴렉스 스크롤링, 풀 스크린 배경, 구글 웹 폰트, 플렉스 박스, 부트스트랩까지 당신이 꼭 알아야할 웹 디자인 기법만을 골라 담았다.

5년 연속 베스트셀러, <Do it! HTML5 + CSS3 웹 표준의 정석>의 고경희 저자가 국내외 최신 웹 사이트를 분석하고 웹 디자인의 이론과 실습에 가장 알맞은 예제를 엄선하여 강의를 구성했기 때문에 믿을 수 있다. 뭐부터 시작해야할지 모르는 입문자에게는 웹 디자인 개념을 확실하게 잡아주고, 실무자는 원하는 기능만 찾아 바로 써먹을 수 있는 이 강의로 지금 당장 웹 디자인을 시작하자!

학습 목표

최신 웹 디자인 트렌드를 학습합니다

반응형 웹 레이아웃을 직접 제작해봅니다

직접 자신만의 웹 사이트를 만들어봅니다

도움이 되는 분들

웹 디자인에 입문하고 싶으신 분들
반응형 웹 디자인, 머터리얼 디자인 등을 웹 개발에 응용하고 싶으신 분들
실습과 예제 바탕의 웹 디자인 강의가 필요하신 분들

강의 관련 추가 학습

교재를 구매하시면 훨씬 효율적인 학습이 가능합니다.

지식공유자 소개

고경희

드림위버 1.2 시절부터 웹에 관심을 갖기 시작하여 이후 HTML 과 DHTML(Dynamic HTML), CSS, 자바스크립트 등 웹 관련 기술들을 활용하는데 관심을 두고 웹 디자인 및 프로그래밍 분야에 걸쳐 여러 권의 웹 관련 서적을 집필했다. 국내 저자로는 처음으로 HTML5버전을 소개한 도서인《Do it! HTML5+CSS3》를 출간하였으며, HTML5와 CSS3의 모든 태그를 집대성하여 출간한 《Do it! HTML5+CSS3 웹 표준의 정석》은 웹 프로그래밍 분야의 베스트셀러로 자리 잡았다. 한국디지털대학교에서 웹 기초(HTML) 분야를 강의했고, 한국 전자정보통신산업진흥회에서 ‘HTML5와 CSS3의 모든 것’이라는 주제로 강의를 진행했다. 마이크로소프트 공인 최고기술전문가(Most Valuable Professional)와 마이크로소프트 HTML5정보를 제공하는 UserAgents에서 웹 전문가로 활동 중이다. 홍익대학교 컴퓨터공학과를 졸업하고 동 대학원에서 인공지능을 공부했다.

안녕하세요
이지스퍼블리싱입니다.

13,616

명

수강생

161

개

수강평

4.8

점

강의 평점

개

강의

사람을 구체적으로 도와주는 책을 만듭니다.

공동 지식공유자

커리큘럼

전체

16개 ∙ (3시간 16분)

섹션 1. 첫째마당) 최신 웹 디자인 트렌드 살펴보기

3개 ∙ (40분)

섹션 2. 둘째마당) 반응형 웹을 위한 레이아웃 제작하기

2개 ∙ (33분)

4. 웹 디자인 트렌드 - 1
15:33
5. 웹 디자인 트렌드 - 2
17:56

섹션 3. 셋째마당) 방문자의 눈길을 사로잡는 웹 요소 제작하기

9개 ∙ (1시간 33분)

6. 패럴랙스 스크롤링
11:07
7. 플렉스 박스 속성 설명
12:14
8. CSS 그리드 레이아웃
15:32
9. 풀 스크린 배경
07:40
10. 유튜브 동영상을 풀 스크린 배경으로 사용하기
09:50
11. 캐러셀
10:12
12. SVG
09:24
13. 웹폰트
08:41
14. 구글 확장프로그램
08:46

섹션 4. 넷째마당) 내가 직접 만드는 최신 웹 사이트

2개 ∙ (28분)

강의 게시일: 2019. 03. 29.

마지막 업데이트일: 2019. 04. 01.

수강평

전체

41개

4.7

41개의 수강평

csy9894
수강평 5
∙
평균 평점 5.0
2022. 11. 02.
5
100% 수강 후 작성
너무 좋은 강의 잘듣고 있습니다! 최고입니다!
누팍
수강평 50
∙
평균 평점 4.8
2023. 03. 06.
3
100% 수강 후 작성
잘봤습니다
jpsaviola
수강평 3
∙
평균 평점 5.0
2023. 03. 25.
5
100% 수강 후 작성
좋은 강의 감사합니다
Jake Sung
수강평 2
∙
평균 평점 5.0
2021. 10. 11.
5
100% 수강 후 작성
초반에는 좀 어려운 감이 있고, 제이쿼리 및 플러그인 사용이 많긴 하지만 전반적으로 중요한 개념을 잘 가르쳐주십니다! 별 5개!
아라레
수강평 203
∙
평균 평점 5.0
2022. 10. 22.
5
13% 수강 후 작성
강의 감사합니다

이지스퍼블리싱님의 다른 강의

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

Do it! HTML5 + CSS3 웹 표준의 정석 전면 개정 2판

이지스퍼블리싱

무료

입문 / HTML/CSS

4.9

(24)

800+

탄탄한 웹 기본기를 쌓고 싶은 분은 여기로 모이세요!

입문

HTML/CSS

Do it! Node.js 프로그래밍 입문

이지스퍼블리싱

무료

초급 / Node.js, JavaScript, Express, MongoDB

4.9

(25)

1,600+

Node.js+자바스크립트+익스프레스+몽고DB로 서버의 핵심을 향해 한눈팔지 않고 달린다!

초급

Node.js, JavaScript, Express

Do it! SQL 입문

이지스퍼블리싱

무료

입문 / SQL

4.5

(22)

2,000+

굵직한 글로벌 기업의 현직 데이터베이스 전문가가 20년 간의 기업 실무와 강의 경험을 아낌없이 담았다!

입문

SQL

Do it! 자바스크립트 입문

이지스퍼블리싱

무료

초급 / JavaScript, DOM

4.9

(8)

1,000+

프런트엔드, 백엔드에 모두 쓰는 자바스크립트 실무 문법 웹 도서 1위 저자와 함께 한 권으로 끝내자!

초급

JavaScript, DOM

Do it! HTML+CSS+자바스크립트 웹 표준의 정석

이지스퍼블리싱

무료

입문 / HTML/CSS, JavaScript, DOM

4.7

(27)

2,300+

키보드를 잡고 실습하다 보면 웹 개발의 3대 기술이 끝난다!

입문

HTML/CSS, JavaScript, DOM

Do it! 프로그레시브 웹앱 만들기

이지스퍼블리싱

무료

초급 / PWA, 웹앱, Vue.js, Vuetify

4.9

(11)

1,100+

글로벌 기업들의 차세대 모바일 전략, PWA(프로그레시브 웹 앱)를 배우자!

초급

PWA, 웹앱, Vue.js

된다! 사각사각 아이패드 드로잉 with 프로크리에이트

이지스퍼블리싱

무료

입문 / Procreate

5.0

(5)

800+

《된다! 사각사각 아이패드 드로잉 with 프로크리에이트》의 저자 선생님들과 함께 드로잉/캘리그라피/디자인을 시작해 보세요!

입문

Procreate

2018 Do it! 안드로이드 앱 프로그래밍

이지스퍼블리싱

무료

입문 / Java, Android

4.7

(39)

3,500+

안드로이드 분야 도서 1위 도서 저자 정재곤 박사가 직접 알려주는 안드로이드 강좌!! (2018 개정판)

입문

Java, Android

비슷한 강의

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

부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프

영코디 킴쌤

₩39,600

초급 / Bootstrap, 반응형 웹, 웹 디자인, HTML/CSS

5.0

(3)

Update

부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기[2024년 개정판] 수업의 실전 제작수업으로 디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹 실무 페이지를 부트스트랩4를 활용하여 직접 제작해 봅니다.

초급

Bootstrap, 반응형 웹, 웹 디자인

모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript

이지웹

₩55,000

초급 / Figma, HTML/CSS, JavaScript, 웹 디자인, 모바일 디자인

Update

웹 개발의 첫 걸음을 떼셨나요? HTML, CSS, javascript를 이제 막 시작하신 분들께 특별한 제안을 드립니다! 모바일 시대에 발맞춰 모바일 웹사이트를 만들고 싶지만, 어디서부터 시작해야 할지 망설여지시나요? 걱정하지 마세요. Figma 모바일 디자인을 직접 분석하고 구현하면서, 자연스럽게 반응형 웹 개발의 핵심을 배워보세요. 세련된 모바일 디자인을 토대로, 사용자의 마음을 사로잡는 섬세한 인터랙션부터 다양한 화면 크기에 완벽하게 적응하는 기술까지, 모든 것을 함께 알아가볼 수 있습니다. 이제 여러분의 웹사이트가 모든 기기에서 빛나도록, 노하우를 나눠드리겠습니다. 함께 시작해볼까요?

초급

Figma, HTML/CSS, JavaScript

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

webstoryboy

₩44,000

초급 / HTML/CSS, jQuery, JavaScript, 웹 디자인

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

초급

HTML/CSS, jQuery, JavaScript

쉽고! 짧고! 강하게! 준비하는 웹디자인기능사 실기

LIZ.B

₩49,500

초급 / HTML/CSS, jQuery, 웹 디자인

4.0

(5)

웹디자인기능사 실기 시험을 준비하시는 분들에게 짧고 쉽게 배우는 강좌를 준비했습니다. 단지 시험 때문이 아니더라도, 웹표준 양식에 맞는 사이트 구현에 관심있으신 분이라면 환영합니다.

초급

HTML/CSS, jQuery, 웹 디자인

구글 애드센스 수익형 워드프레스 블로그 만들기

아이티커넥트

₩77,000

입문 / WordPress, 웹 디자인, 반응형 웹, HTML/CSS, PHP

5.0

(6)

100+

Update

답변 활발

구글 애드센스 광고를 설치할 수 있는 워드프레스 블로그 만들기! 전문 언론사 스타일의 Newspaper 테마부터 수익형 블로그 끝판왕 Generatepress 테마까지 모두 알려드립니다.

입문

WordPress, 웹 디자인, 반응형 웹

반응형 웹사이트 포트폴리오(Architecture Agency)

코딩웍스(Coding Works)

₩61,600

중급이상 / HTML/CSS, jQuery, 웹 디자인, 반응형 웹

5.0

(54)

800+

Update

답변 활발

HTML+CSS+JQUERY 퍼블리싱으로 반응형 웹사이트 전체 제작과정을 통해 퍼블리싱 중급 실력으로 가는 기본기를 단단히 하고 실전 퍼블리싱의 노하우를 갖게 됩니다. 특히, 웹사이트 전체 제작과정을 충분한 설명과 실전 작업으로 경험하고 개인 포트폴리오 웹사이트 제작에 자신감을 갖게 됩니다. (반응형 제작 방식은 기존 방식의 float와 position을 이용한 반응형 레이아웃 제작 방식입니다. 현재로서는 기존 웹사이트가 기존 방식으로 제작된 레이아웃이 대부분이기 때문에 Flex와 Grid도 학습해야 하지만 기존 방식 레이아웃을 반드시 학습하시고 잘 사용해야 합니다.)

중급이상

HTML/CSS, jQuery, 웹 디자인

애플 웹사이트 인터랙션 클론!

1분코딩

₩77,000

중급이상 / 인터랙티브 웹, 클론코딩, JavaScript, SVG, HTML/CSS, 웹 디자인

5.0

(218)

4,200+

Update

애플 웹사이트에 자주 등장하는 고급 인터랙션 효과들을 처음부터 직접 개발하는 방법을 배울 수 있습니다.

중급이상

인터랙티브 웹, 클론코딩, JavaScript

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

Dongho Lee

₩11,000

초급 / HTML/CSS, 웹 디자인

4.5

(2)

Update

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

초급

HTML/CSS, 웹 디자인

퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준

Dongho Lee

₩44,000

초급 / HTML/CSS, 웹 디자인

4.7

(53)

1,500+

Update

웹표준 기초인 html과 css를 마스터하고 실전 웹페이지를 제작해 봅니다. 그때 그때 '그럴 것같은' 이 아니라 제대로 된 퍼블리싱 개념과 방법을 배워 퍼블리셔가 될 수 있습니다.

초급

HTML/CSS, 웹 디자인

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

코딩웍스(Coding Works)

₩38,500

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

4.6

(10)

200+

답변 활발

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

초급

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

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

코딩웍스(Coding Works)

₩166,100

입문 / HTML/CSS, jQuery, 웹 디자인

4.9

(97)

700+

Update

답변 활발

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

입문

HTML/CSS, jQuery, 웹 디자인