Thumbnail
크리에이티브 웹앱 디자인
쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
35명이 수강하고 있어요.

59,400원

지식공유자 : LIZ.B
총 42개 수업˙총 7시간 57분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
내 목록 추가 57 공유
초급자를 위해 준비한
[웹앱 디자인, 웹 개발] 강의입니다.

쉽게 만드는 반응형 웹 실무 포트폴리오! #설화수 포트폴리오

✍️
이런 걸
배워요!
HTML + CSS + JavaScript + jQuery 핵심이론을 통한 퍼블리싱 실전 능력 향상
Click, Mouseenter, Mouseleave 등 들어보긴 했는데 활용은 못 하겠는 Script 작성 능력
Position 속성에 대한 정확한 개념과 활용
Hover, Before, After, Focus, Active 가상클래스에 대한 이해와 활용
직접 짜서 만들어보는 Animate Slider
Flex를 활용한 Layout 만들기
Tab Menu, Toggle Menu, slideToggle
모바일 대응 반응형 웹 퍼블리싱 제작 능력 (미디어쿼리)
PC 버전과 모바일 버전에서 최적화된 반응형 웹 전체 제작 능력
Class Method를 활용한 이벤트

실무에 딱 맞는, 반응형 웹사이트 코딩!

1. 왜 이 수업을 들어야 할까요?

  • 초보자도 익히고 접근하기 쉽게 만들었습니다.
  • HTML 기본만 알고 있다면 누구나 쉽게 따라할 수 있습니다.

취업 준비, 이제 인강으로 하세요! 반응형 웹 포트폴리오가 필요하신 분들, 함께 공부하고 함께 준비해요!

이제 막 웹을 배워 취업을 준비하고 있는 분들께, 단순히 공부로만 끝나는 게 아니라 나만의 스타일로 결과물을 직접 만들어볼 수 있습니다.

2. 나만의 스타일로 커스터마이징해보세요!

실제 오프라인 수업을 통해 학생들이 직접 만든 프로젝트입니다!

현재 오프라인 강의에서 실제 학생들이 자신만의 스타일로 시안 작업부터 코딩까지 하나하나 변경해가면서 포트폴리오를 완성했습니다. 실제로 신입 퍼블리셔, 웹디자이너로 취업을 위한 포트폴리오를 만드는 데 강의의 내용이 많은 도움이 될 것입니다.

3. HTML 정보설계를 하는 방법을 알려드립니다.

웹 코딩에서 가장 중요한 것은 정보 설계입니다. 제대로 된 건축물이 나오기 위해서는 든든한 설계구조가 있어야겠지요. 코딩도 마찬가지입니다. 정보설계에 따라 결과물이 다르게 나올 수 있어요. 구조를 짜는 방법을 하나하나 알려드릴게요!

4. CSS Layout 작성이 어렵다구요?

HTML이 뭔지 알고, 기본적인 CSS 사용법 정도만 알고 계신다면 강의를 따라 직접 하나하나 만들어가며 변화하는 내용들을 확인하면서 오류를 수정해 나갈 겁니다. 수업에 참여하시면 Flex나 Position, Display 등 여러 속성들을 자유롭게 사용하실 수 있을 거예요.

5. Script를 어떤 식으로 활용할지 막막하시다면!

다양한 이벤트들이 기다리고 있습니다. 실무에서 바로 사용할 수 있는 Script 활용 예제들을 꼼꼼히 분석해가면서 하나하나 작성하다 보면 기본적인 원리나 활용법을 익히실 수 있습니다!

6. 반응형 웹을 쉽게 풀어서 알려드립니다.

반응형 웹은 반드시 웹 퍼블리싱/디자인 포폴에 필수적으로 들어가야 할 프로젝트 중 하나인데요, Mediaquery(미디어쿼리)를 하나하나 작성해보시면 기본적인 원리를 쉽게 이해하면서 반응형 웹을 마스터할 수 있습니다.

#설화수

7. 실무에서 사용하는 짜임새 있는 구조를 코딩해보고자 한다면!

단순한 포폴 레이아웃이 아니고 실제 회사에서 사용하는 짜임새 있는 구조를 코딩해보고자 하시는 분들께 추천하고 싶습니다. 포트폴리오에 반응형 웹 상업 사이트를 추가 제작하고 싶은 분들에게 적극 추천합니다. 실무에서 사용하는 진짜들만 모아모아 만들었습니다.

8. 강의 섹션별 단계별 완성본과 PSD파일 제공 

각 섹션별 완성본을 제공합니다. 중간에 놓친 부분이 있더라도 따라올 수 있도록, 모든 파일이 들어있는 단계별 작업 소스를 섹션의 맨 마지막 회차에 제공합니다.

또한 수강 후기를 작성해주신 모든 분들에게 PSD 원본 파일을 공유해 드립니다.

컨텐츠를 변경해서 나만의 포트폴리오로 만들어보세요!

9. Flex를 활용한 반응형 웹 하드코딩 제작을 원한다면! 

설화수 반응형 웹사이트 제작은 순수한 하드코딩을 이용해 작업했습니다. plugin slider가 아닌 하나하나 만들어보고 원리를 알아보며 공부해갈 생각입니다.

10. VScode의 활용법을 알려드려요! 

