HTML+CSS+JQUERY 포트폴리오 실전 퍼블리싱
HTML+CSS+JQUERY 포트폴리오 실전 퍼블리싱
수강정보
(20개의 수강평)
311명의 수강생

이 강의는

HTML+CSS+JQUERY 초중급 퍼블리싱으로 다양한 실전 예제 학습을 통해 퍼블리싱 중급 실력을 위한 퍼블리싱 기본기를 익히시게 됩니다. 특히, 다양한 실전 예제를 통해 충분한 설명과 실전 작업으로 경험하고 퍼블리싱에 자신감을 생깁니다. 35시간이 넘는 충분한 학습량을 제공하는 퍼블리싱 수업입니다. (코딩웍스 유튜브 퍼블리싱 채널에 CSS 중급이론 학습을 병행하시면 더욱 효과적입니다.)

이런 걸 배워요

  • HTML+CSS+JQUERY 핵심이론으로 퍼블리싱 기본기 향상
  • 웹사이트 퍼블리싱 실력과 노하우 향상
  • 블럭요소와 인라인요소에 대한 정확한 개념과 활용
  • position 속성에 대한 정확한 개념과 활용
  • hover before after checked active 가상클래스에 대한 이해와 활용
  • 텍스트에디터 Brackets와 Emmet 사용법
  • 텍스트에디터 Visual Studio Code와 Emmet 사용법
  • Flex 활용과 Transform 속성 개념과 활용
  • 인접선택자,속성선택자,checked 가상클래스 이해와 활용
  • 다양한 마우스 호버 이펙트
  • 폰트어썸 이해하고 활용하기
  • CSS 탭 메뉴 콘텐츠, JQUERY 탭 메뉴 콘텐츠 제작 능력
  • 자바스크립트(JavaScript) 변수(var)와 조건문(if) 이해와 활용

▲ 코딩웍스 포트폴리오 실전 퍼블리싱 과정 완강했다는 수강생 후기입니다. 
35시간이 넘는 과정인데 완강하셨네요. 뿌듯합니다.


▲ 국비지원 퍼블리싱 과정 저한테 4개월 반 정도 배운 학생인데, 취업했다고 카톡이 왔습니다. 뿌듯합니다~! 
여러분도 열심히 하셔서 꼭 좋은 결과 있길 기원합니다.

 코딩웍스, HTML+CSS+JQUERY 포트폴리오 중급 실전 퍼블리싱 강의 

'퍼블리싱 필수이론과 실전예제 총 89개 강의 영상'

'총 30시간 이상의 실전 퍼블리싱 강의 영상'

'퍼블리셔 취업을 위한 Skill Up 필수 코스'

'실무 퍼블리싱 진짜 실력을 위한 하드코딩 수업'

📔 하드코딩(Hard Coding) 실력이 진짜 퍼블리싱 실력입니다.

제이쿼리 플러그인 사용해서 역동적이고 화려하게 꾸미는 퍼블리싱은 진짜 퍼블리싱이 아닙니다.

진짜 퍼블리싱 실력은 HTML로 레이아웃 설계를 꼼꼼히 잘하고, CSS로 배치와 상세 디자인하고,  직접 작성한 제이쿼리(JQUERY)로  상호작용까지 만들 수 있는 것이 진짜 퍼블리싱 실력입니다.

당장의 화려함에 제이쿼리 플러그인 사용에 의존하고 기본기 학습을 충실히 하지 않으면 웹 퍼블리셔로 취업하기 쉽지 않습니다. 설령 취업해서 실무에서 일하게 되더라도 퍼블리셔로서 어려운 하루 하루가 될 가능성이 높습니다.

코드 한줄 한줄 직접 코딩하는 곧, 하드 코딩할 수 있는게 진짜 퍼블리싱 실력입니다.


코딩웍스의 강의는 꼼꼼하고 정확합니다.

1. 퍼블리싱! 너무 겁먹지 마세요. 자신감 갖고 시작하세요. 시작이 반입니다.

2. 퍼블리싱! 궤도에 오르는 게 쉽다고 말할 수는 없지만, 반드시 보상으로 돌아옵니다.

3. 퍼블리셔 취업을 위해 HTML+CSS+JQUERY 하드코딩 기본기가 중요합니다.

  • 코딩웍스 퍼블리싱 강의는 수강생을 이해시킬 수 없는 코드는 사용하지 않습니다. 수강생에게 원리를 이해시킬 수 있는 강의가 좋은 강의라 생각하고, 코딩웍스 강의는 그렇게 제작되었습니다.
  • 웹 코딩을 처음 시작하는 분들을 위해 쉽고 친절하게 강의 된 핵심이론과 실전예제를 통해서 퍼블리싱의 자신감을 가지시기 바랍니다.

HTML+CSS+JQUERY 퍼블리싱을 시작하시는 분들께 드리고 싶은 말씀이 있습니다.

볼만한 웹사이트를 하드코딩으로 혼자서 잘 만드는 퍼블리싱 실력을 갖추는 건 쉬운 일은 아닙니다. 정확히는 어렵습니다.

알아야 할 이론도 많고 이론을 바탕으로 실전 제작해본 경험도 충분해야 합니다. 그리고 포토샵 UI 디자인 실력도 어느 정도 갖추고 있어야 합니다. 그러면 비로소 볼만한 웹사이트를 혼자서 잘 만드는 실력자가 될 수 있습니다.

다만, 위에서 말씀드린 충실한 이론 학습과 이론을 활용한 예제 제작을 통해 실력이 확장되지 않은 상태에서 '포트폴리오 웹사이트 제작 따라하기'를 하시면 안 됩니다. 

물론 부지런히 따라 하면 '남의 것을 복사한 클론(clone) 포트폴리오'라는 결과물은 나오겠지만, 진짜 실력으로 이어지지 않습니다.

여러분이 웹 퍼블리셔 취업을 위해 또는 디자이너가 웹 퍼블리싱 능력을 갖춰서 경쟁력을 갖기 위해서는 반드시 개인 포트폴리오 웹사이트가 필요합니다. 앞서 말씀드린 충실한 이론학습과 실전 제작 경험을 갖추지 않고  따라 하기만으로 개인  홈페이지를 만들더라도, 하드코딩 실력이 받쳐주지 않으면 취업하셨더라도 실무에서 금세 부족한 기본기가 티가 납니다.

개인 포트폴리오 웹사이트 제작 전에 충분한 이론학습과 이론을 활용한 여러 퍼블리싱 예제 제작 경험을 쌓기 바랍니다.


📔 학습방법 안내

제가 생각하는 '퍼블리싱 실력 키우기' 방법은... 

실전 퍼블리싱 예제 제작할 때 처음에 어떻게 만드는지 부담없이 시청만 하시고, 두번째는 보면서 따라하면서 만드시고, 세번째는 안보고 스스로 하시다가 정말 생각 안날 때 영상 참고하셔서 제작하세요. 그래야만 진짜 자신의 실력으로 남습니다.

※ 퍼블리싱 실전예제 제작 공부하실 때 추천 학습방법

  • 1회차 - 그냥 아무생각 없이 영상을 끝까지 봅니다.(제작하는 흐름 정도 이해하시는게 목적)
  • 2회차 - 영상 보면서 따라하다가 멈추고 본인 코드 작성하고 브라우저 확인하고 다시 재생하고 이런 식으로 하세요.
  • 3회차 - 영상을 보지 않고 소스 파일(이미지, 텍스트)만 준비해서 영상의 도움없이 스스로 만드세요. (정말 생각 안나면 잠깐 보시구요.)


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

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

