HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1) 대시보드

안녕하세요. 코딩웍스입니다.

여러분의 성원에 힘입어 무럭무럭 크고 있는 코딩웍스에서 몇 가지 안내해 드릴 내용이 있습니다.
질문&답변 게시판에 글 쓰실 때 참고사항 또는 주의사항입니다.

첫째, 질문은 최대한 구체적으로 해주세요. 질문이 구체적이지 않았을 때 충분한 답변이  좀처럼 쉽지 않습니다. 그래서 질문하실 때는 궁금하신 내용과 함께 작성 중이신 HTML, CSS, JQUERY 코딩 화면 캡처해서 첨부해 주시면 답변드리기가 훨씬 수월합니다.

둘째, 소스 코드 전체가 노출되는 글은 삼가해주세요. 예를 들어 개인 홈페이지 주소에 업로드 하고 개인 홈페이지 주소를 질문 글에 써 놓으시면 해당 URL을 통해 수강생이 아닌 사람도 전체 소스를 사용할 수 있습니다. 웹사이트 제작이다 보니 전체 소스 코드 자체가 강의에서 굉장히 중요합니다. 유료 강의인데 전체 소스 코드가 노출되는 본인의 의도와 관계없이 다른 수강생분들에게도 손해가 클 테니 이 점 꼭 주의해주세요.

무더운 여름 장마가 시작된 듯합니다.
코딩웍스 수강생 여러분! 열심히 공부하시면서 항상 건강도 잘 챙기시길 바랍니다.
감사합니다~^^

안녕하세요. 코딩웍스입니다.

HTML+CSS+JQUERY 반응형 웹사이트 포트폴리오 제작 강의가 오픈되었습니다.
이번 웹사이트 제작 강의를 통해 전체 웹사이트를 제작하는 과정을 함께 경험하시게 될거에요.
특히 이번 웹사이트 제작 강의는 반응형 웹으로 제작되기 때문에 반응형 웹 제작에 대한 충분한 이론과 실력을 갖추실 수 있습니다.
이번 반응형 포트폴리오 제작 강의는 총 18시간 30분입니다.
꽤 많은 시간 동안 진행되는 강의이므로 웹사이트 전체 제작과정을 충분한 설명과 실전 작업으로 경험하고 개인 포트폴리오 웹사이트 제작에 자신감을 갖게 됩니다.

아래 주소로 들어가시면 HTML+CSS+JQUERY 반응형 웹사이트 포트폴리오 제작 강의에 대한 상세한 내용이 있습니다.
코딩웍스 수강생 여러분~ 강의에서 만나요~^^

▼ HTML+CSS+JQUERY 반응형 웹사이트 포트폴리오 제작 강의
https://www.inflearn.com/course/반응형-웹사이트-포트폴리오-웹퍼블리싱

▼ PC 레이아웃 미리보기(Preview) 

▼ Mobile 레이아웃 미리보기(Preview) 

안녕하세요. 코딩웍스입니다.

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

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

무더위가 시작되었으니 건강 조심하시고 코딩웍스 영상 강의와 함께 퍼블리싱 공부도 열심히 해주세요.^^
감사합니다.

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

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

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

[Part 01] 로그인 화면 UI 디자인(제작노트, HTML 구조 설계하기, 파비콘 넣기)

[Part 02] 로그인 화면 UI 디자인(CSS 디자인 - 크기조절하기 및 배치하기)

[Part 03] 로그인 화면 UI 디자인(CSS 디자인 - 버튼 디자인 및 체크박스와 Label)

