'스타트렉' 사이트 입점하고자 하는 CP 강사님들은 관리자메일로 문의해주세요!

[2018 신규] 웹퍼블리셔 실무코딩 - 대기업 및 은행 등 유명 웹사이트 메인 레이아웃 실무코딩 따라하기
1 Part 1 : 상단 디자인 - 네비게이션 및 로그인
2 전체 프리미티브 버전 레이아웃 코딩하기1 동영상다운
3 전체 프리미티브 버전 레이아웃 코딩하기2 - container1 동영상다운
4 전체 프리미티브 버전 레이아웃 코딩하기3 - 음영주기 동영상다운
5 전체 프리미티브 버전 레이아웃 코딩하기4 - 위아래 가운데 정렬 동영상다운
6 전체 프리미티브 버전 레이아웃 코딩하기5 - 푸터에 container 삽입 동영상다운
7 전체 프리미티브 버전 레이아웃 코딩하기6 - 리셋 파일 만들기 동영상다운
8 전체 프리미티브 버전 레이아웃 코딩하기7 - 마무리 동영상다운
9 [tip] placehold 이미지 대체기법 사용하기 동영상다운
10 [tip] lorempixel 이미지 대체기법 사용하기 동영상다운
11 [tip] lorempixel 이미지 대체기법 사용하기 - 흑백 전환 동영상다운
12 [tip] lorempixel 이미지 대체기법 사용하기 - 카테고리 랜덤 동영상다운
13 Primitive Version 주석 코드 정리 동영상다운
14 헤더영역 마크업 코딩1 - 각 메뉴 영역 코딩하기 동영상다운
15 헤더영역 마크업 코딩2 - css 정의하기 동영상다운
16 [특강] float, inline 속성 이해하기1 동영상다운
17 [특강] float, inline 속성 이해하기2 동영상다운
18 [특강] float, inline 속성 이해하기3 동영상다운
19 [특강] float, inline 속성 이해하기4 동영상다운
20 [특강] float, inline 속성 이해하기5 - float 레이아웃 동영상다운
21 헤더영역 스타일 코딩1 - 상단메뉴 인라인 동영상다운
22 헤더영역 스타일 코딩2 - 글자지정 및 대문자 지정 동영상다운
23 헤더영역 스타일 코딩3 - 상단메뉴 float 속성 지정 동영상다운
24 리셋파일 추가 동영상다운
25 헤더영역 스타일 코딩4 - 로고 위치 지정 동영상다운
26 헤더영역 스타일 코딩5 - 네비게이션 메뉴 웹폰트 적용 동영상다운
27 지금까지의 헤더영역 작업한 소스코드 정리 동영상다운
28 의미와 범위를 넓혀주는 label label for 사용법 동영상다운
29 헤더영역 로그인폼 코딩하기1 - 밑그림 동영상다운
30 헤더영역 로그인폼 코딩하기1 - fieldset dl dt dd 태그 사용법 동영상다운
31 헤더영역 로그인폼 코딩하기2 - 아이디 비밀번호 입력 폼 동영상다운
32 헤더영역 로그인폼 코딩하기3 - ID저장 로그인버튼 이미지 동영상다운
33 헤더영역 로그인폼 코딩하기4 - 로그인 Div 박스 틀 다듬기 동영상다운
34 헤더영역 로그인폼 코딩하기5 - 마무리 동영상다운
35 헤더영역 로그인폼 CSS 코딩1 - 작업할 클래스 부여 동영상다운
36 헤더영역 로그인폼 CSS 코딩2 - 작업할 스타일시트 정의하기 동영상다운
37 헤더영역 로그인폼 CSS 코딩3 - 전체 박스 포지션 기준점 설정 동영상다운
38 헤더영역 로그인폼 CSS 코딩4 - 기준점 잡아서 로그인 헤더영역 위치잡기 동영상다운
39 헤더영역 로그인폼 CSS 코딩5 - 아이디 비번 안보이게 스타일 처리 동영상다운
40 헤더영역 로그인폼 CSS 코딩6 - 텍스트 입력 폼 스타일 모양 변경 동영상다운
41 지금까지의 작업들 코드정리 동영상다운
42 헤더영역 로그인폼 CSS 코딩7 - ID저장 로그인버튼 위치 조정 동영상다운
43 헤더영역 로그인폼 CSS 코딩8 - ID저장 정밀하게 간격 재조정 동영상다운
44 헤더영역 로그인폼 CSS 코딩9 - 로그인버튼 간격 재조정 동영상다운
45 헤더영역 로그인폼 CSS 코딩10 - 로그인 푸터영역 위치 조정 동영상다운
46 헤더영역 로그인폼 CSS 코딩11 - 아이디 회원가입 글자 간격 조정 동영상다운
47 헤더영역 전체 마무리 동영상다운
48 Part 2 : 갤러리 레이아웃
49 강의개요 - 갤러리 레이아웃 동영상다운
50 강의파일 구성 및 설명 동영상다운
51 갤러리 레이아웃 마크업1 - div 구성 동영상다운
52 갤러리 레이아웃 마크업2 - 마무리 동영상다운
53 갤러리 레이아웃 CSS 코딩1 - 구성 동영상다운
54 갤러리 레이아웃 CSS 코딩2 - 상단쪽 동영상다운
55 갤러리 레이아웃 CSS 코딩3 - inline-block 속성 이해하기 동영상다운
56 갤러리 레이아웃 CSS 코딩4 - 박스크기 및 마우스 on 색상반전 처리 동영상다운
57 갤러리 레이아웃 CSS 코딩5 - 원만들기1 동영상다운
58 갤러리 레이아웃 CSS 코딩6 - 원만들기2 동영상다운
59 포토샵으로 이미지 잘라서 갤러리 멋있게 꾸미기 동영상다운
60 전체적인 갤러리 디자인 밸런스 조정 - 마무리 동영상다운
61 Tip - li 태그 사이의 불필요한 간격을 없애주려면 - CSS로 처리 동영상다운
62 Tip - li 태그 사이의 불필요한 간격을 없애주려면 동영상다운
63 Tip - li 태그 사이의 불필요한 간격을 없애주려면 - 마이너스 사용 동영상다운
64 Part 3 : 콘텐츠영역 레이아웃 디자인(폰트 아이콘)
65 강의개요 - 콘텐츠영역 레이아웃 디자인 동영상다운
66 HTML 마크업1 - 컨테이너 작성 동영상다운
67 HTML 마크업2 - 아이템 마크업 동영상다운
68 HTML 마크업3 - 아이템 li 태그 요소들 정리 동영상다운
69 HTML 마크업4 - Div 클래스명 정리 동영상다운
70 CSS 코딩1 - 각 요소들 선택자 정의 동영상다운
71 CSS 코딩2 - 패딩 옵션 3개짜리 설명 동영상다운
72 CSS 코딩3 - h2 p 간격 설정 동영상다운
73 CSS 코딩4 - p 글자 간격 line-height 동영상다운
74 CSS 코딩5 - innerbox 정의 동영상다운
75 CSS 코딩6 - inline과 float left 속성 차이점 동영상다운
76 CSS 코딩7 - li 한개요소 정의 동영상다운
77 CSS 코딩8 - 애니메이션 영역 block 속성 동영상다운
78 CSS 코딩9 - position relative absolute 완벽 이해시키기 동영상다운
79 CSS 코딩10 - 기준점이 없으면 동영상다운
80 CSS 코딩11 - 소제목 타이틀 정의 동영상다운
81 지금까지의 CSS 코드 정리하기 동영상다운
82 font-awesome 사용법1 - cdn 주소삽입 및 폰트 아이콘 사용하기 동영상다운
83 font-awesome 사용2 - 아이콘 확대 축소 - 가운데 정렬 - 스핀 애니메이션 동영상다운
84 font-awesome 사용3 - 스킨 애니메이션 크게 도는거 수정하려면 동영상다운
85 font-awesome 사용4 - 나머지 사용법들을 익히려면 동영상다운
86 li 태그 맨 우측 부분의 여백이 안나타나게 하려면 동영상다운
87 li 태그 맨 우측 부분의 여백이 안나타나게 하려면2 동영상다운
88 li 태그 맨 우측 부분의 여백이 안나타나게 하려면 - span 블럭으로 처리1 동영상다운
89 li 태그 맨 우측 부분의 여백이 안나타나게 하려면 - span 블럭으로 처리2 동영상다운
90 선택자 소속 관계 찾아들어가는 다양한 방법들 동영상다운
91 li 태그 맨 우측 부분의 여백이 안나타나게 하려면 - 플랜B 차선책 동영상다운
92 강의를 마무리하면서.. 동영상다운
93 Part 4 : 하단 디자인 - Footer 레이아웃
94 강의개요 - 하단디자인 레이아웃 동영상다운
95 Basic CSS 파일 설명 동영상다운
96 하단디자인 마크업1 - 기본 프레임 구성 동영상다운
97 하단디자인 마크업2 - 푸터 콘텐츠 영역 작성 동영상다운
98 하단디자인 마크업3 - 푸터 콘텐츠 영역 마무리코딩 동영상다운
99 하단디자인 CSS 코딩1 - 스타일정의 동영상다운
100 하단디자인 CSS 코딩2 - footer 및 footer-top 동영상다운
101 하단디자인 CSS 코딩3 - footer-wrap 동영상다운
102 하단디자인 CSS 코딩4 - footer-wrap 마무리 동영상다운
103 하단디자인 CSS 코딩5 - 로고영역 동영상다운
104 하단디자인 CSS 코딩6 - 푸터 컨텐츠 나머지영역 간격 동영상다운
105 하단디자인 CSS 코딩7 - title 동영상다운
106 하단디자인 CSS 코딩8 - 전화번호 동영상다운
107 하단디자인 CSS 코딩9 - 계좌정보 동영상다운
108 하단디자인 CSS 코딩10 - 색상정리 동영상다운
109 하단디자인 CSS 코딩11 - P태그 A태그 정의 동영상다운
110 하단디자인 CSS 코딩12 - 하이라이트 효과 만들기 동영상다운
111 하단디자인 CSS 코딩13 - 폰트아이콘 동영상다운
112 하단디자인 CSS 코딩14 - 폰트아이콘으로 디자인완성도 높이기 동영상다운
수강기간 : 2개월 / 수강료 : \198,000