Q. 실전 예제  제작하면서 이론 파트에 설명이 안된 부분이 있는데요? 
A. 지금 수강하시는 과정은 입문 초급 과정이 아닙니다. 중급 가까이 또는 중급 레벨의 퍼블리싱 강의입니다. 입문 초급을 위한 기본 이론 영상을 올려놓은 것은 혹시 부족하다고 생각하시는 이론이 있으면 참고하라는 의미로 올린 영상들입니다.  실전 예제 제작 영상에서 이론 파트에 없는 내용이 나오는데 이론 파트에 없는 내용이 예제 제작에서 왜 나오냐고 질문글을 올리시면 제가 답변 드리기가 곤란합니다.

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

Q. 반응형 웹사이트 제작 강의가 있던데 어떤 것을 먼저 들어야 하나요? 
A. 반응형 웹사이트 전체를 제작하는 과정을 듣기 전에 지금 과정에서 충분히 이론과 실전 예제 제작에 대한 실력을 높이시고 반응형 웹사이트 전체 제작 과정으로 오시는 것을 추천드립니다.
반응형 웹사이트 전체 제작 과정이라 지금 과정처럼 부분 부분 상세하게 다루기가 어렵기 때문에 실전 퍼블리싱 과정에서 충분히 훈련되고 웹사이트 전체 제작과정으로 오시면 이해도가 훨씬 높을거라 생각됩니다.


📔 업데이트 안내

[업데이트 안내, 학습방법 안내] HTML+CSS+JQUERY 포트폴리오 퍼블리싱 필수 이론 및 실전 예제 제작 강좌

코딩웍스, HTML+CSS+JQUERY 포트폴리오 퍼블리싱 필수 이론 및 실전 예제 제작 강좌를 수강해주셔 감사드립니다. 그리고 앞으로 수강하실 많은 분들께도 미리 감사드립니다..^^

본 강좌는 당분간 지속적으로 업데이트가 있을 예정입니다. 업데이트가 있으면 '인프런 새소식'을 통해 알림을 드립니다. 최종 업데이트 전까지 기존에 있는 이론과 실전 퍼블리싱을 잘 따라오시면 서 제작하시기 바랍니다.^^


📔 섹션 4. HTML+CSS 실전 퍼블리싱 제작(Part 2) - 업데이트 완료(2020.08.18)

  • 01.가상클래스 hover 활용한 실전 예제 제작 (기본형 드롭다운 네비게이션)
  • 02.before after 가상클래스 활용한 실전 예제 제작 (네비게이션 호버이펙트 - Border)
  • 03.before after 가상클래스 활용한 실전 예제 제작 (네비게이션 호버이펙트 - content attr)
  • 04.before after 가상클래스 활용한 실전 예제 제작 (네비게이션 호버이펙트 – Rotate)
  • 05.라디오버튼과 체크박스를 커스텀 체크박스로 스타일링 (배경이미지를 사용)
  • 06.라디오버튼과 체크박스를 커스텀 체크박스로 스타일링 (폰트어썸 아이콘을 사용)
  • 07.순서 체크 가상클래스 활용한 실전 예제 제작 (개인 프로필 카드 UI 호버 이펙트)
  • 08.폼 관련 가상클래스를 활용한 실전 퍼블리싱 (배경 이미지 풀스크린 검색창)
  • 09.폼 관련 가상클래스를 활용한 실전 퍼블리싱 (로그인 화면)


📔 중고급 레벨 Jump Up 퍼블리싱 이론과 팁(Tip) 예정 목록

실전 예제  제작에 꼭 필요한 이론 뿐만 아니라 퍼블리싱 Skill Up을 위해 필요한 핵심이론과 팁을 지속적으로 업데이트합니다. Skill Up을 위해 필요한 핵심이론과 팁 영상이 업데이트가 있으면 새소식을 통해서 알려드립니다.

Skill Up을 위해 필요한 핵심이론과 팁 영상은 섹션 7에 순차적으로 업데이트됩니다. 새소식을 받지 못하셨더라도 섹션 7에 오셔서 학습이 필요한 영상이 있는지 체크해주시기 바랍니다. 화이팅~^^

※ Jump Up 퍼블리싱 이론과 팁 영상에서 공부하시는 학습 예제 완성본은 해당 영상의 우측 상단에 수업자료를 누르시면 zip파일을 받으실 수 있습니다.

섹션 7. 중고급 레벨 Jump Up 퍼블리싱 이론과 팁(Tip)

  1. 웹 퍼블리셔를 위한 크롬 확장 프로그램 추천(6가지)  (완료, 2020.05.31)
  2. a태그 앵커로 원하는 부분 부드럽게 찾아가는 2가지 방법 (제이쿼리 플러그인, CSS 속성) (완료, 2020.07.25)
  3. body 안에 또 다른 html 불러와서 보여주는 iframe 활용하기 (완료, 2020.07.25)
  4. input 태그의  :checked와 확장선택자(인접선택자, 형제선택자, 속성선택자)로 만드는 CSS 클릭 이벤트 (완료, 2020.07.25)
  5. 인라인 자바스크립트 활용하기(div에 href 링크걸기, 뒤로가기, 앞으로가기, 새로고침, 창닫기)  (완료, 2020.07.26)
  6. 퍼블리싱 강사가 강의를 잘하는지 못하는지 구분하기(display 속성의 이해도) (완료, 2020.08.2)
  7. 상대적인 폰트 크기 em 단위와 rem 단위 이해하기 (완료, 2020.08.2)
  8. 웹사이트 제작 시 반드시 알아야 하는 폴더 파일 경로 이해하기(절대주소 vs  상대주소) (예정)
  9. 제너레이터에 의존하지 않고 직접 좌표를 찾아 직접 코딩하는 이미지맵(Image Map) 제작 (예정)
  10. 요소의 앞뒤를 디자인하는 가상클래스의 꽃(before, after) 완벽 이해하기 (예정)

📔 실전 퍼블리싱 예제 업데이트 완료 목록

  1. 탭 메뉴 콘텐츠 퍼블리싱 with JQUERY (스타일 01) (완료, 2020.05.30)
  2. 퍼블리셔로서 꼭! 알아야 하는 자바스크립트, 변수(var)와 조건문(if) - 20세 성인 체크 (완료, 2020.06.02)
  3. 자바스크립트 변수와 조건문을 이용한 별점 주기 실전 퍼블리싱 with jQuery (완료, 2020.06.02)
  4. 비주얼 스튜디오 코드(Visual Studio Code)와 Emmet 사용법 (완료, 2020.06.05)
  5. 탭 메뉴 콘텐츠- 스타일 02(프로토타입) with jQuery  (완료, 2020.06.07)
  6. 탭 메뉴 콘텐츠- 스타일 02(실전 제작) with jQuery  (완료, 2020.06.07)
  7. 마우스 올리면 배경이미지 변경하기 퍼블리싱 프로토타입 with jQuery (완료, 2020.06.07)
  8. 쇼핑몰 아이템 UI 호버 이펙트 with jQuery (완료, 2020.06.07)
  9. 코딩웍스 강의특징 어코디언 콘텐츠 슬라이드 with jQuery (완료, 2020.06.10)

