Devlec.com Javacstudy.com
My페이지 |  처음사용자 이용안내 |  이용문의 |  회사소개
2개월 무료연장 안내.. 1년 프리패스로 무한학습.. 제휴강좌 무료증정 빅혜택.. 2/28일(목) 마감
[2018 신규] ... [취업 포트폴리오를 만들어라] HTML5 CSS3 실전실무예제 - Part 1
1 01_기본파일 작성 동영상다운
2 02_메인페이지 전체적인 레이아웃 구성 설명 동영상다운
3 03_상단 하단 영역 div 박스모델 지정하고 wrap 하기 동영상다운
4 04_상단디자인 HTML 마크업 코딩 동영상다운
5 05_상단디자인 HTML 마크업 코딩 - 주석처리 및 링크걸기 동영상다운
6 06_CSS 코딩하기(1) - 상단 wrapper 박스 정의 동영상다운
7 07_CSS 코딩하기(2) - max min-width로 만드는 의도는 무엇인가 동영상다운
8 08_헤더 영역 css 코딩하기(1) - 최상단 엣지있게 활용하기 동영상다운
9 09_헤더 영역 css 코딩하기(2) - 로고 위치 잡기 동영상다운
10 10_헤더 영역 css 코딩하기(3) - 헤더 영역 relative 잡아주기 동영상다운
11 11_헤더 영역 css 코딩하기(4) - 스크롤해도 최상단메뉴 따라다니게 하려면 동영상다운
12 12_리셋 파일 코딩 추가 동영상다운
13 13_로고 크기 수정에 따른 가운데정렬 css 코드 수정 동영상다운
14 14_GNB(Global Navigation Bar) 상단메뉴 코딩하기(1) 동영상다운
15 15_GNB(Global Navigation Bar) 상단메뉴 코딩하기(2) 동영상다운
16 16_GNB(Global Navigation Bar) 상단메뉴 코딩하기(3) 동영상다운
17 17_GNB(Global Navigation Bar) 상단메뉴 코딩하기(4) - a 태그 CSS 적용 동영상다운
18 18_Box-sizing border-box 추가 예제 팁 동영상다운
19 19_GNB 영역 색상 조정 동영상다운
20 20_GNB 상단 서브메뉴 코딩하기(1) 동영상다운
21 21_GNB 상단 서브메뉴 코딩하기(2) 동영상다운
22 22_시각장애인 접근성을 고려한 숨김 텍스트 기법 서브메뉴에 적용하기 동영상다운
23 23_서브메뉴 위치 조정하기 동영상다운
24 24_GNB 상단영역 색상톤 및 컬러 수정 동영상다운
25 25_GNB 상단영역 기본 폰트 서체 Sans-serif 로 바꾸기 동영상다운
26 26_강의편집점 - STEP 5 동영상다운
27 27_nav-box로 div id 이름 변경 동영상다운
28 28_최상단 네비게이션 메뉴바 만들기(1) - 마크업 코딩 동영상다운
29 29_최상단 네비게이션 메뉴바 만들기(2) - 가로 정렬 및 패딩 조절 동영상다운
30 30_최상단 네비게이션 메뉴바 만들기(3) - hover 효과 적용 및 폰트 아이콘 사용 동영상다운
31 31_최상단 네비게이션 메뉴바 만들기(4) - 다양한 폰트 아이콘 사용 동영상다운
32 32_최상단 네비게이션 메뉴바 만들기(5) - 폰트아이콘으로 서브메뉴 표시 동영상다운
33 33_최상단 네비게이션 검색바 코딩(1) - 마크업 동영상다운
34 34_최상단 네비게이션 검색바 코딩(2) - 검색 폰트 아이콘 css 코딩 동영상다운
35 35_최상단 네비게이션 검색바 코딩(3) - 키워드 서치박스 css 코딩 동영상다운
36 36_최상단 네비게이션바 min-width 최소 너비 지정 동영상다운
37 37_step6 부터의 강의는 무엇 - 강의편집점 설명 동영상다운
38 38_카테고리 메뉴 jQuery 슬라이드 모션 처리(1) 동영상다운
39 39_카테고리 메뉴 jQuery 슬라이드 모션 처리(2) 동영상다운
40 40_카테고리 메뉴 jQuery 슬라이드 모션 처리(3) - 부분 수정 동영상다운
41 41_step7 강의편집점 - 하단디자인 파트 동영상다운
42 42_부분 수정 - 상단 로고 영역 높이 안맞는거 동영상다운
43 43_푸터 영역 하단디자인 CSS 코딩하기(1) 동영상다운
44 44_푸터 영역 하단디자인 CSS 코딩하기(2) 동영상다운
45 45_푸터 영역 하단디자인 CSS 코딩하기(3) 동영상다운
46 46_푸터 영역 하단디자인 CSS 코딩하기(4) 동영상다운
47 47_푸터 영역 하단디자인 CSS 코딩하기(5) 동영상다운
48 48_푸터 영역 하단디자인 CSS 코딩하기(6) - 마무리 동영상다운
49 수고하셨습니다. 이어지는 Part 2 강의를 학습하세요~ :)
수강기간 : 2개월 / 수강료 : \220,000

