Thumbnail
개발 · 프로그래밍 웹 개발
반응형 웹사이트 포트폴리오(App Official Landing Website)
(5.0)
14개의 수강평 ∙ 140명의 수강생

61,600원

지식공유자 : 코딩웍스(Coding Works)
총 108개 수업˙총 23시간 47분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
내 목록 추가 469 공유
초급자를 위해 준비한
[웹 개발, 웹앱 디자인] 강의입니다.

반응형 웹사이트 포트폴리오(App Official Landing) 제작 과정은 HTML+CSS+JQUERY 퍼블리싱으로 반응형 웹사이트 전체 제작과정을 통해 퍼블리싱 중급 실력으로 가는 기본기를 단단히 하고 실전 퍼블리싱의 노하우를 갖게 됩니다. 특히, 웹사이트 전체 제작과정을 충분한 설명과 실전 작업으로 경험하고 개인 포트폴리오 웹사이트 제작에 자신감을 갖게 됩니다. 필수로 사용해야 하는 제이쿼리 플러그인으로 Scroll Reveal Animation과 Slick 슬라이더 사용법을 학습합니다. 반응형 제작 방식은 기존 방식의 float와 position을 이용한 반응형 레이아웃 제작 방식으로 제작합니다. 하지만 어느 특정 요소에서는 Flex를 사용하는 부분도 있습니다.

✍️
이런 걸
배워요!
전체 웹사이트 퍼블리싱 실력과 노하우 향상
기존 방식인 float와 position을 이용해서 99% 배치한 반응형 레이아웃
position 속성에 대한 정확한 개념과 활용
hover before after checked active 가상클래스에 대한 이해와 활용
제이쿼리(JQUERY) 핵심이론 학습 및 응용
CSS 탭 메뉴 콘텐츠, JQUERY 어코디언 메뉴 콘텐츠 제작 능력
CSS3 filter 속성, object-fit 속성 활용
모바일 대응 반응형웹 퍼블리싱 제작 능력(미디어쿼리)
PC 버전과 모바일 버전에서 최적화된 반응형 웹 전체 제작 능력
Scroll Reveal Animation 플러그인
Text Typing 애니메이션 플러그인
Slick 슬라이더 사용법 및 커스텀 CSS 수정방법

반응형 웹사이트 포트폴리오
(App Official Landing) 제작 과정

'총 22시간 이상의 반응형 웹사이트 포트폴리오 강의'
'핵심이론 수업과 반응형 웹사이트 제작 과정'
'퍼블리셔 취업을 위한 반응형 포트폴리오 홈페이지 제작 코스'
'실무 퍼블리싱 진짜 실력을 위한 하드코딩 수업'
'9시간 이상의 필수 제이쿼리 플러그인 사용법 및 CSS 필수 핵심이론 영상'
'현직 퍼블리셔 겸 퍼블리싱 전문 강사의 꼼꼼하고 체계적인 수업'


📔 반응형 웹사이트 포트폴리오 제작 과정 특징 

01) 순수 CSS 레이아웃 배치 방식으로 만드는 반응형 웹사이트

02) 클론사이트, 카피사이트가 아닌 코딩웍스가 직접 UI 디자인부터 퍼블리싱까지 제작한 웹사이트

03) 강의 섹션별 14개의 단계별 완성본과 UI 디자인 PSD파일 제공
※ 포토샵 UI 디자인은 Photoshop CC 2019 버전으로 제작되었습니다.

04) 총 22시간 이상의 제작강의

05) 이론 학습과 제작을 위한 텍스트에디터
이번 반응형 웹사이트 제작 강의에 사용된 텍스트 에디터는 비주얼 스튜디오 코드(Visual Studio Code)블라켓츠(Brackets)입니다. 물론 다른 텍스트 에디터를 사용하셔도 괜찮습니다. 수강생이 익숙한 텍스트 에디터를 사용하시면 됩니다. 단, 실시간 미리보기 기능이 없는 텍스트 에디터는 따라오시기 벅찰 수 있습니다.

