| 1 |
001_강의개요
|
 |
|
| 2 |
002_캐러셀 슬라이드 배너 적용하기 위한 CDN 삽입하기
|
|
|
| 3 |
003_부트스트랩 삽입 후 레이아웃 깨지는 현상 원인과 해결 방법
|
|
|
| 4 |
004_각각의 엘리먼트 용어(영어단어) 암기하기
|
|
|
| 5 |
005_캐러셀 슬라이드 배너를 위한 기본 마크업 하기
|
|
|
| 6 |
006_무료로 이미지와 동영상을 이용할 수 있는 사이트 알아보기
|
|
|
| 7 |
007_슬라이드 배너 이미지 삽입하기
|
|
|
| 8 |
008_이미지 삽입 후 레이아웃이 일부 깨지는 현상에 대해서
|
|
|
| 9 |
009_command tag를 사용하여 캐러셀 슬라이드 배너 동작시키기
|
|
|
| 10 |
010_캐러셀 슬라이드 배너에 자막 넣기
|
|
|
| 11 |
011_초보자를 위한 css 오류 잡는 방법
|
|
|
| 12 |
012_이미지 사이즈 일괄수정 클래스 적용 및 캡션 배경색 넣기
|
|
|
| 13 |
013_이미지에 링크 걸고 링크 없는 이미지 고려하여 2개 클래스 적용하기
|
|
|
| 14 |
014_가독성을 위한 배경색 클래스 지정하고 대소문자 적용하기
|
|
|
| 15 |
015_Left and Right Controls 구현
|
|
|
| 16 |
016_indicators 동작 구현
|
|
|
| 17 |
017_캐러셀 슬라이드 배너 핵심 pt 정리
|
|
|
| 18 |
018_아이콘 이미지 수정하기(1)
|
|
|
| 19 |
019_아이콘 이미지 수정하기(2)
|
|
|
| 20 |
020_아이콘 이미지 수정하기(3)
|
|
|
| 21 |
021_캐러셀 이미지 가로 너비 조절하기
|
|
|
| 22 |
022_부트스트랩 3 버전과 4 버전의 호환성 및 차이점(1)
|
|
|
| 23 |
023_부트스트랩 3 버전과 4 버전의 호환성 및 차이점(2)
|
|
|
| 24 |
024_part2_001_네비게이션 상단 메뉴 만들기 개요 및 전체 구조 미리보기
|
|
|
| 25 |
025_part2_002_상단메뉴 마크업 및 CSS 코딩(1) - 로고, (2) - li
|
|
|
| 26 |
026_part2_003_상단메뉴 마크업 및 CSS 코딩(3) - 센저리프 계열 폰트 적용, (4) - flexbox
|
|
|
| 27 |
027_part2_004_우측 로그인 버튼 만들기 및 메뉴 수평 정렬
|
|
|
| 28 |
028_part2_005_스무스한 애니메이션 적용을 위한 Transition 속성 사용하기
|
|
|
| 29 |
029_part2_006_트랜지션 속성 4가지 정리하기
|
|
|
| 30 |
030_part2_007_트랜지션 옵션들 정리
|
|
|
| 31 |
031_part2_008_Transition linear ease 옵션의 차이점 눈으로 확인하기
|
|
|
| 32 |
032_part2_009_상단메뉴 우측 회원가입 버튼 디자인 클래스 처리하기(1)
|
|
|
| 33 |
033_part2_010_상단메뉴 우측 회원가입 버튼 디자인 클래스 처리하기(2)
|
|
|
| 34 |
034_상단 네비게이션 디자인과 하단 디자인 PT 정리
|
|
|
| 35 |
035_part3_001_하단 디자인 레이아웃(1)
|
|
|
| 36 |
036_part3_002_하단 디자인 레이아웃(2)
|
|
|
| 37 |
037_part3_003_하단 디자인 레이아웃(3)
|
|
|
| 38 |
038_part3_004_하단 디자인 레이아웃(4) 마무리
|
|
|
| 39 |
039_part4_001_Grid 강의개요 및 Grid 이전의 전통적인 레이아웃 구성
|
|
|
| 40 |
040_part4_002_Grid 기술을 사용한 레이아웃 구성(1) - grid
|
|
|
| 41 |
041_part4_003_Grid 기술을 사용한 레이아웃 구성(2) - fr 단위
|
|
|
| 42 |
042_part4_004_Grid 기술을 사용한 레이아웃 구성(3) - columns
|
|
|
| 43 |
043_part4_005_Grid 기술을 사용한 레이아웃 구성(4) - areas
|
|
|
| 44 |
044_part4_006_Grid 기술을 사용한 레이아웃 구성(5) - other options
|
|
|
| 45 |
045_part4_007_Grid 기술을 사용한 레이아웃 구성(6) - perpendicular merge
|
|
|
| 46 |
046_part4_008_그리드의 새로운 단위 fr 개념 좀 더 자세히 이해하기(1)
|
|
|
| 47 |
047_part4_009_그리드의 새로운 단위 fr 개념 좀 더 자세히 이해하기(2)
|
|
|
| 48 |
048_part4_010_그리드 fr 단위 auto 자세히 이해하기
|
|
|
| 49 |
049_part4_011_그리드 레이아웃을 상단메뉴에 활용하는 실전 연습(1)
|
|
|
| 50 |
050_part4_012_그리드 레이아웃을 상단메뉴에 활용하는 실전 연습(2)
|
|
|