본 과정은 HTML5/CSS3 실전/실무 프로젝트 과정입니다.
아래 시리즈로 구성된 강좌이며 본 과정은 실무1 과정에 해당합니다.
참고로 실무 과정은 1편, 2편으로 되어 있습니다.
실무 1, 2편이 서로 이어지는 강좌는 아니므로 따로 들어도 상관 없습니다.
단, 기본편, 활용편 강좌는 먼저 선수학습으로 열공하고 실무편을 보세요~

- HTML5 CSS3 모던 웹사이트 레이아웃 기본 1/ 2/ 3편
- HTML5 CSS3 모던 웹사이트 레이아웃 활용 1/ 2편
- HTML5 CSS3 모던 웹사이트 레이아웃/웹디자인(퍼블리싱) 실무 1/ 2편

.
.

실무1편 과정은 아래와 같은 내용을 다룹니다.
쇼핑몰 또는 웹사이트의 상/하단디자인 템플릿 영역에 해당하는 부분을 내가 직접 레이아웃을 짜고 퍼블리싱(코딩)을 하는 과정입니다.
마지막 단계에서는 동적인 메뉴 처리 구현(jQuery/Javascript)을 하기 위해서 Javascript/jQuery 등을 사용합니다.

따라서 기본적인 과정들에 대해서는 선학습을 해주십시오~
예를들면.. HTML5, Css3 등에 대한 기본적인 내용은 어느정도 학습을 한후에 또는 같이 병행하면서 이 과정을 보시는게 학습 이해도면에서 좋습니다.
당연히 강사로써 권장하는 학습방향이기도 합니다.

위 시리즈 강좌를 기본편 -> 활용편 -> 실무편 순서로 공부하세요~

.
.

자바스크립트, 제이쿼리도 기초 정도는 알고 있어야 합니다.

자바스크립트, 제이쿼리를 전혀 모른다면 마지막 단계에서의 동적인 메뉴 처리 구현을 하는 부분에서 어려울 수 있습니다.
많은 공부를 요하는게 아니라 자바스크립트, 제이쿼리 기초 사용법과 기초 문법 정도는 알고 있어야 한다는 것입니다.
if문이 뭐고 반복문이 뭔지 잘 모른다면 먼저 자바스크립트 기초 문법을 공부하고 마지막 부분의 학습을 진행하는게 좋습니다.

만약 당장 자바스크립트, 제이쿼리 공부할 시간이 없다면,
제이쿼리가 나오는 파트 전까지 강의를 공부하는 것도 나름의 공부 방법입니다.
사용자 반응에 따라 상단메뉴의 동적인 메뉴변화를 구현 처리하기 위해서 제이쿼리를 사용하는건데 만약 잘 모른다면 그전까지의 HTML5/CSS3 코딩 파트까지만 우선 공부하는 것도 괜찮습니다.

물론 제이쿼리 파트도 최대한 초보자들이 잘 이해할 수 있도록 점진적인 설명을 해나가므로 기초 정도만 알면 제이쿼리 부분도 잘 따라올 수 있습니다.

.
.

끝으로,
실전적이면서 실무적인 예제를 많이 따라해보고 코딩해보는게 좋습니다.
꼭 취업이 목표가 아니더라도 내가 직접 쇼핑몰을 운영한다든지
또는 이러한 쇼핑몰, 웹사이트 디자인을 내가 직접 코딩하고 퍼블리싱 해보고자 한다면 이런 강의와 예제를 많이 따라해보세요.

.
.


프론트엔드나 웹퍼블리셔, 웹디자인쪽으로 취업을 하고자 하신다면
또는 자신이 직접 쇼핑몰 운영자로써 이러한 쇼핑몰 디자인을 직접 코딩하고 만들어보고자 하신다면 이러한 예제를 많이 공부하고 반복학습하셔서 내걸로 만드세요~
그러면 자신감이 쑤우욱 올라갈 것입니다.

본 예제를 응용/활용해서 좀더 나은 예제로 발전시켜 보세요..
아니면 본 예제를 그대로 자신의 포트폴리오로 활용하셔도 좋습니다.
물론 자신의 쇼핑몰에 본 예제 디자인을 입혀서 사용하는 것도 좋구요..

실제 많은 회원 및 수강생들이 본 예제를 자신의 포트폴리오 처럼 꾸며서
취업준비 및 이직시 면접을 보러 다닌답니다.
약간 응용해서 자신의 쇼핑몰이나 웹사이트 디자인으로 쓰기도 하구요..

중요한건 반복학습과 숙달을 통해서 본 예제에 사용된 코딩 스킬과 여러 실무적인 기술적 구현들을 빠르게 구현할 수 있도록 숙달을 시키시는게 가장 중요합니다.
그럼 열공하세요~ :)

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