💡 섹션 6. 로그인 화면 UI 디자인 (완료, 2020.06.20)

  1. [Part 01] 로그인 화면 UI 디자인(제작노트, HTML 구조 설계하기, 파비콘 넣기)
  2. [Part 02] 로그인 화면 UI 디자인(CSS 디자인 - 크기조절하기 및 배치하기)
  3. [Part 03] 로그인 화면 UI 디자인(CSS 디자인 - 버튼 디자인 및 체크박스와 Label)
  4. [Part 04] 로그인 화면 UI 디자인(CSS 디자인 - before after로 구분선 디자인)

로그인 UI 디자인 실전 웹페이지 퍼블리싱 영상이 업데이트 되었습니다. 이번에 업데이트된 강의 영상은 섹션 7에 총 4개 파트로 되어 있습니다. 다운로드할 수 있도록 완성본도 업로드 되었습니다.  연습하실 때 완성본을 다운로드 하시고 index.html과 style.css를 삭제하시고 영상 처음부터 천천히 따라오시면 됩니다.

로그인 UI 디자인 퍼블리싱은 제이쿼리 상호작용은 없는 정적인 퍼블리싱이지만 CSS의 핵심 속성인 박스모델, 보더, 백그라운드 이미지, 색상, checkbox와 label 사용하기 등 전반에 걸친 모든 CSS 속성을 공부하시기에는 최적의 예제라고 생각됩니다.


💡 Pure CSS 콘텐츠 슬라이더 프로토타입 (완료, 2020.06.16)

  • 자바스크립트 또는 제이쿼리를 사용하지 않은 순수 CSS 제작하는 풀스크린 탭 메뉴 콘텐츠
  • 배경색을 이용한 프로토타입 제작 후 배경이미지와 텍스트 애니메이션을 활용한 응용 실전 예제

▼ Pure CSS 콘텐츠 슬라이더 프로토타입 01 (풀스크린 탭 콘텐츠 슬라이더 프로토타입)

▼ Pure CSS 콘텐츠 슬라이더 프로토타입 02 (풀스크린 탭 콘텐츠 슬라이더 응용)