06) 원활한 제작 과정 학습을 위한 필수 핵심이론 영상(Slick Slider, Reveal Animation)
반응형 웹사이트 포트폴리오(App Official Landing Website) 제작 강의를 제외하고 제이쿼리 플러그인 사용법, 제작을 위한 필수적인 CSS 이론 등 9시간 이상의 핵심이론 강의 영상이 있습니다. 해당 영상들을 보시지 않고 실전 제작 섹션으로 오시면 따라오시기 벅차실 수도 있습니다. [섹션 2. 필수 제이쿼리 플러그인 사용법 및 CSS 필수 핵심이론]에서 생소하거나 부족하다고 생각되시는 내용들을 충분히 학습하고 오시기 바랍니다.


💡 PC 레이아웃 섹션 전환 미리보기(Preview) 

💡 Mobile 레이아웃 UI/UX 미리보기(Preview) 


🙋🏻‍♂️ 강의 수강을 위한 선수지식

이번 반응형 웹사이트 제작의 난이도는 입문 또는 초급은 어렵습니다. 수강 레벨은 중급이거나, 또는 그 가까이는 되어야 잘 따라오실 수 있습니다. 최소한 초급은 아니라고 생각하시는 분이면 따라오시는 데 큰 어려움은 아닐 거라 생각합니다.

수강을 위한 선수 지식으로는 HTML+CSS에 대한 기본적인 내용은 알고 있으시면 됩니다. 그렇다고 HTML+CSS를 잘하는 상태일 필요는 없습니다. 20시간이 넘는 강의에서 여유있게 충분히 설명하고 있습니다. 만약 영상을 보시다 수강생의 코딩이 늦어서 HTML+CSS 작성이 늦는 경우, 영상을 멈추시고  HTML+CSS 작성을 하시고 다음 스텝을 따라오시면 됩니다. 

영상을 멈추고 코딩하고 하느라 남들보다 시간이 좀 더 필요한 것뿐입니다. 오히려 차분하게 스스로 코딩하는 시간을 갖는 면에서 더 좋습니다. 너무 걱정 말고 함께 공부하셨으면 합니다. ^^

제 강의 중에 'HTML+CSS+JQUERY 포트폴리오 중급 실전 퍼블리싱 강의'가 있습니다. 이 강의에 있는 이론 내용과 실전 예제 제작 내용이 이번 반응형 웹사이트 제작 필요한 내용이 거의 모두 들어가 있습니다. 곧, HTML+CSS+JQUERY 기본기를 확실히 만들 수 있는 강의라고 생각합니다.

이번 반응형 웹사이트 제작에서 몇 가지를 제외하고는 'HTML+CSS+JQUERY 포트폴리오 중급 실전 퍼블리싱 강의'에 있는 내용을 1회차 정도 학습하시고 오시면 따라오시기가 훨씬 수월할 것이라 생각합니다.

결론은...

입문이나 초급이 아니시면 따라오시는 건 문제없지만 조금 버거운 느낌이실 거고요.
다른 강의를 통해서 HTML+CSS 기본기를 익히고 오셨다면 충분히 따라올 뿐만 아니라 왜 이렇게 하는지에 대한 이해도를 갖고 반응형 웹사이트 제작 과정을 마치시게 될 거라 생각합니다.


📕  효율적인 학습을 위한 코딩웍스의 학습 방법 제안

학습방법은 사람마다 모두 다르다고 생각합니다. 그래서 정답은 없습니다. 하지만 경험자이자 제작자가 생각하는 효율적인 학습방법은 있다고 생각합니다. 그래서 코딩웍스가 생각하는 효율적인 학습방법을 제안드립니다.

[1단계]
섹션 3부터 섹션 16까지 전체 제작 과정을 실습 없이 영상을 처음부터 끝까지 봅니다. (12시간이 넘는 제작 과정이라 그냥 보는 것만으로도 만만하지는 않습니다. 그러니 이동하면서 밥 먹으면서 부담 없이 보세요. 그냥 뭘 만드는지 어떤 순서로 만드는지 정도만 눈여겨보시면 됩니다.)

