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) - 마무리
|
|
|