SHOPPING MALL - OnLine VIDEO LECTURE
   
ID/PW 찾기 My페이지 |  처음사용자 이용안내 |  이용문의 |  VIP 전과정 자유이용권
한달 9,900원으로 모든 동영상강의를 프리패스로 이용하세요~ :)

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

본 과정은 HTML5/CSS3 실전/실무 프로젝트 과정입니다.
쇼핑몰 또는 웹사이트의 상/하단디자인 템플릿 영역에 해당하는 부분을 내가 직접 코딩하여 동적인처리 구현(jQuery/Javascript) 등을 만들어보는 과정입니다.

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

아울러,
맨날 기본예제만 공부해서는 취업이 안됩니다.
되도 이상한거고요..^^

당연히 실전적이면서 실무적인 예제를 사수로 부터 배우고 따라해보고 많이 코딩해봐야 감각이 느는겁니다.
그렇게해야 비로써 그 예제가 내것이 되고요..
실무예제를 완전히 내것으로 만들면 그럼 이후에 비슷한 유형의 실무예제를 응용해서 만드는 것도 훨씬 쉬워진답니다.
모든 경력자들은 그러면서 프로가 되어간 것입니다.

꼭 취업이 목표가 아니더라도 내가 직접 쇼핑몰을 운영한다든지
또는 이러한 쇼핑몰, 웹사이트 디자인을 내가 직접 코딩하고
구현해보고자 한다면 이 예제를 따라 공부해보세요~
.
.

사용되는 기술은 당연히 HTML5, CSS3 입니다.
그리고 상단메뉴 모션 및 사용자 반응에 따른 동적인 메뉴처리를 구현하기 위해서 jQuery와 자바스크립트 문법이 사용됩니다.
jQuery는 기본적인 문법과 메서드 사용법 정도만 알면 됩니다.
만약 잘 모르신다면 제이쿼리가 나오는 파트 전까지 강의를 공부하시는 것도 나름의 공부 방법입니다.

사용자 반응에 따라 상단메뉴의 동적인 메뉴변화를 구현 처리하기 위해서 제이쿼리를 사용하는건데 만약 잘 모른다면 그전까지의 HTML5/CSS3 코딩 파트까지만 우선 공부하는 것도 괜찮습니다.
물론 제이쿼리 파트도 최대한 초보자들이 잘 이해할 수 있도록 점진적으로 설명을 해나갑니다.

제이쿼리는 버전을 크게(또는 전혀) 따질 필요가 없습니다.
물론 극히 일부 메서드가 바뀌거나 하는 것은 있겠으나 큰 변화는 없습니다.
거듭 말씀드리지만 HTML5, CSS3는 기본입니다.
많이 그리고 잘 알고 있으면 좋겠지만 기본은 열공해주세요~
만약 HTML5, CSS3 기본이 약하다면 아래 제 강의를 먼저 열공하세요~

"어서와~ HTML5/CSS3는 처음이지~"


.
.
.


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

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

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

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


- 강사 드림 -
VIP Freepass 전과정 자유이용권 혜택보기



   
   
홈 회사소개 이용약관 개인정보 보호정책 이용안내 Q&A FAQ Guide