[2단계]
1단계를 하시면 어떤 부분에 대한 이론이 필요한지 어떤 부분에 대한 준비가 필요한지 자연스럽게 알게 됩니다. 그럼 그런 부분을 완벽하게는 아니더라고 제작에 필요한 이론 사항을 어느 정도 학습합니다. 기초 레벨이 아니시라면 섹션 2. 필수 제이쿼리 플러그인 사용법 및 CSS 필수 핵심이론에 영상을 준비해 놓았으니 부족하지 않을 거라 생각합니다. 하지만 가상클래스, 선택자 등 HTML+CSS 필수적인 이론사항은 코딩웍스 유튜브 채널에서 공부하시기 바랍니다.

[3단계]
섹션 3부터 영상 꼼꼼히 보시면서 실습하시기 바랍니다. 사전 준비가 충분히 되었으니 따라오시기가 훨씬 쉬울 실 거라 생각됩니다.

[4단계]
영상과 함게 전체 반응형 웹사이트를 제작을 마치셨으면 제공된 포토샵 PSD 파일을 열고 UI 디자인을 나름의 테마를 정해서 수정하세요. 레이아웃에 큰 변화는 주지 마시고 기존의 레이아웃에서 부분적으로 수정하셔서 개인 포트폴리오 UI 디자인을 마치세요.

[5단계]
제작된 UI 디자인을 기초로 PPT에서 기능정의서와 HTML 구조를 만드시고 실전 퍼블리싱을 진행해서 완성하세요. 그럼 여러분만의 디자인 포트폴리오와 퍼블리싱 포트폴리오가 완성됩니다.


🙋🏻‍♂️ 강의 관련 예상되는 질문필독사항

Q. 예제 제작하면서 나오는 중급 CSS 이론 설명 영상이 있나요?
A. '예제 제작하는데 기초이론에 나오지 않은 중급이론이 많이 나오는데 중급 이론 수업은 어디서 듣나요?' 이런 질문이 게시판에 자주 올라옵니다.

지금 과정은 초급 퍼블리싱 예제 제작을 하는 과정은 아닙니다. 초급~중급 퍼블리싱 예제를 제작하는 과정입니다. 그래서 CSS 초중급 이론은 어느 정도 알고 있으셔야 합니다. 그렇다고 꼭 잘 아실 필요는 없습니다. CSS 초중급 이론은 예제를 제작하면서 지속적으로 반복합니다. 그리고 코딩웍스 유튜브 퍼블리싱 채널에 [중급이론] CSS 중급이론 이라는 재생 목록에 예제 제작에 필요한 필수 중급 이론 영상이 자세히 있으니, 지금 과정을 들으시면서 중급 이론을 병행하시면 좋습니다.

▲ 코딩웍스 유튜브 채널 바로가기

Q.  이 과정 수강하면 실무에서 퍼블리셔로 일할 수 있을까요?
A. 이 과정에 있는 퍼블리싱 내용을 모두 이해하고 잘 활용할 수 있다면 가능합니다. 하지만 퍼블리싱이라는게 충분한 경험과 다양한 종류의 웹사이트를 만들어 본 경험이 있어야 실무에서 일할 수 있습니다. 지금 과정과 같은 강의들을 몇 개 더 공부하시고 전체 웹사이트 제작 과정을 몇 개 공부하시면 될 거라 생각합니다. 물론 개인 포트폴리오 홈페이지 제작도 하셔야 됩니다. 퍼블리싱의 진입장벽이 생각보다 높은 편입니다. 영상 한 번 보신다고 그 안에 내용과 노하우가 모두 학생에게 전해지는 건 아니기 때문에 위에 설명한 학습방법을 통해서 내 것으로 만드는 과정을 하시기 바랍니다.

Q. 웹사이트 제작하면서 나오는 이론을 설명하는 이론 파트가 따로 없던데요? 
A. 지금 수강하시는 과정은 입문, 초급 과정이 아니고 중급 레벨의 반응형 웹사이트 전체 제작 퍼블리싱 강의입니다. 기본 이론 파트와 실전 예제 제작 학습은 다른 과정을 통해서 스킬업하시기를 추천드립니다.