[Part 04] 로그인 화면 UI 디자인(CSS 디자인 - before after로 구분선 디자

안녕하세요. 코딩웍스입니다.

Pure CSS 풀스크린 탭 콘텐츠 슬라이더 프로토타입 제작 영상이 업데이트되었습니다.
자바스크립트 또는 제이쿼리를 사용하지 않고 탭 메뉴 콘테츠를 만들 수 있으면 실무에서 활용도가 정말 높습니다.

영상은 두가지인데 첫번째, 프로토타입을 먼저 만드시고 두번째로 그 프로토타입을 가지고 실전 응용을 제작하시면 됩니다.
영상은 섹션 3. HTML+CSS 실전 퍼블리싱 제작에 있습니다.

코디웍스 수강생 여러분~ 건강 조심하시고 항상 화이팅입니다~^^

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

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

안녕하세요. 코딩웍스입니다.

드디어 비디오 백그라운드 랜딩페이지 전체 제작 영상이 업데이트되었습니다.
개인 홈페이지 또는 회사 홈페이지 인트로 섹션으로 사용하시기 너무 좋습니다.
코딩웍스 수강생 여러분~!! 화이팅입니다.^^

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

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

안녕하세요. 코딩웍스입니다.
강의 영상이 또 업데이트되었습니다.

이번에 업데이트된 영상은 어코디언 콘텐츠 슬라이드 제이쿼리 실전 예제입니다.
실무에서 반드시 제작해야 하는 퍼블리싱이 탭 메뉴 콘텐츠이고, 또 하나가 바로 어코디언 콘텐츠 슬라이드입니다.
완성본 다운로드 파일도 이번 영상 업데이트 포함해서 업로드 되었습니다.

코딩웍스 수강생 여러분~!! 화이팅입니다.^^

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

• [Part 01] 어코디언 콘텐츠 슬라이드 - 와이어프레임 설계
• [Part 02] 어코디언 콘텐츠 슬라이드 - 상세 내용 퍼블리싱
• [Part 03] 어코디언 콘텐츠 슬라이드 - 상호작용 제이쿼리

안녕하세요. 코딩웍스입니다.
강의 영상이 업데이트되었습니다.

이번에 업데이트된 영상은 쇼핑몰 아이템 UI 호버 이펙트 제이쿼리 실전 예제입니다.
완성본 다운로드 파일도 이번 영상 업데이트 포함해서 업로드 되었습니다.

코딩웍스 수강생 여러분~!! 화이팅입니다.^^

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

• [Part 01] 쇼핑몰 아이템 UI 호버 이펙트 - 와이어프레임 설계, 중요 기능 제작
• [Part 02] 쇼핑몰 아이템 UI 호버 이펙트 - 세부 HTML 작성 및 상세 CSS 디자인
• [Part 03] 쇼핑몰 아이템 UI 호버 이펙트 - 제이쿼리 상호작용 만들기

안녕하세요. 코딩웍스입니다.

강의 영상이 업데이트되었습니다.
이번에 업데이트된 영상은 제이쿼리 방식의 탭 메뉴 콘텐츠 제작과 마우스 올리면 이미지 변경되는 제이쿼리 실전 예제입니다.
완성본 다운로드 파일도 이번 영상 업데이트 포함해서 업로드 되었습니다.

영상 열심히 보시고 실무에서 꼭! 활용하실 수 있었으면 합니다.

코딩웍스 수강생 여러분~!! 화이팅입니다.^^

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

1. 탭 메뉴 콘텐츠- 스타일 02(프로토타입) with jQuery
2. 탭 메뉴 콘텐츠- 스타일 02(실전 제작) with jQuery

안녕하세요. 코딩웍스입니다.

비주얼 스튜디오 코드(Visual Studio Code)와 Emmet 사용법 강좌가 업데이트 되었습니다.
비주얼 스튜디오 코드(Visual Studio Code) 사용법과 비주얼 스튜디오 코드(Visual Studio Code) 안에서 Emmet 사용법, 2가지 영상으로 되어 있습니다.

업데이트 영상 보시면서 열심히 공부하세요~^^

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

• 비주얼 스튜디오 코드(Visual Studio Code) 사용법 및 환경설정
• 비주얼 스튜디오 코드(Visual Studio Code)에서 에밋(Emmet) 사용법

안녕하세요. 코딩웍스입니다.

자바스크립트 변수와 조건문을 이용한 별점 주기 실전 퍼블리싱 제작 영상이 업데이트 되었습니다.
자바스크립트 변수와 조건문 이론 예제 영상 보시고 이거 어디다 쓰지?? 라고 생각하셨겠지만..
쓸 곳이 엄청 많습니다. 자바스크립트 변수와 조건문에 대한 이해도가 높아지시면 그 만큼 제이쿼리와 함께 만들 수 있는 것 들이 많아집니다.

업데이트된 영상은 섹션04. HTML+CSS 실전 퍼블리싱 제작 with JQUERY 에 있습니다.

코딩웍스 수강생 여러분!! 화이팅입니다~^^

안녕하세요. 코딩웍스입니다.

퍼블리셔라로서 꼭! 알아야 하는 자바스크립트, 변수(var)와 조건문(if) 이론 예제 영상이 업데이트 되었습니다.
자바스크립트라고 너무 겁먹지 마시고 부담 없이 영상 보세요.
그러면 자바스크립트 변수에 대한 개념과 조건문에 대한 이해도가 생기실거에요.

업데이트된 영상은 섹션04. HTML+CSS 실전 퍼블리싱 제작 with JQUERY 에 있습니다.

코딩웍스 수강생 여러분!! 퍼블리셔 취업을 위해 힘들어도 화이팅입니다~^^

안녕하세요. 코딩웍스입니다.

웹 퍼블리셔를 위한 크롬 확장 프로그램 추천(6가지) 영상이 업데이트 되었습니다.
퍼블리싱할 때 필수적인 크롬 확장 프로그램이라고 생각합니다.
영상 길이가 21분 정도 되니까 부담없이 보실 수 있습니다.

업데이트된 영상은 섹션 5. 중고급 레벨 Jump Up 퍼블리싱 이론과 팁(Tip)에 있습니다.

안녕하세요. 코딩웍스입니다.

제이쿼리(jquery)를 이용한 탭 메뉴 콘텐츠 제작 영상이 업데이트 되었습니다.
탭 메뉴 콘텐츠 제작은 실무에서 너무 나도 활용도가 높습니다.
퍼블리셔라면 반드시 제작해야 하는 퍼블리싱 항목입니다.

물론, CSS 인접 선택자와 가상클래스 :checked를 활용한 탭 메뉴 콘텐츠 제작도 좋습니다.
CSS 방식 또는 JQUERY 방식 모두 각장의 장점이 있으니 2가지 방식으로 모두 할 수 있으면 너무 좋습니다.

코딩웍스 수강생 여러분!! 퍼블리셔 취업을 위해 힘들어도 화이팅입니다~^^

안녕하세요. 코딩웍스입니다.

실전 퍼블리싱 제작 영상이 업데이트되었습니다.
영상 열심히 보시고 퍼블리싱 실력도 쑥쑥~ 늘리시기 바랍니다.^^
실전 퍼블리싱 예제 제작하실 때 막히거나 궁금한 점 있으면 '질문과 답변' 게시판에 글 남겨주세요.

실전 퍼블리싱 예제 1차 업데이트 목록(완료, 2020.05.28)

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

1. 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 04(탭 콘텐츠 - Opacity)
2. 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 05(탭 콘텐츠 – Opacity 응용)
3. 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 06(탭 콘텐츠 - Slide)

안녕하세요. 코딩웍스입니다.

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

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

본 강좌가 앞으로 업데이트될 내용을 간략하게 안내 드리고, 강좌를 공부하시는 추천 학습 방법을 안내해드리겠습니다.
앞으로 업데이트를 통해서 새로 만들어질 섹션입니다.

■ 중고급 레벨 Jump Up 이론

• 중고급 이론으로 가상클래스 before after 핵심이론 가이드
• CSS 키프레임 애니메이션 핵심이론 가이드
• 변경(Transform) 핵심이론 가이드(scale, rotate, skew, translate, transform-orgin 등)

■ HTML+CSS 실전 퍼블리싱 제작 with JQUERY

• 제이쿼리를 사용한 실전 퍼블리싱 실전 예제 제작입니다.
• 제이쿼리를 기반으로 상호작용을 만드는 퍼블리싱 예제이므로 중상급 퍼블리싱 예제입니다.
• ex) 네비게이션에 오버하면 각각 body 배경이미지 변경하기, 슬라이드 Up Down 어코디온 콘텐츠, 탭메뉴 만들기,  트렌지션으로 2가지 화면 전환 랜딩페이지 등

