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는 처음이지~"
. .
중요한건 반복학습과 숙달입니다. 본 예제에 사용된 코딩과 여러 기술적 구현을 많이 연습하세요. 내가 필요할 때 구현할 수 있도록 숙달을 시키시는게 가장 중요합니다. 그럼 열공하세요~ :)