★★★ 본 강의는 HTML5/CSS3 실무코딩 과정입니다. ★★★
★★★ 자세한 강의개요는 아래 설명글을 찬찬히 읽어주십시오! ★★★
★★★ 계속 포트폴리오 시리즈로 강의가 출시됩니다. ★★★


[ WebPublisher Portfolio Series 1 ]

이 강좌는 웹퍼블리셔/웹디자이너 포트폴리오(취업대비) 실전코딩 과정으로써 중급 이상입니다.
따라서 HTML5, CSS3 기초는 잘 알고 있는 사람들을 대상으로 합니다.
즉, HTML5, CSS3 등을 다른 강사님의 강의나 또는 책을 통해서 독학으로 배웠는데 실전/실무 웹사이트 제작 경험이 없는 사람들에게 실전적인 실무 노하우를 가르쳐줍니다.

강좌 이수 후에는 중급 이상의 자신감을 갖도록 하는 실전/실무 코딩 과정인 만큼 그렇게 만만한 과정은 아닙니다.
레이아웃이나 전반적인 웹디자인은 2017~18년 가장 핫하고 트랜디한 레이아웃을 모티브로 잡아서 코딩을 한줄한줄 타이핑치면서 강의합니다.
요즘의 대기업, 은행, 연예기획사 등 유명 웹사이트들에서 많이 쓰는 레이아웃이기도 합니다.
물론 강의에서 우리가 같이 만드는 레이아웃이기도 합니다.
상당 수 웹사이트들이 이런 레이아웃으로 틀을 잡고 만들어나간다고 보시면 됩니다.

