ALL FREEPASS | C# | ASP.NET | ASP.NET Core | MVC Framework | WPF | JAVA | I/O Thread | JSP | MVC JSP | Spring / SpringBoot
Python | Data Analysis | Android / Kotlin | Android Pro | Unity | C / C++ | Algorithm | Data Structure | Design Pattern | Console Game | ASP/PHP | Git / IDE
HTML5 / CSS3 | JavaScript | jQuery | JSON / Ajax / DOM | Node.js / React / Vue.js | Angular | Server | SQL | Linux | Oracle | Notion | FREE ( 무료 강좌 )
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) - 마무리     동영상다운
수강기간 : 2개월 / 수강료 : \220,000

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

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

예제를 많이 따라해보고 코딩해봐야 문법도 잘 이해가 됩니다.
예제를 완전히 내것으로 만들면 이후에 비슷한 예제를 응용해서 만드는 것도 훨씬 쉬워진답니다.
내가 직접 쇼핑몰을 운영한다든지 쇼핑몰, 웹사이트 디자인을 내가 직접 코딩하고 구현해보고자 한다면 예제를 끝까지 따라 공부해보세요~

상단메뉴의 모션 및 사용자 반응에 따른 동적인 메뉴처리를 구현하기 위해서 jQuery와 자바스크립트 문법이 사용됩니다.
jQuery는 기본적인 문법과 메서드 사용법 정도만 알면 됩니다.
만약 잘 모르신다면 제이쿼리가 나오는 파트 전까지만 강의를 공부하시는 것도 나름의 공부 방법입니다.
제이쿼리 파트도 초보자들이 잘 이해할 수 있도록 점진적으로 설명해 나갑니다.
VIP Freepass 전과정 자유이용권 혜택보기