이번 반응형 웹사이트 제작강의에 사용된 텍스트 에디터는 VScode입니다. 다른 에디터를 사용하셔도 무방합니다. 다만 수업 중간중간 VScode의 단축키 및 사용법에 대한 설명도 포함됨을 알려드립니다.

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
Flex를 어떻게 써야 할지 기본 원리를 알고 싶은 분
크리에이티브 넘치는 인터랙티브 웹 구현에 관심있는 분들
HTML + CSS + JavaScript + jQuery 핵심 이론을 통한 퍼블리싱 실전 능력 향상
초급에서 중급으로 기본기 업그레이드를 원하는 분!
실무에서 사용하는 반응형 웹사이트 제작을 하고 싶은 분
📚
선수 지식,
필요한가요?
초보자도 가능
h1{color:red}를 이해하신다면 누구나 가능합니다!
<div>로 열고 </div>로 닫는 태그(Tag)의 기본 원리를 아신다면 함께해요!

안녕하세요
LIZ.B 입니다.
LIZ.B의 썸네일

건축학을 전공했고 웹디자인과 인연을 맺은건 언 20여년이 넘었습니다. 실무와 강의를 병행하며  많은 희노애락 끝에 현재는 이 일을 많이 애정하게 되었고,  흥미와 성취감으로 더 매진하게 되었습니다. 제가 알고 있는 지식들을 공유하여, 좀더 많은 비전공자들이 쉽게 입문하기를 바라며, 그대가 원하는 모든 일들이 이루어 지길 기원합니다.

Lucete!

강의경력  
□ 現 대우직업능력개발원 프론트엔드 / 멀티미디어 / 웹콘텐츠 과정 강의
  • 2018.3 -현재. 웹 디자인/멀티미디어/프론트엔드 전문가과정 진행
□ 하이미디어 UI/UX 웹퍼블리싱 강의
□ 이젠컴퓨터 UI/UX 웹퍼블리싱 강의
□ 더조은컴퓨터학원 종로캠퍼스 웹디자인 강의
□ 더조은컴퓨터학원 강남캠퍼스 웹디자인/그래픽 강의
□ 영재직업전문학교 웹디자인 강의
  자격증  
□ 웹디자인기능사 자격증
□ 그래픽스운용기능사 자격증 
□ KPC 자격지도자(GTQ,GTQi,GTQid) 자격증
□  직업능력개발훈련교사(정보기술, 디자인,문화컨텐츠) 

커리큘럼 총 42 개 ˙ 7시간 57분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 반응형 웹사이트 제작 강의소개
섹션 1. desktop layout #header 제작하기
fontello 사용하기 미리보기 06:18
전체 작업 소스 파일 다운로드 04:34
[header] prototype 마크업 작성하기 20:21
[header] layout css_1 작성 14:08
[header] layout css_2 - language menu 작성하기 12:39
[header] language menu script 작성하기 07:14
[header] layout css_3 - header_link 작성하기 22:54
[header] header_link script 작성하기 03:37
[header] navigation menu prototype 마크업 작성하기 04:44
[header] navigation menu layout css 작성 12:27
[header] navigation script 작성하기 08:32
섹션 2. desktop layout #visual 제작하기
[visual] prototype 마크업 작성하기 10:31
[visual] layout css 작성하기 14:39
[visual] layout_2 css 작성하기 19:34
[visual] script_1 작성하기 16:49
[visual] script_2 작성하기 16:22
섹션 3. desktop content # 설화수 선물추천
[선물추천] prototype 마크업 작성하기 07:38
[선물추천] layout css작성하기 15:05
[선물추천] script 작성하기 06:30
섹션 4. desktop content # shade picker/뷰티리추얼 섹션
[shade picker/뷰티리추얼] prototype 마크업 작성하기 05:46
[shade picker/뷰티리추얼] layout css작성하기 09:18
섹션 5. desktop content #플래그십 스토어& 스파
[플래그십 스토어& 스파] prototype 마크업 작성하기 04:48
[플래그십 스토어& 스파] layout css 작성하기 16:17
[플래그십 스토어& 스파] script 작성하기 14:32
섹션 6. desktop content #08 : footer 섹션
[footer] prototype 마크업 작성하기 07:58
[footer] layout css 작성하기 13:36
섹션 7. 💡max-width:1439 / tablet - all
[전체] layout css 작성하기 21:14
섹션 8. max-width:999px / tablet - header 섹션
[header] layout css 작성하기 12:59
[header] mobile navigation prototype 마크업 작성하기 10:52
[header] mobile navigation layout css-1 작성하기 10:19
[header] mobile navigation layout css-2 작성하기 11:52
[header] mobile navigation script 작성하기 10:04
[header] header_link prototype / layout / script 작성하기 10:09
섹션 9. max-width:999px / tablet - content all
[visual] layout css 작성하기 07:16
[content] layout css 작성하기 13:39
섹션 10. max-width:767px / mobile - content all
[visual] layout css 작성하기 16:28
[선물추천] layout css 작성하기 09:24
[shade picker/매거진] layout css 작성하기 13:33
[flagship] layout css 작성하기 11:54
섹션 11. deskTop header 수정
deskTop header 수정내용확인하기 04:28
강의 게시일 : 2020년 10월 29일 (마지막 업데이트일 : 2020년 10월 29일)
수강평
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
아직 평가를 충분히 받지 못한 강의 입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!😄️️

59,400원

내 목록 추가 57 공유
지식공유자 : LIZ.B
총 42개 수업˙총 7시간 57분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스