전문가라면 시대의 유행과 트랜드를 캐치할 수 있어야 합니다.
그리고 웹퍼블리셔로 경쟁력 있는 내가 되러면 그런 니즈를 바로바로 하드코딩할 수 있어야 합니다.
2018년도 역시 이러한 스타일의 웹디자인과 웹퍼블리싱은 계속 유행할 것입니다.
그래서 이런 예제로 만든 것이고요.

이러한 웹사이트 레이아웃을 따라하고 실무 코딩을 구현해보는 것은 웹퍼블리셔, 웹사이트 개발 전문가로 가는 바로미터입니다.
물론 처음 이러한 실무 코딩을 해보는 사람에게는 결코 쉽지 않습니다.

왜냐하면 영어 문법을 배웠다고 회화를 잘하는게 아닌 것처럼 HTML, CSS를 배웠다해서 웹사이트, 쇼핑몰 ㅈ작 코딩을 잘하는건 아니기 때문입니다.
본 과정을 끝까지 잘 학습한다면 여러 웹퍼블리싱 실무 기법과 웹디자인 실무 코딩을 배우게 됩니다.

모든 과정을 하나하나 타이핑치면서 결과를 보여주는 하드코딩 방식이기 때문에 사이트가 만들어져가는 과정과 변화되어져 가는 모든 과정과 모습을 볼 수 있습니다.
그렇기 때문에 이해가 책을 통해서 배우는 것과는 비교가 안될 정도로 잘 되어집니다.
또한 코딩을 한줄한줄 타이핑 치면서 강의하지 않는 동영상강의들과도 역시 비교할 수 없을 정도로 이해가 잘 되어집니다.