💡 비디오 백그라운드를 활용한 랜딩페이지 실전 퍼블리싱 with jQuery (완료, 2020.06.14)

    • 비디오를 배경으로 사용해서 body에 가득 채우고 은은한 배경 음악 깔고 볼륨 조절하기
    • 시작할 때 콘텐츠에 서서히 나타나는 CSS 키프레임 애니메이션 만들기
    • 구글 웹폰트로 다양하게 텍스트 서식 꾸미기, CSS로 예쁜 버튼 디자인 만들기
    • 풀스크린 네비게이션 작동시키는 애니메이션 햄버거 버튼 CSS로 만들기
    • 제이쿼리로 풀스크린 네비게이션 띄우기(toggleClass, fadeToggle)
    • 가상클래스 :before로 비디오 프레임에 그라디언트 오버레이 씌우기
    • 완성본 미리보기 : https://youtu.be/tuVTiZtii0s
    • 완성본 제작노트 : https://youtu.be/LcIKADuM7TA


    ▼ 탭 메뉴 콘텐츠 퍼블리싱 with JQUERY (스타일 01) (완료)


    ▼ 퍼블리셔라로서 꼭! 알아야 하는 자바스크립트, 변수(var)와 조건문(if) - 20세 성인 체크 (완료)

    • 자바스크립트 변수(var)와 조건문(if)의 개념이해 수업

    ▼ 자바스크립트 변수와 조건문을 이용한 별점 주기 실전 퍼블리싱 with jQuery (완료)

    • 자바스크립트 변수(var)와 조건문(if)의 개념을 활용한 실전 퍼블리싱
    • 제이쿼리 메서드 : addClass() removeClass() text() html() val() prevAll() nextAll() index()

    ▼ 비주얼 스튜디오 코드(Visual Studio Code)와 Emmet 사용법 (완료)

    ▼ 탭 메뉴 콘텐츠 퍼블리싱(스타일 02) with jQuery (완료)

    • 검색창 placeholder  텍스트 디자인 변경
    • 검색창 클릭하면(:focus) placeholder 서서히 사라지고 클릭 빠지면 서서히 나타나게 하기
    • CSS로 탭 메뉴 콘텐츠 디자인 하기(특히 보더 디자인)
    • 제이쿼리 탭 메뉴 콘텐츠 기능을 위한 스크립트 작성하기 - addClass(), removeClass(), siblings(), 사용자 정의속성 data-alt, var, attr() 메서드로 속성 가져오기
    • 프로토타입 제작과 실전 제작 2개로 나뉘어 있으니, 프로토타입 먼저 학습하시고 실전 영상 보세요.

    ▼ 마우스 올리면 배경이미지 변경되는 퍼블리싱 프로토타입 with jQuer (완료)

    • CSS로 배경이미지 넣기(backgorund 속성)
    • 가상클래스 :before의 content: attr()을 활용해서 채워지는 텍스트 네비게이션 만들기
    • 제이쿼리 mouseenter와 mouseleave로 사용자 정의 속성에 있는 값을 attr()로 불러와서 CSS로 배경이미지 교체하기

    ▼ 쇼핑몰 아이템 UI 호버 이펙트 with jQuery (완료)

    • CSS로 부모요소 자식요서 배치하고 상세 디자인하기
    • 마우스 오버하면 상품상세 보여주면서 CSS filter 속성으로 이미지 블러 처리
    • Size 선택과 Color 선택하면 디자인 변경하기(addClass, removeClass)
    • 좋아요 버튼 누르면 가상클래스 :before의 content 내용 폰트어썸 유니코드로 변경하기(toggleClass)

    ▼ 코딩웍스 강의특징 어코디언 콘텐츠 슬라이드 with jQuery (완료)

    • flex로 수평 수직 중앙배치하기
    • 가상클래스 :after로 카톡 로고 원하는 위치에 정확히 위치시키기
    • 타이틀에 오버되면 디자인 변경되면서 화살표 폰트어썸 아이콘 디자인 변경되면서 회전시키기
    • 타이틀을 클릭하면 타이틀의 디자인이 변경되면서 해당되는 콘텐츠를 슬라이딩으로 보이기(addClass, removeClass, slideDown, slideUp)
    • 타이틀 클릭하면 오른쪽에 이미지 타이틀의 사용자 정의 속성에 지정된 data-image의 값을 attr()을 통해 교체하기


    💡 HTML+CSS 실전 퍼블리싱 강좌 결과물 미리보기

    ▼ 01. CSS 키프레임 애니메이션 활용한 실전 예제 제작 01(원형 크기 변경 로딩 애니메이션)

    ▼ 02. CSS 키프레임 애니메이션 활용한 실전 예제 제작 02(사각형 좌표 변경 로딩 애니메이션)

    ▼ 03. CSS 키프레임 애니메이션 활용한 실전 퍼블리싱 03(더블 보더 레디어스 애니메이션)

    ▼ 04. 가상클래스 hover 활용한 실전 퍼블리싱 01(오버하면 상세설명 나타나는 상품목록)

    ▼ 05. 가상클래스 hover 활용한 실전 퍼블리싱 02(마우스 오버되면 나타나는 툴팁 만들기)

    ▼ 06. 가상클래스 hover 활용한 실전 퍼블리싱 03(오버한 메뉴 외 나머지 흐려지는 네비게이션)

    ▼ 07. 가상클래스 hover 활용한 실전 퍼블리싱 04(위아래로 분리되는 호버 네비게이션 이펙트)

    ▼ 08. 가상클래스 hover 활용한 실전 퍼블리싱 05(앱 UI 레이어 3D 호버 에니메이션)

    ▼ 09. 가상클래스 before after 활용한 실전 퍼블리싱 01(before after 기본 사용법)

    ▼ 10. 가상클래스 before after 활용한 실전 퍼블리싱 02(애니메이션 호버 네비게이션 이펙트)

    ▼ 11. 가상클래스 before after 활용한 실전 퍼블리싱 03(SNS 아이콘 애니메이션)

    ▼ 12. 가상클래스 before after 활용한 실전 퍼블리싱 04(content attr을 활용한 텍스트 네비게이션)

    ▼ 13. 입력 필드 디자인을 꾸미는 가상클래스 활용한 실전 퍼블리싱(폰트어썸 사용한 입력 필드)

    ▼ 14~15. 순서 체크 가상클래스 활용한 실전 퍼블리싱 01(애니메이션 스킬 프로그래스, delay)

    ▼ 16. 순서 체크 가상클래스 활용한 실전 퍼블리싱 03(Flexbox 활용한 갤러리 이미지 어코디언 네비게이션)

    ▼ 17. 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 01(애니메이션 햄버거 버튼 만들기)

    ▼ 18. 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 02(애니메이션 사이드메뉴 만들기)

    ▼ 19. 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 03(탭 메뉴 콘텐츠 만들기)

    ▼ 20. 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 04(탭 콘텐츠 - Opacity)

    ▼ 21. 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 05(탭 콘텐츠 – Opacity 응용)

    ▼ 22. 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 06(탭 콘텐츠 - Slide)

    ▼ 23. 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 04(Testimonial 탭 슬라이더)


    👨🏼‍🏫 강사소개

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

    💡 커리큘럼

    ※ 기본적인 퍼블리싱 이론을 알고 있으면 실전 퍼블리싱 제작을 학습하셔도 됩니다.
    ※ 실전 퍼블리싱 제작 학습하다가 필요할 때 필수 이론을 참고하시면 됩니다.

    섹션 0. [미리보기] HTML+CSS 실전 퍼블리싱 예제 완성본 미리보기

    • [완성본 미리보기] HTML+CSS 실전 퍼블리싱 제작
    • [완성본 제작노트] HTML+CSS 실전 퍼블리싱 제작
    • [완성본 제작노트] HTML+CSS 실전 퍼블리싱 제작 with jQuery
    • [완성본 제작노트] 비디오 백그라운드를 활용한 랜딩페이지 실전 퍼블리싱 with jQuery

    섹션 1. 블라켓츠(Brackets) 및 비주얼 스튜디오 코드(Visual Studio Code) 사용법

    • 블라켓츠(Brackets) 사용법 및 단축키 활용
    • 블라켓츠(Brackets)에서 에밋(Emmet) 사용법 및 단축키 활용)
    • 블라켓츠(Brackets) 실시간 미리보기(폴더 구조 만들기)
    • 비주얼 스튜디오 코드(Visual Studio Code) 사용법 및 환경설정
    • 비주얼 스튜디오 코드(Visual Studio Code)에서 에밋(Emmet) 사용법

    섹션 2. 섹션01. HTML+CSS+JQUERY 퍼블리싱 필수 이론

    • HTML5 핵심 태그 사용법(문단, 텍스트 서식)
    • HTML5 핵심 태그 사용법(목록 만들기)
    • HTML5 핵심 태그의 사용법(링크, 이미지)
    • CSS 핵심이론(CSS란, CSS 링크하기, 기본 문법)
    • CSS 핵심이론(선택자, 선택자 적용 우선순위)
    • CSS 서식관련 속성(텍스트 스타일)
    • CSS 서식관련 속성(목록 스타일)
    • CSS 자손선택자 vs 자식선택자, 부모요소 vs 자식요소
    • 상세 디자인을 위한 CSS 박스모델(border, border-radius)
    • 상세 디자인을 위한 CSS 박스모델(width, height, padding, margin, box-sizing)
    • 상세 디자인을 위한 CSS 박스모델(box-shadow, text-shadow)
    • 퍼블리싱의 모든 것! HTML 인라인 요소, 블록 요소, 인라인블록 요소
    • CSS로 HTML 가로 배치하기(float, overflow, clear, inline-block)
    • HTML5 시멘틱 태그로 CSS 레이아웃 설계하기(부모요소, 자식요소, 형제요소)
    • CSS 포지션 속성 완벽하게 이해하기(1편) – 부모요소 vs 자식요소
    • CSS 포지션 속성 완벽하게 이해하기(2편) – 자동으로 수평 수직 중앙 위치시키기
    • CSS 포지션 속성 완벽하게 이해하기(3편) – 부모요소 밖으로 위치시키기
    • CSS 필수 가상클래스 – 마우스 오버 효과(hover, transition)
    • CSS 필수 가상클래스 – 순서를 만드는 가상클래스 (nth-child, nth-of-type)
    • CSS 필수 가상클래스 – 순서를 만드는 가상클래스 (first-child, last-child)
    • 제이쿼리(jQuery) 시작하기(폴더구조, 링크방법)
    • 제이쿼리(jQuery) 필수 핵심이론(기본 구문 만들기, 선택자)
    • 제이쿼리(jQuery) 필수 핵심이론(함수)
    • 제이쿼리(jQuery) 필수 핵심이론(메서드)
    • 제이쿼리(jQuery) 필수 핵심이론(효과 메서드 –slideDown, slideUp, fadeIn, fadeOut)
    • 제이쿼리(jQuery) 필수 핵심이론(클래스 제어 메서드 – addClass, removeClass, toggleClass)
    • 제이쿼리(jQuery) 필수 핵심이론(요소탐색 메서드 – children, siblings)

    섹션 3. HTML+CSS+JQUERY 실전 퍼블리싱 제작

    • CSS 키프레임 애니메이션 활용한 실전 퍼블리싱 01(원형 크기 변경 로딩 애니메이션)
    • CSS 키프레임 애니메이션 활용한 실전 퍼블리싱 02(사각형 좌표 변경 로딩 애니메이션)
    • CSS 키프레임 애니메이션 활용한 실전 퍼블리싱 03(더블 보더 레디어스 애니메이션)
    • 가상클래스 hover 활용한 실전 퍼블리싱 01(오버하면 상세설명 나타나는 상품목록)
    • 가상클래스 hover 활용한 실전 퍼블리싱 02(마우스 오버되면 나타나는 툴팁 만들기)
    • 가상클래스 hover 활용한 실전 퍼블리싱 03(오버한 메뉴 외 나머지 흐려지는 네비게이션)
    • 가상클래스 hover 활용한 실전 퍼블리싱 04(위아래로 분리되는 호버 네비게이션 이펙트)
    • 가상클래스 hover 활용한 실전 퍼블리싱 05(앱 UI 레이어 3D 호버 에니메이션)
    • 가상클래스 before after 활용한 실전 퍼블리싱 01(before after 기본 사용법)
    • 가상클래스 before after 활용한 실전 퍼블리싱 02(애니메이션 호버 네비게이션 이펙트)
    • 가상클래스 before after 활용한 실전 퍼블리싱 03(SNS 아이콘 애니메이션)
    • 가상클래스 before after 활용한 실전 퍼블리싱 04(content attr을 활용한 텍스트 네비게이션)
    • 입력 필드 디자인을 꾸미는 가상클래스 활용한 실전 퍼블리싱(폰트어썸 사용한 입력 필드)
    • 순서 체크 가상클래스 활용한 실전 퍼블리싱 01(애니메이션 스킬 프로그래스)
    • 순서 체크 가상클래스 활용한 실전 퍼블리싱 02(애니메이션 스킬 프로그래스, delay)
    • 순서 체크 가상클래스 활용한 실전 퍼블리싱 03(Flexbox 활용한 갤러리 이미지 어코디언 네비게이션)
    • 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 01(애니메이션 햄버거 버튼 만들기)
    • 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 02(애니메이션 사이드메뉴 만들기)
    • 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 03(탭 메뉴 콘텐츠 만들기)
    • 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 04(탭 콘텐츠 - Opacity)
    • 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 05(탭 콘텐츠 – Opacity 응용)
    • 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 06(탭 콘텐츠 - Slide)
    • 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 07(Testimonial 탭 슬라이더)
    • Pure CSS 콘텐츠 슬라이더 프로토타입 01 (풀스크린 탭 콘텐츠 슬라이더 프로토타입)
    • Pure CSS 콘텐츠 슬라이더 프로토타입 02 (풀스크린 탭 콘텐츠 슬라이더 응용)

    섹션 4. HTML+CSS 실전 퍼블리싱 제작 with JQUERY

    • HTML+CSS 실전 퍼블리싱 제작 with JQUERY - 탭 메뉴 콘텐츠(스타일 01)
    • 퍼블리셔라로서 꼭! 알아야 하는 자바스크립트, 변수(var)와 조건문(if) - 20세 성인 체크
    • 자바스크립트 변수와 조건문을 이용한 별점 주기 실전 퍼블리싱 with JQUERY
    • 탭 메뉴 콘텐츠- 스타일 02(프로토타입) with jQuery
    • 탭 메뉴 콘텐츠- 스타일 02(실전 제작) with jQuery
    • 마우스 올리면 배경이미지 변경하기 with jQuery
    • [Part 01] 쇼핑몰 아이템 UI 호버 이펙트 - 와이어프레임 설계, 중요 기능 제작
    • [Part 02] 쇼핑몰 아이템 UI 호버 이펙트 - 세부 HTML 작성 및 상세 CSS 디자인
    • [Part 03] 쇼핑몰 아이템 UI 호버 이펙트 - 제이쿼리 상호작용 만들기
    • [Part 01] 어코디언 콘텐츠 슬라이드 - 와이어프레임 설계
    • [Part 02] 어코디언 콘텐츠 슬라이드 - 상세 내용 퍼블리싱
    • [Part 03] 어코디언 콘텐츠 슬라이드 - 상호작용 제이쿼리

    섹션 5. 비디오 백그라운드를 활용한 랜딩페이지 실전 퍼블리싱 with jQuery

    • [Part 01] 비디오 백그라운드를 활용한 랜딩페이지 - 웹폰트, 동영상 제어하기, 로고
    • [Part 02] 비디오 백그라운드를 활용한 랜딩페이지 - 애니메이션 콘텐츠 제작
    • [Part 03] 비디오 백그라운드를 활용한 랜딩페이지 - 풀스크린 네비게이션(트리거, 모달 디자인)
    • [Part 04] 비디오 백그라운드를 활용한 랜딩페이지 - 풀스크린 네비게이션(모달창 제이쿼리 상호작용)
    • [Part 05] 비디오 백그라운드를 활용한 랜딩페이지 - 비디오 오버레이 씌우기, 오디오 넣고 볼륨 조절

    섹션 6. 실전 웹페이지 퍼블리싱 - 로그인 화면 UI 디자인

    • [Part 01] 로그인 화면 UI 디자인(제작노트, HTML 구조 설계하기, 파비콘 넣기)
    • [Part 02] 로그인 화면 UI 디자인(CSS 디자인 - 크기조절하기 및 배치하기)
    • [Part 03] 로그인 화면 UI 디자인(CSS 디자인 - 버튼 디자인 및 체크박스와 Label)
    • [Part 04] 로그인 화면 UI 디자인(CSS 디자인 - before after로 구분선 디자인)

    섹션 7. 중고급 레벨 Jump Up 퍼블리싱 이론과 팁(Tip)

    • 웹 퍼블리셔를 위한 크롬 확장 프로그램 추천(6가지)
    • a태그 앵커 만들고 2가지 방식으로 Smooth Scrolling 하기(제이쿼리 플러그인, CSS 속성)
    • body 안에 또 다른 html 불러오는 iframe 활용하기
    • input과 checked를 활용한 확장선택자(인접선택자, 형제선택자, 속성선택자)
    • 인라인 자바스크립트 활용하기(onclick 자바스크립트 이벤트)
    • 퍼블리싱 강사가 강의를 잘하는지 못하는지 구분하기(display 속성의 이해도)
    • 상대적인 폰트 크기 em 단위와 rem 단위 이해하기
    • 부모요소의 값을 상속하는 inherit 이해하기
    • CSS calc() 산술식(사칙연산)
    • CSS에서 변수 var() 사용하기
    • 가상클래스의 꽃(:before :after) 사용법
    • 하드코딩으로 이미지맵(image map) 만들기

    섹션 8. [다운로드] 예제 제작에 사용된 소스파일 및 완성본

    • [완성본] HTML+CSS 실전 퍼블리싱
    • [완성본] HTML+CSS 실전 퍼블리싱 with jQuery
    • [완성본] 비디오 백그라운드를 활용한 랜딩페이지 실전 퍼블리싱 with jQuery
    • [완성본] 실전 웹페이지 퍼블리싱 - 로그인 화면 UI 디자인
    • [다운로드] 비주얼 스튜디오 코드(Visual Studio Code) 및 에밋(Emmet)

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

    도움 되는 분들

    • 웹 코딩을 처음 시작하시는 분
    • 웹사이트 유지보수 수정보완을 자체적으로 하고자 하시는 분
    • 웹디자인에서 웹퍼블리셔로 직업을 전환하거나 HTML+CSS+JQUERY 퍼블리싱 강화하려는 분
    • 웹 퍼블리싱에 대한 이해도를 높이고 싶은 웹 기획자
    • 프론트엔드 퍼블리싱에 대한 이해도를 높이고 싶은 개발자
    • 웹디자인 기능사 실기시험을 준비하시는 분

    선수 지식

    • 기본적인 컴퓨터 활용능력과 인터넷 브라우저 사용능력
    • 코딩(Coding)을 위한 기본적인 영어타자 능력

    지식공유자 소개

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

    교육과정

    모두 펼치기 115 강의 35시간 11분
    섹션 1. 블라켓츠(Brackets) 및 비주얼 스튜디오 코드(Visual Studio Code) 사용법
    5 강의 152 : 29
    섹션 2. HTML+CSS+JQUERY 퍼블리싱 필수 이론
    27 강의 496 : 01
    HTML5 핵심 태그 사용법(문단, 텍스트 서식)
    19 : 08
    HTML5 핵심 태그 사용법(목록 만들기)
    11 : 08
    HTML5 핵심 태그의 사용법(링크, 이미지)
    23 : 10
    CSS 핵심이론(CSS란, CSS 링크하기, 기본 문법)
    21 : 31
    CSS 핵심이론(선택자, 선택자 적용 우선순위)
    23 : 20
    CSS 서식관련 속성(텍스트 스타일)
    27 : 47
    CSS 서식관련 속성(목록 스타일)
    11 : 38
    CSS 자손선택자 vs 자식선택자, 부모요소 vs 자식요소
    12 : 10
    상세 디자인을 위한 CSS 박스모델(border, border-radius)
    25 : 06
    상세 디자인을 위한 CSS 박스모델(width, height, padding, margin, box-sizing)
    21 : 43
    상세 디자인을 위한 CSS 박스모델(box-shadow, text-shadow)
    17 : 43
    퍼블리싱의 모든 것! HTML 인라인 요소, 블록 요소, 인라인블록 요소
    23 : 16
    CSS로 HTML 가로 배치하기(float, overflow, clear, inline-block)
    34 : 20
    HTML5 시멘틱 태그로 CSS 레이아웃 설계하기(부모요소, 자식요소, 형제요소)
    27 : 58
    CSS 포지션 속성 완벽하게 이해하기(1편) – 부모요소 vs 자식요소
    11 : 09
    CSS 포지션 속성 완벽하게 이해하기(2편) – 자동으로 수평 수직 중앙 위치시키기
    20 : 48
    CSS 포지션 속성 완벽하게 이해하기(3편) – 부모요소 밖으로 위치시키기
    14 : 19
    CSS 필수 가상클래스 – 마우스 오버 효과(hover, transition)
    15 : 07
    CSS 필수 가상클래스 – 순서를 만드는 가상클래스 (nth-child, nth-of-type)
    12 : 53
    CSS 필수 가상클래스 – 순서를 만드는 가상클래스 (first-child, last-child)
    16 : 23
    제이쿼리(jQuery) 시작하기(폴더구조, 링크방법)
    12 : 59
    제이쿼리(jQuery) 필수 핵심이론(기본 구문 만들기, 선택자)
    17 : 35
    제이쿼리(jQuery) 필수 핵심이론(함수)
    11 : 42
    제이쿼리(jQuery) 필수 핵심이론(메서드)
    04 : 46
    제이쿼리(jQuery) 필수 핵심이론(효과 메서드 –slideDown, slideUp, fadeIn, fadeOut)
    21 : 01
    제이쿼리(jQuery) 필수 핵심이론(클래스 제어 메서드 – addClass, removeClass, toggleClass)
    09 : 04
    제이쿼리(jQuery) 필수 핵심이론(요소탐색 메서드 – children, siblings)
    28 : 17
    섹션 3. HTML+CSS 실전 퍼블리싱 제작(Part 1)
    26 강의 505 : 00
    CSS 키프레임 애니메이션 활용한 실전 예제 제작 01(원형 크기 변경 로딩 애니메이션)
    10 : 12
    CSS 키프레임 애니메이션 활용한 실전 예제 제작 02(사각형 좌표 변경 로딩 애니메이션)
    16 : 10
    CSS 키프레임 애니메이션 활용한 실전 퍼블리싱 03(더블 보더 레디어스 애니메이션)
    27 : 49
    가상클래스 hover를 제대로 이해하는 기본형 드롭다운 네비게이션
    17 : 02
    가상클래스 hover 활용한 실전 퍼블리싱 01(오버하면 상세설명 나타나는 상품목록)
    14 : 40
    가상클래스 hover 활용한 실전 퍼블리싱 02(마우스 오버되면 나타나는 툴팁 만들기)
    20 : 46
    가상클래스 hover 활용한 실전 퍼블리싱 03(오버한 메뉴 외 나머지 흐려지는 네비게이션)
    13 : 19
    가상클래스 hover 활용한 실전 퍼블리싱 04(위아래로 분리되는 호버 네비게이션 이펙트)
    26 : 43
    가상클래스 hover 활용한 실전 퍼블리싱 05(앱 UI 레이어 3D 호버 에니메이션)
    18 : 01
    가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 01(before after 기본 사용법)
    09 : 05
    가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 02(보더 애니메이션 네비게이션 호버 이펙트)
    17 : 14
    가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 03(SNS 아이콘 애니메이션)
    22 : 08
    가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 04(content attr을 활용한 텍스트 네비게이션)
    28 : 06
    입력 필드 디자인을 꾸미는 가상클래스 활용한 실전 퍼블리싱(폰트어썸 사용한 입력 필드)
    28 : 25
    순서 체크 가상클래스 활용한 실전 퍼블리싱 01(애니메이션 스킬 프로그래스)
    23 : 02
    순서 체크 가상클래스 활용한 실전 퍼블리싱 02(애니메이션 스킬 프로그래스, delay)
    14 : 09
    순서 체크 가상클래스 활용한 실전 퍼블리싱 03(Flexbox 활용한 갤러리 이미지 어코디언 네비게이션)
    31 : 08
    확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 01(애니메이션 햄버거 버튼 만들기)
    13 : 34
    확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 02(애니메이션 사이드메뉴 만들기)
    11 : 41
    확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 03(탭 메뉴 콘텐츠 만들기)
    24 : 08
    확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 04(탭 콘텐츠 - Opacity)
    10 : 11
    확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 05(탭 콘텐츠 – Opacity 응용)
    16 : 39
    확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 06(탭 콘텐츠 - Slide)
    17 : 09
    확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 07(Testimonial 탭 슬라이더)
    26 : 57
    24.Pure CSS 콘텐츠 슬라이더 프로토타입 01 (풀스크린 탭 콘텐츠 슬라이더 프로토타입)
    18 : 28
    25.Pure CSS 콘텐츠 슬라이더 프로토타입 02 (풀스크린 탭 콘텐츠 슬라이더 응용)
    28 : 14
    섹션 4. HTML+CSS 실전 퍼블리싱 제작(Part 2)
    9 강의 180 : 56
    가상클래스 hover 활용한 실전 예제 제작 (기본형 드롭다운 네비게이션)
    17 : 02
    before after 가상클래스 활용한 실전 예제 제작 (네비게이션 호버이펙트 - Border)
    12 : 08
    before after 가상클래스 활용한 실전 예제 제작 (네비게이션 호버이펙트 - content attr)
    18 : 52
    before after 가상클래스 활용한 실전 예제 제작 (네비게이션 호버이펙트 – Rotate)
    10 : 53
    라디오버튼과 체크박스를 커스텀 체크박스로 스타일링 (배경이미지를 사용)
    24 : 15
    라디오버튼과 체크박스를 커스텀 체크박스로 스타일링 (폰트어썸 아이콘을 사용)
    18 : 04
    순서 체크 가상클래스 활용한 실전 예제 제작 (개인 프로필 카드 UI 호버 이펙트)
    29 : 53
    폼 관련 가상클래스를 활용한 실전 퍼블리싱 (배경 이미지 풀스크린 검색창)
    24 : 10
    폼 관련 가상클래스를 활용한 실전 퍼블리싱 (로그인 화면)
    25 : 39
    섹션 5. HTML+CSS 실전 퍼블리싱 제작 with JQUERY
    12 강의 324 : 42
    탭 메뉴 콘텐츠(스타일 01) with JQUERY
    39 : 41
    퍼블리셔라로서 꼭! 알아야 하는 자바스크립트, 변수(var)와 조건문(if) - 20세 성인 체크
    24 : 31
    자바스크립트 변수와 조건문을 이용한 별점 주기 실전 퍼블리싱 with JQUERY
    38 : 10
    탭 메뉴 콘텐츠- 스타일 02(프로토타입) with jQuery
    27 : 21
    탭 메뉴 콘텐츠- 스타일 02(실전 제작) with jQuery
    44 : 53
    마우스 올리면 배경이미지 변경하기 with jQuery
    30 : 48
    [Part 01] 쇼핑몰 아이템 UI 호버 이펙트 - 와이어프레임 설계, 중요 기능 제작
    20 : 22
    [Part 02] 쇼핑몰 아이템 UI 호버 이펙트 - 세부 HTML 작성 및 상세 CSS 디자인
    35 : 36
    [Part 03] 쇼핑몰 아이템 UI 호버 이펙트 - 제이쿼리 상호작용 만들기
    10 : 16
    [Part 01] 어코디언 콘텐츠 슬라이드 - 와이어프레임 설계
    15 : 36
    [Part 02] 어코디언 콘텐츠 슬라이드 - 상세 내용 퍼블리싱
    22 : 04
    [Part 03] 어코디언 콘텐츠 슬라이드 - 상호작용 제이쿼리
    15 : 24
    섹션 6. 비디오 백그라운드를 활용한 랜딩페이지 실전 퍼블리싱 with jQuery
    5 강의 93 : 59
    [Part 01] 비디오 백그라운드를 활용한 랜딩페이지 - 웹폰트, 동영상 제어하기, 로고
    18 : 01
    [Part 02] 비디오 백그라운드를 활용한 랜딩페이지 - 애니메이션 콘텐츠 제작
    31 : 30
    [Part 03] 비디오 백그라운드를 활용한 랜딩페이지 - 풀스크린 네비게이션(트리거, 모달 디자인)
    22 : 24
    [Part 04] 비디오 백그라운드를 활용한 랜딩페이지 - 풀스크린 네비게이션(모달창 제이쿼리 상호작용)
    09 : 08
    [Part 05] 비디오 백그라운드를 활용한 랜딩페이지 - 비디오 오버레이 씌우기, 오디오 넣고 볼륨 조절
    12 : 56
    섹션 7. 실전 웹페이지 퍼블리싱 - 로그인 화면 UI 디자인
    4 강의 47 : 37
    [Part 01] 로그인 화면 UI 디자인 (제작노트, HTML 구조 설계하기, 파비콘 넣기)
    09 : 12
    [Part 02] 로그인 화면 UI 디자인 (CSS 디자인 - 크기조절하기 및 배치하기)
    14 : 02
    [Part 03] 로그인 화면 UI 디자인 (CSS 디자인 - 버튼 디자인 및 체크박스와 Label)
    14 : 19
    [Part 04] 로그인 화면 UI 디자인 (CSS 디자인 - before after로 구분선 디자인)
    10 : 04
    섹션 9. [다운로드] 예제 제작 완성본 다운로드
    9 강의
    [완성본] HTML+CSS 실전 퍼블리싱(Part 1)
    [완성본] HTML+CSS 실전 퍼블리싱(Part 2)
    [완성본] HTML+CSS 실전 퍼블리싱 with jQuery
    [완성본] 비디오 백그라운드를 활용한 랜딩페이지 실전 퍼블리싱 with jQuery
    [완성본] 실전 웹페이지 퍼블리싱 - 로그인 화면 UI 디자인
    [다운로드] 비주얼 스튜디오 코드(Visual Studio Code) 및 에밋(Emmet)
    [다운로드] display 속성에 대한 이해도 정리 텍스트 파일
    [다운로드] px단위를 em단위로 자동 변환 엑셀 파일
    CSS에서 변수 var() 사용하기(예제파일)

    공개 일자

    2020년 5월 26일 (마지막 업데이트 일자 : 2020년 9월 7일)

    수강 후기

    4.9
    20개의 수강평
    default_profile.png
    임라빵 3달 전
    학원에서 html/css 한달 수업 듣고 혼자 무작정(;;) 클론코딩하면서 기초가 부족하다는 사실을 깨달아 인강을 결제해서 듣게 되었는데요 제가 정말 궁금해 하던걸 이론강의에서 다 배울수 있었어요ㅜㅜ 이 많은걸 말도 안되는 가격 (학원 수업료의 1/3 정도)에 배울수 있다는 사실이 놀라울 따름입니다! 예제를 따라익히면서 지금 다 익히지 못하더라도 나중에 사이트 제작할때 필요한 부분만 다시 들을 수 있는것도 너무 좋은것 같아요! 이강의는 앞으로 두고두고 듣고 잘 활용 할 수 있을것 같습니다 ㅎㅎ 앞으로 업데이트 될 강의들도 기대됩니다 ㅎㅎ 적게일하시고 많이 버세요!!
    코딩웍스(Coding Works)

    코딩웍스(Coding Works) 3달 전
    안녕하세요. 코딩웍스입니다. 부족한 강의에 너무 좋은 수강평을 주셔서 죄송하면서도 감사드립니다. 퍼블리싱 공부가 오프라인 강의도 장점이 있지만 온라인 공부는 반복해서 이해도를 높이는 장점이 있죠^^ 예제 따라하시다가 궁금하신 부분 있으시면 질문과 답변에 올려주세요. 코로나로 여러모로 힘들지만 미래를 위해 화이팅 해주세요~ 코딩웍스 수강생 여러분!! 모두 건강하시고 화이팅입니다ㅎ

    default_profile.png
    Bam Bee 3달 전
    냉정하게 말해드립니다. 모학원 150만원내고 6개월 듣느니 이 강의 5만원내고 그냥 하루2시간씩 1달만 꾹꾹 참고 들어보세요. (2회독추천) 따분한 이론같은거 없이 진짜 알맹이,핵심만 알려줍니다. (F모 온라인강의에서 첫강의에 HTML 역사하는거보고 1초컷 환불함) 보통 온라인 강의하시다 강사분들이 실수하시는게 처음에 천천히하다가 뒤에 실전파트 어려운거나오면 설명하기 귀찮은건지, 페이스가 신나서 빨라지시는건지 모르겠지만 설명하지도 않은 코드쓰면서 속도는 4배속으로 빨라지는데 여기는 처음 페이스 그대로 초심자 맞춰서 끝까지 가줍니다. 난이도? 솔직히 중학교이상 졸업했는데 이 강의가 어려우면 퍼블리싱은 이번생에 인연이 아닌걸로 생각하셔도 될 정도로 친절하고 쉽습니다. 참고로 저는 문과에 C#만알고 HTML,CSS이라는 단어자체가 처음이였습니다. 바라는점 ? 1. 원페이지라도 웹페이지 하나 전체를 퍼블리싱하는 실무가 있었으면 좋겠습니다. (쇼핑몰처럼이라던지) 2. HTML,CSS 레이아웃을 보통 하나하나 만들기보다 어디선가 퍼오던데 그런꿀팁장소도 공유해주시면 감사하겠습니다. (설령 추가결제 강의로 나오더라도 구매의사있음)
    코딩웍스(Coding Works)

    코딩웍스(Coding Works) 3달 전
    안녕하세요. 코딩웍스입니다. 부족한 강의에 너무 과찬을 해주셔서 부끄럽습니다. 제가 지금 학원에서 강의를 하고 있지만 저의 철칙은 '모르는 코드 사용하고 학생들에게 외우세요' 라고 말하는건 절대 하지 않습니다. 모르는 코드를 쓰면서 결과를 내는건 결코 바람직하지 않다고 생각합니다. 저도 모르는게 많아서 학생들에게 이해시키려고 쉬운 방식을 항상 고민하고 있습니다. 지금 강의 들으시는 '실전 퍼블리싱 예제 제작 과정'에 이어서 말씀하신 원페이지로 반응형 웹사이트 전체 제작과정을 처음부터 끝까지 함께 만드는 강의는 레코딩 중 입니다. 웹사이트 전체를 퍼블리싱하는 강의이다 보니까 영상 제작 시간이 꽤 걸리더라구요. 원래 이거 먼저 오픈하려했는데 늦어지는 바람에 실전 퍼블리싱 강좌 먼저 오픈했습니다. 아시겠지만 퍼블리싱 중에서 가장 어려운 파트가 웹사이트 전체 레이아웃을 위한 HTML 와이어프레임 설계가 제일 중요한데 제가 특히 웹사이트 전체를 퍼블리싱하는 과정을 강의하는걸 잘하는 편이거든요. 열심히 준비하고 있으니 조금만 기다려주세요. 힘든 시기지만 퍼블리싱 열심히 공부하시는 만큼 반드시 충분한 보상으로 돌아갈거라 확신합니다. 좋은 후기 다시 한번 감사드립니다.^^

    default_profile.png
    Coder 1달 전
    우연히 유투브를 통해 알게 된 후 지금까지 쭉 강의를 듣고 있는데 초심자도 이해하기 쉽게 설명해주셔서 너무 좋았습니다. 제가 다른 분들에 비해 특히 궁금한 점이 많아 질문을 많이 했었는데 그 때마다 친절하게 답변해주신 것도 감사했습니다.ㅎ 다른 부분도 어렵지만 특히 레이아웃을 잡거나 배치하는 부분이 저에게는 많이 어려웠었는데 강의를 한번 다 보고 나니 어느정도 개념이 잡히고 이해가 되기 시작했습니다. 또 실무에서 자주 쓰는 예재들 위주로 강의를 만드셔서 이것도 도움이 많이 됐습니다. 강의시간도 길어서 많은 부분을 배우고 공부할 수 있었던 것도 좋았구요. 좋은 강의 감사합니다ㅎㅎ
    코딩웍스(Coding Works)

    코딩웍스(Coding Works) 1달 전
    안녕하세요. Coder님~ 좋은 수강후기 감사드립니다. 이런 수강후기가 수강하기 전 주저하는 학생분들께 좋은 가이드가 됩니다. 또 다시 감사~^^ 질문이 많다는건 열심히 하신다는 반증이니까 좋은거죠. 화이팅입니다. 곧 Flex와 Grid 강의 오픈하니까 다음 강의에서도 뵐 수 있기를 희망햅니다~^^

    수강 문의

    • 강다혜 프로필 강다혜
      2020-09-11 63008

      안녕하세요. 제가 코딩이나 HTML을 한번도 배워본적이없지만 배워보려고 하는 초보자 입니다. 평소에 (엑슈어와같은)프로포타입 구현 화면설계 기획을 하고 있다가 퍼블리싱에 관심이 생겨 도전해보려고 합니다. 이 강의를 통해서 시작하는 것 보다는 학원다닐 여유는 없어서 신청해보려고하는데 초보자가 따라가기엔 많이 벅차진 않을까 우려되서 문의드립니다.

      코딩웍스(Coding Works)
      코딩웍스(Coding Works)
      코딩웍스(Coding Works)
      2020-09-11 70480

      안녕하세요. 다혜 님~ 코딩웍스입니다. 지금 문의하신 과정은 초급 컨텐츠와 중급 컨텐츠가 함께 있는 과정입니다. 초급 컨텐츠는.. 섹션 1. 블라켓츠(Brackets) 및 비주얼 스튜디오 코드(Visual Studio Code) 사용법 섹션 2. HTML+CSS+JQUERY 퍼블리싱 필수 이론 ※ 처음 시작하시니 brackets로 시작하시구요. Visual Studio Code는 나중에 학습하셔도 됩니다. 하나만 정해서 시작하세요. 중급 컨텐츠는... 섹션 3. HTML+CSS 실전 퍼블리싱 제작(Part 1) 부터 쭉 입니다. HTML 부터 시작하시지만 초급 컨텐츠 부분부터 차근차근 올라오시면 됩니다. 인프런에 이론 파트가 조금 부족한 부분은 저의 유튜브 채널 '코딩웍스'라고 검색하시면 거기에 좀 더 많이 있으니까 인프런에 있는 핵심이론 컨텐츠와 유튜브 컨텐츠를 병행해서 학습하시고 어느 정도 되었다 싶을 때 실전 예제 제작하는 중급 컨텐츠로 오셔서 학습하시면 됩니다. 초보자라 모든게 생소하지만 시작해 보세요. 생각보다 퍼블리싱이라는게 재밌습니다~^^ 지금 잘하는 사람도 다 이렇게 시작합니다. 관심 가지신 것 만으로도 충분히 좋은 출발입니다.

    • 임임권일 프로필 임임권일
      2020-09-10 62541

      안녕하세요 구입할려고하는데 이거배우면 뭐가좋나요?? 네이버나 카페나 활용할수있나요??

      코딩웍스(Coding Works)
      코딩웍스(Coding Works)
      코딩웍스(Coding Works)
      2020-09-10 70303

      제가 네이버나 카페에 대해 아는 바가 없어서 활용을 어떤 형태로 할지 알 수는 없습니다. 지금 문의하신 과정은 퍼블리셔로 취업을 하려하거나 퍼블리셔로 일하면서 좀 더 스킬업을 하고 싶은 분들에게 적합한 강의입니다. 네이버 카페나 블로그에 글을 쓸 때 html과 css를 알면 조금 더 그을 예쁘게 꾸미실 수 있을거에요. 하지만 문의하신 분의 의도가 단순히 네이버 카페와 블로그 활용이 중심이시라면 맞는 과정은 아니라고 생각합니다.

    • yoonsik131 프로필 yoonsik131
      2020-09-06 60825

      안녕하세요. 강사님 다른 강의를 보니까 17600원에 교재만 제공되는 강의가 있던데, 이 강의는 그 교재를 직접 강사님께서 강의하신것으로 봐도 무방할까요? 더욱이, 이 강의는 교재가 따로 배포되지 않는 건가요?

      코딩웍스(Coding Works)
      코딩웍스(Coding Works)
      코딩웍스(Coding Works)
      2020-09-06 69687

      안녕하세요. 코딩웍스입니다. PDF 교재는 제가 2년간 오프라인 학원에서 강의하던 자료를 더 보완해서 100% 제가 제작한 PDF 교재입니다. 일반 교재처럼 내용을 늘려야 하기에 불필요한 내용들이 많이 있는데 제작한 PDF 교재는 할 말만 알아야 할 것들만 정리했습니다. PDF 교재라 모바일에서도 언제나 볼 수 있는 장점도 있습니다.^^ 그리고 교재와 함께 공부하실 html 파일도 같이 있습니다. 지금 문의하신 과정과 반응형 웹사이트 제작 과정들에는 PDF 교재가 포함되어 있지 않습니다. (단, 웹디자인 기능사 실기 강의에는 PDF 교재가 포함입니다.) PDF 교재는 아래 주소로 가시면 다운로드하실 수 있습니다. https://www.inflearn.com/course/%EC%BD%94%EB%94%A9%EC%9B%8D%EC%8A%A4-%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%8B%B1-%EA%B5%90%EC%9E%AC

    다른 수강문의 보기
    지식공유자 되기
    많은 사람들에게 배움의 기회를 주고,
    경제적 보상을 받아보세요.
    지식공유참여
    기업 교육을 위한 인프런
    “인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
    자유롭게 학습하는 환경을 제공하세요.
    인프런 비즈니스