Q. 공부하다가 모르는 게 있으면 질문은 어디에 하나요? 
A. 질문이 있으시면 [질문&답변] 게시판에 글을 남기시면 바로는 아니어도 확인되면 답변을 드립니다. 그리고 질문은 최대한 구체적으로 해주세요. 질문이 구체적이지 않았을 때 충분한 답변이 좀처럼 쉽지 않습니다. 그래서 질문하실 때는 궁금하신 내용과 함께 작성 중이신 HTML, CSS, JQUERY 코딩 화면 캡처해서 첨부해 주시면 답변드리기가 훨씬 수월합니다.

Q. 강사님 수업 중 <퍼블리셔 취업 진짜 실전 가이드>를 먼저 보면 좋을까요?
A. 퍼블리싱 스킬을 더 익히는 것도 중요하지만 먼저 퍼블리셔로서 기본기를 갖추는 것이 우선되어야 합니다. 퍼블리셔 취업 실전가이드 전자책(PDF)에서는 퍼블리싱 기본기란 바람직한 코딩 습관과 원칙, 경력자 처럼 퍼블리싱하기 등 퍼블리셔로서 반드시 알아야 하는 내용을 꼼꼼히 정리했습니다. 퍼블리셔 취업 실전 가이드 전자책(PDF)을 먼저 보시고 퍼블리싱 기본기에 대한 이해도를 충분히 갖고 학습하시기를 권해드립니다. 아래 이미지를 클릭하시면 수업 소개 내용을 보실 수 있습니다.


▲ 퍼블리셔 취업을 위한 코딩웍스 퍼블리싱 강의 로드맵


🙂 TMI... 인프런 코딩웍스 블로그

인프런 코딩웍스 블로그에서 퍼블리싱을 위한 소소한 팁(Tip)과 정보가 있습니다. 

인프런 코딩웍스 블로그 보러가기 : https://www.inflearn.com/users/@codingworks/blogs

👨🏼‍🏫 강사소개

  • (현재) 프리랜서 프론트엔드 퍼블리셔
  • 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
  • 이젠 컴퓨터아카데미 웹 퍼블리싱 강사
  • 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
  • 이젠 컴퓨터아카데미 웹디자인 기능사 실기 자격증반
  • 라크피아 ICT 트레이닝 센터프론트엔드 퍼블리싱 마스터 코스 강사
  • 이지앤에듀프론트엔드 퍼블리싱, UI/UX 디자인
  • HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
  • 코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks

CSS 그리드(Grid) 핵심이론, 플렉스, flex, flexbox, html, css, html/css,  website, 웹 퍼블리셔, 웹사이트, 코딩, coding, jquery, 제이쿼리, 레이아웃, 인터렉티브웹, interactive web, web design, 웹디자인, 포트폴리오,  퍼블리싱, 반응형웹, 웹디자인기능사 실기시험

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
전체 웹사이트 제작 과정을 경험하고 싶은 퍼블리셔
퍼블리싱 기본기를 활용한 실전 웹사이트 제작을 원하는 분
퍼블리싱 개인 포트폴리오 홈페이지 제작이 필요하신 분
📚
선수 지식,
필요한가요?
HTML+CSS 기초 코딩 능력

안녕하세요
코딩웍스(Coding Works) 입니다.
코딩웍스(Coding Works)의 썸네일

■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱

🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks

커리큘럼 총 108 개 ˙ 23시간 47분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. [미리보기 & 제작노트] 반응형 앱 오피셜 랜딩사이트
섹션 2. 필수 제이쿼리 플러그인 사용법 및 CSS 필수 핵심이론
앵커 만들고 부드럽게 스크롤해서 찾아가기(플러그인, CSS 속성) 미리보기 24:01 반응형 웹 제작을 위한 미디어 쿼리(Media Query) 미리보기 07:20 폰트 아이콘 사용법(FontAwesome 4,7) 미리보기 21:49 폰트 아이콘 사용법(XEICON) 미리보기 13:36 웹 폰트 사용법(구글 웹 폰트, 눈누 한글 웹 폰트) 미리보기 18:30
filter 속성으로 이미지 색상을 자유자재로 변경하기 13:19
object-fit과 object-position으로 img를 배경처럼 사용하기 15:53
플렉스(Flex) 속성으로 자유롭게 자식요소 정렬하기 미리보기 18:29
탭 메뉴 제작을 위한 input 속성선택자, 인접선택자, 형제선택자 31:37
인라인 자바스크립트 활용하기(onclick 자바스크립트 이벤트) 21:19
[제이쿼리 핵심이론] 기본 구문 만들기, 선택자 미리보기 17:36 [제이쿼리 핵심이론] 함수 미리보기 11:43 [제이쿼리 핵심이론] 메서드 미리보기 04:46 [제이쿼리 핵심이론] 효과 메서드 - slideDown, slideUp, fadeIn, fadeOut) 미리보기 21:01 [제이쿼리 핵심이론] 클래스 제어 메서드 - addClass, removeClass, toggleClass) 미리보기 09:05 [제이쿼리 핵심이론] 요소탐색 메서드 - children, siblings) 미리보기 28:18
[제이쿼리 실전예제] if 조건문을 이용한 스크롤 후 헤더 디자인 변경 29:01
[플러그인 사용방법] 콘텐츠 슬라이더 Slick Slider 사용법 및 CSS 변경(1) 25:28
[플러그인 사용방법] 콘텐츠 슬라이더 Slick Slider 사용법 및 CSS 변경(2) 22:22
[플러그인 사용방법] 스크롤하면 시작되는 애니메이션 - Wow.js & AOS.js 30:30
웹 퍼블리셔를 위한 크롬 확장 프로그램 추천(1탄) 미리보기 21:39 웹 퍼블리셔를 위한 크롬 확장 프로그램 추천(2탄) 미리보기 19:42 퍼블리싱 강사가 강의를 잘 가르치는지 구분하기(display, position 속성) 미리보기 27:32 상대적인 폰트 크기 em 단위와 rem 단위 이해하기 미리보기 25:31 부모요소의 값을 상속하는 inherit 이해하기 미리보기 12:43 CSS calc() 산술식(사칙연산) 미리보기 17:09 CSS에서 변수 var() 사용하기 미리보기 24:07
body 안에 또 다른 html 불러오는 iframe 활용하기 17:04
서버에 업로드 전 필수적인 이미지 용량 최적화(Image Optimize) 미리보기 11:22 가상클래스의 꽃(:before :after) 사용법 미리보기 하드코딩으로 이미지맵(image map) 만들기 미리보기
반응형 애니메이션 모달(HTML+CSS+JQUERY)
섹션 3. 반응형 앱 오피셜 랜딩사이트 제작 Start~!
섹션 4. 반응형 앱 오피셜 랜딩사이트 제작 – Header & Welcome 섹션
Header & Welcome 섹션 HTML 기본구조 06:11
Header 네비게이션 제작 16:51
welcome 섹션 제작(슬라이더) 16:25
welcome 섹션 제작(타이핑 텍스트 애니메이션) 01 13:35
welcome 섹션 제작(타이핑 텍스트 애니메이션) 02 19:10
섹션 5. 반응형 앱 오피셜 랜딩사이트 제작 – ceo-access 섹션
ceo-access 섹션 - HTML 구조와 내용 12:50
ceo-access 섹션 - CSS 배치 및 상세디자인(1) 12:58
ceo-access 섹션 - CSS 배치 및 상세디자인(2) 10:50
섹션 6. 반응형 앱 오피셜 랜딩사이트 제작 – banner 섹션
banner 섹션 - HTML 구조와 내용 11:23
banner 섹션 - CSS 탭 메뉴 제작(1) 17:34
banner 섹션 - CSS 탭 메뉴 제작(2) 13:24
섹션 7. 반응형 앱 오피셜 랜딩사이트 제작 – feature 섹션
feature 섹션 - HTML 구조와 내용 11:20
feature 섹션 - CSS 배치 및 상세 디자인 13:15
섹션 8. 반응형 앱 오피셜 랜딩사이트 제작 – vision 섹션
vision 섹션 - HTML 구조와 내용 08:10
vision 섹션 - CSS 배치 및 상세디자인 17:25
섹션 9. 반응형 앱 오피셜 랜딩사이트 제작 – faq 섹션
faq 섹션 - HTML 구조와 내용 14:58
faq 섹션 - CSS 배치 및 상세 디자인(1) 15:53
faq 섹션 - CSS 배치 및 상세 디자인(2) 06:07
faq 섹션 - 어코디언 만들기 제이쿼리 코딩 23:39
섹션 10. 반응형 앱 오피셜 랜딩사이트 제작 – review 섹션
review 섹션 - HTML 구조와 내용 07:09
review 섹션 - CSS 디자인 및 슬릭 슬라이더 제이쿼리 07:31
review 섹션 - 슬릭 슬라이더 CSS 수정하기 16:34
섹션 11. 반응형 앱 오피셜 랜딩사이트 제작 – focus 섹션
focus 섹션 - HTML 구조와 내용 및 CSS 디자인 16:09
섹션 12. 반응형 앱 오피셜 랜딩사이트 제작 – guide 섹션
guide 섹션 - HTML 구조와 내용 13:32
guide 섹션 - CSS 배치 및 상세 디자인 13:21
guide 섹션 - 슬릭 슬라이더 CSS 상세 디자인 11:19
guide 섹션 - 가이드 비디오 모달 CSS 디자인 17:00
섹션 13. 반응형 앱 오피셜 랜딩사이트 제작 – news 섹션
news 섹션 - HTML 구조와 내용 14:59
news 섹션 - CSS 배치 및 상세디자인(news-left) 14:52
news 섹션 - CSS 배치 및 상세디자인(news-right) 13:18
news 섹션 - CSS 상세디자인(news-right) 및 인라인 자바스크립트 14:22
섹션 14. 반응형 앱 오피셜 랜딩사이트 제작 – 푸터(footer)
푸터(footer) - HTML 구조와 내용 09:18
푸터(footer) - CSS 배치 및 상세 디자인 15:52
섹션 15. 반응형 앱 오피셜 랜딩사이트 제작 – PC 버전 마무리 작업
모든 섹션 위아래 간격 알맞게 조절하기 09:07
Header 네비게이션 앵커 만들고 부드럽게 스크롤 하기 13:23
스크롤하면 header와 상단버튼 CSS 디자인 변경 자바스크립트 13:40
Scroll Reveal Animation 적용하기 23:22
섹션 16. 반응형 앱 오피셜 랜딩사이트 제작 – 모바일 레이아웃 제작
모바일 레이아웃 변경작업(0) - 필독사항 및 세팅 11:23
모바일 레이아웃 변경작업(1) - welcome 섹션 08:22
모바일 레이아웃 변경작업(2) - ceo-access 섹션 13:47
모바일 레이아웃 변경작업(3) - banner 섹션 09:11
모바일 레이아웃 변경작업(4) - feature 섹션 14:55
모바일 레이아웃 변경작업(5) - vision 섹션 04:36
모바일 레이아웃 변경작업(6) - faq 섹션 05:46
모바일 레이아웃 변경작업(7) - review 섹션 05:33
모바일 레이아웃 변경작업(8) - focus 섹션 05:33
모바일 레이아웃 변경작업(9) - guide 섹션 05:40
모바일 레이아웃 변경작업(10) - news 섹션 10:19
모바일 레이아웃 변경작업(11) - 푸터(footer) 07:25
모바일 레이아웃 변경작업(12) – 헤더(header) & 모달 24:44
섹션 17. 자료 다운로드(단계별 완성본, 플러그인, 참고 코드, 비주얼 코드 사용법, 포토샵 UI)
[다운로드] 반응형 앱 공식사이트(App Official Landing)-시작하기.zip
[다운로드] 포토샵 UI 디자인(반응형 앱 공식사이트)
[다운로드] 반응형 앱 공식사이트 제작을 윈한 기능 정의서
[다운로드] 반응형 앱 공식사이트(App Official Landing) - 섹션 단계별 완성본
[참고자료] HTML WireFrame, Source Text, CDN, CSS filter Color Generator
[다운로드] display 속성에 대한 이해도 정리 텍스트 파일
[다운로드] px단위를 em단위로 자동 변환 엑셀 파일
[다운로드] CSS에서 변수 var() 사용하기(예제파일)
[다운로드] 인라인 자바스크립트 활용하기(onclick 자바스크립트 이벤트)
[다운로드] 비주얼 스튜디오 코드 필수 세팅, 단축키 변경, 필수 Extension 설치, 에밋(Emmet) 단축키
섹션 18. 강의 관련 오류 수정 및 자주 묻는 질문들(FAQ)
[FAQ] 블라켓(Brackets)에서 생기는 표시 오류
[FAQ] Brackets에서 Emmet 코드힌트 안생기는 오류 해결 방법
[FAQ] 블라켓(Brackets) 실시간 미리보기 크롬으로 열리게 하기(기본 브라우저 설정)
[FAQ] HTML 내에 파일 링크할 때 꼭! 상대주소로 하셔야 합니다.
[FAQ] 블라켓(Brackets)에서 에밋(Emmet) 수동 설치하기
강의 게시일 : 2021년 01월 15일 (마지막 업데이트일 : 2021년 07월 11일)
수강평 총 14개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
5.0
14개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
a토링 thumbnail
강의 수강 전에는 홈페이지 하나 만들어야지! 하고 코딩을 하면, 꼭 내 머리대로 구조가 나오지 않고 삐뚤뺴뚤하고 마진에 -230px을 줬다가 어디다간 또 거의 어거지로 끼워맞추면서 구조를 만들었습니다. 그리고 나서는 "아 ~ 나는 프론트랑은 연이 아닌가보다~" 의 반복........ 영상을 보니 전체적인 그림도 잘 그려지고, 강사님이 무한반복을 얘기해주는터라, 듣다보면 선생님이 아 대충 뭘 얘기하겠구나 하는것도 알 수 있을 정도가 된다고 생각합니다. 예를들어, 강사님이 "자식요소에 float를 줍니다." 라는 멘트를 하면 그 뒤에는 무조건 따라나오는게 "자식요소에 float값을 줬으니까 부모요소가 높이값을 잃어버리므로 부모에 overflow:hidden을 준다"라는게 거의 매~~~~~~~~번 나옵니다. 이런식으로 따로 외우려고 하지 않아도, 플로트에 플짜만 나와도 부모 오버플로우히든이 기계처럼 외워질 정도로 반복을 해주시기에, 구조가 딱 머리에 들어오게 됩니다. 강의 소개에 보면, 학습방법으로 섹션3(헤더~모바일) 작업을 편하게 보라고 하시는데, 저도 이전 강의에서는 그러지 못하고, 그저 결과물이 나오면 그것에 만족을 했습니다. 고로 강사님과 같이 만든 결과물을 보고 제가 만든것이라고 착각을 하게 되더라고요..ㅎ 근데 결과물 보고 와 뿌듯하다~ 다른거에 도전해볼까!! 라고 하면.. 막상 혼자하려니 잘 안되더군요. 그래서 이번엔 그냥 마음 비우고 처음엔 침대에 누워서도 보고, 귤까먹으면서도 보고, 빨래돌리면서도 보고, 버스에서도 보고 ㅋㅋ 정말 시간나면 유투브 대신 강의 시간 채운다 생각하고 쭉쭉 봤습니다. pc앞에 앉아서 볼때도 세상 편한 자세로 봤는데..(..ㅎ 이게 바로 온라인의 장점 아닙니까) 듣다보면 무조건 본인이 잘 모르는 내용들이 나오더라구요. 그런것들은 다시 들으면 물론 어렴풋이나마 생각이 나겠지만, 한번 배울때 가볍~~게 메모장 하나 켜서 or (pc로 듣는다면) 인프런 강의 오른쪽에 필기하기에다가 간단한 메모들을 곁들여서 들으니 덜 졸리고(<s>잠의노예</s>) 손이 놀고 있지 않으니까 기억이 더 잘 나더라고요. 그리고, '강의 오늘 다들었다~' 하면끝맺음으로 오늘 배운 내용들 중에 내가 정말 몰랐던 내용들이 메모장에 정리가 차곡차곡 되니까, 가볍게 슥 보면서 이해하고, 복습할때도 편하고요. 그리고 나서, 2회독을 할때는 직접 코딩을 입력하면서 볼때는 굳이 강사님과 같은 속도로 만들기 보단, 먼저 완성본사진+기본구조를 보고 먼저 만들어보고, css 뚝딱뚝딱 넣고나서, 어떻게 강사님과 다르게 넣었는지를 비교하면서 보는것도 하나의 재미라고 생각합니다. 그래야 온전히 내것인지 아니면 내가 타자연습만 했는지 잘 알 수 있다고 생각합니다. 또한 이렇게 해야 질문도 질좋은 질문이 오갈 수 있다고 생각합니다. 2회독을 마치면, 여러 사이트들을 보면서 f12를 누르지 않고 스스로 만들어 보는것도 좋다고 생각합니다. 그런데 2회독을 마치면(이전강의 포함) 웬만한 사이트들은 구조가 눈에 들어와서 얼추 비슷하게 흉내내는 저의 모습을 보게 되더군요!! 고로, 시간에 쫓기어 1회독에 끝낼거야! 라고 생각하기 보단, 1회독은 정말 세상에서 제일 편한 자세로 보고, 2회독에서 직접 코드 입력할땐, 어렴풋이나마 남는 기억 + 내가 쓴 메모장을 보면서 참고할 사항들은 참고하며 먼저 만들고 비교하기가 정말 탁월한 학습방법이라고 생각합니다. 여튼 저같은 바보도 어느정도 따라가는 강의라 함은, 여느 누구도 도전할 가치가 있는 강의라고 생각합니다.!!!! p.s) 아니 근데, 이 강의 초급대상이라고 되어있는데, 이거 초급영상 인건가요..?...... (퍼블리싱의 끝은 아직 먼것인가 ㄷㄷ....... )
2021-03-28
지식공유자코딩웍스(Coding Works)
a토링님~ 수강평에 정말 꼼꼼하고 자세하네요. 전에도 없었지만 앞으로도 이렇게 길고 상세한 수강평은 없을 것 같습니다.^^ 노력하시는 만큼 곧 좋은 결과 있을 거예요. 화이팅!!
2021-03-28
lololo thumbnail
소리도 안키고 회사에서,,, 아주대충 흐름만 pc버전까지 봤습니다 정말 흐름만 아는... 이제 강의 제대로 보면서 따라하고, 안보고 하고 얼마나 달라져있을지 궁금하네요 과연 그럴수 있을것인지?? 나중에 하단에 수정합니다 여담이지만 아직 회사에서 디자인 일만해서 심심해요ㅠㅠ시..싫고
2021-06-02
지식공유자코딩웍스(Coding Works)
lololo님 오랜만이네요. 현직 디자이너이시군요. 퇴근하시고 힘드시니까 주말에 차근차근 한 단계 한 단계 영상 보면서 따라해 보세요~
2021-06-02
m m thumbnail
그동안 들었던 어떤 강의보다, 실력향상에 도움이되는 월등한 강의입니다. 이론과 실습 모두 이해하기 쉽게, 강사님께서 정말 정말 설명을 잘 해주세요!! 강사님 정말 감사드려요! 업로드 되는 강의 모두 듣고 싶을정도로 만족도가 높습니다.!! ^^
2021-02-02
지식공유자코딩웍스(Coding Works)
mm님 안녕하세요 강의가 도움이 되셨다니 정말 기쁘네요. 코딩웍스 다른 강의들도 관심을 가져 주신다니니 감사드립니다. 공부합시다가 궁금한 점 있으면 질문 주세요.수강후기 감사드려요~
2021-02-02
한승훈 thumbnail
완강 성공 했습니다. 원래 기초 지식도 있고 해서 5일만에 완강 해버렷네요.. 포트폴리오 하나 쌓고 갑니당!^^
2021-01-22
지식공유자코딩웍스(Coding Works)
승훈님 벌써 완강을 하셨다고요? 강의 올라간지 일주일밖에 안 됐는데 부지런히 열심히 하셨네요. 이번 작업하신 거 변경 하셔 가지고 개인 포트폴리오로 만드시면 좋을 거 같습니다. 수강후기 감사드립니다~^^
2021-01-22
toisaj thumbnail
최고의 강의에요!
2021-07-25
지식공유자코딩웍스(Coding Works)
toisaj님~ 수강평 감사합니다!!
2021-07-26

61,600원

내 목록 추가 469 공유
지식공유자 : 코딩웍스(Coding Works)
총 108개 수업˙총 23시간 47분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
수강 전 궁금한 점이 있나요?
문의하기
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스