한줄한줄 타이핑 치면서 변화되어져 가는 모습 하나하나를 영상으로 찍고 설명한다는게 결코 쉬운일은 아닙니다.
그러나 강사로써 이렇게 만들고나니깐 정말 뿌듯합니다.
앞으로도 반응형 웹사이트 포트폴리오까지 모두 이렇게 영상을 만들어 나가겠습니다.

아무튼,
이 정도 레벨의 웹사이트 코딩 및 퍼블리싱을 혼자 처음부터 다 해낼줄 안다면 취업 경쟁력과 자신감은 보너스입니다.

.
.

예제는 실무에서 그대로 사용할 수 있는 예제로 탄탄하게 준비했습니다.
그대로 실무에가서 복사해서 사용해도 무방할 정도로 실전/실무에서 바로 사용할 수 있습니다.
실제 이 메인 예제로 영어 교육사이트를 구축한 예제입니다.

이정도 예제를 한번도 안해본 사람이라면 솔직히 취업 자체가 어렵습니다.
하지만 이 강의와 여기서 다루는 예제를 수십번 반복하면서 보고 따라하고 마스터하세요.
이미 이정도 레벨의 강의를 듣고자 하는 사람이라면 기본 소양을 갖추었다고 생각합니다.
다시한번 말씀드리지만 HTML, CSS 기초가 약하면 어렵습니다.

영어로 치면 문법 공부는 어느정도 한 사람을 의미합니다.
HTML, CSS 문법이 너무 약하면 문법을 먼저 공부하세요.
그러나 영어 문법 배웠다고 해서 영작이나 회화를 잘하는게 아닌 것처럼 HTML5, CSS3 문법을 배웠다 해서 이런 코딩과 웹퍼블리싱을 잘하는건 아닙니다.
이건 많이 해봐야 실력이 느는 겁니다.

실무 프로젝트나 이런 실전 수준의 포트폴리오 예제를 얼만큼 많이 코딩해봤느냐가 중요한겁니다.
백날천날 영어 문법 강의만 들어서는 영작이나 회화를 결코 잘할 수 없습니다.
거의 한마디도 못합니다.

HTML5, CSS3도 영어와 다를게 전혀 없습니다.
백날천날 HTML, CSS 강의 듣는다해서 코딩이 바로바로 되는게 아닙니다.
HTML/CSS 문법은 가볍게 배우고 이런 포트폴리오 실전 강의를 많이 보고 따라하세요.
그리고 중요한건 혼자 연구하는 시간을 많이 가지세요.

그게 남들보다 더 많은 연봉을 받게 해줍니다.
요즘 신입도 잘 안뽑는다는데 웹디자이너나 웹퍼블리셔 경력자로 바로 취업을 하고 싶다면 이런 강의를 많이 들으시고 많이 연습하세요.
강의에서 다루는 예제를 모두 내것으로 만드십시오.
처음이면 조금 힘들겠지만 그러나 안힘들면 남들도 다 하는것 아닐런지요?
.
.

이런 레벨의 예제를 얼만큼 많이 따라해보고 혼자서 만들 수 있는지가 곧 경쟁력이자 높은 연봉을 받는 바로미터임을 명심하세요~
이제 HTML5, CSS3 문법은 그때그때 필요한거 위주로만 공부하세요.
클라이언트로 부터 메인페이지 제작의뢰를 받았다 생각하고 바로 실전처럼 이런 실무 레벨의 예제를 많이 따라하고 내것으로 만드십시오.
많이 해보면 코딩이나 퍼블리싱도 당연히 늘게 되어 있습니다.
연습이 최고의 학습입니다.


전체 숲을 아우르면서 숲을 디자인하고 코딩하는 Professional한 웹퍼블리셔가 되어보세요.
열심히 노력한만큼 높은 연봉과 취업 경쟁력은 자연스럽게 따라옵니다.


- 강사 카플란 -
[AD] 데브렉 사이트 VIP Freepass 전과정 자유이용권 혜택보기
홈 회사소개 이용약관 개인정보 보호정책 이용안내 Q&A FAQ Guide