■ HTML+CSS+JQUERY 개인 포트폴리오 전체 웹페이지 퍼블리싱

• HTML+CSS 뿐만 아니라 웹페이지 전체를 제작하는 개인 포트폴리오 홈페이지 제작 퍼블리싱입니다.
• 전체 웹페이지를 제작하는 것이기 때문에 전체 강의 시간은 4시간 정도될 것이라 예상합니다.
• 개인 포트폴이오 홈페이지 제작이 필요하신 분은 강좌 보시면 연습 충분히 하시면 됩니다.
• 충분한 연습 후에 내용과 이미지 그리고 크게 벗어나지 않는 선에서 변형해서 개인 홈페이지로  사용하시기 합니다.

2020년 6월 1부터 순차적으로 업데이트될 예정입니다. 알림 보낼게요.~^^ 

주제 넘지만 마지막으로 당부드리는 말씀은.. 

실전 퍼블리싱 제작 잘 따라오셔셔 만드셨으면 두번째는 안보고 스스로 하시다가 정말 생각 안날 때 영상 참고하셔셔 공부하세요 그래야만 진짜 자신의 실력으로 남습니다.

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

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

▼ 1차 업데이트에서 앞으로 만드시게될 HTML+CSS 실전 퍼블리싱 제작 with JQUERY 퍼블리싱 미리보기 움짤