반응형웹 [전문과정] - 총 18시간 49분 / 강의당평균 : 56분27초

반응형웹 [전문과정]

전체 : 18시간 49분 / 강의당평균 : 56분27초

01 반응형 웹 제작 핵심기술

기본만 알아도 완벽한 구현이 가능합니다.

41분

책갈피 : [00:35] 강의전 알아야 할 점 / [01:03] 작업할 내용 / [02:53] 소스 보기 / [03:07] 참고로 알아야 할 점 / [04:09] 뷰 포트 설정 / [05:00] 뷰 포트 속성 설명 / [05:46] 결론 / [06:15] 스크립트 파일 연동해서 불러오기 / [07:38] 브라우저나 기기에 따라 사이즈 다르게 하는 방법 / [07:56] media screen and / [09:03] media all / [09:13] media aural / [09:24] media handheld / [10:13] media embossed / [10:28] 결과적으로 보기 / [11:18] 디바이스 최대, 최소 높이 정의 / [12:05] 실행될 내용 입력 / [12:50] 내용 확인 / [13:16] 테블릿 사이즈일 경우 / [14:00] 내용 확인 / [15:18] 모바일 사이즈일 경우 / [16:14] 내용 확인 / [17:03] 실무에 사용되는 웹 페이지 다루기 / [17:52] 핵심 / [18:36] 창 크기 줄이기 / [19:25] 코드 보기 / [20:03] css 선언 / [20:45] line-height 보기 / [21:18] 컨테이너 입력 / [21:40] 디바이스 넓이에 따라 미디어 각각 선언 / [22:18] 최소 넓이 최대 넓이에 따른 컨테이너 요소 설정 / [23:07] 테블릿과 와이드 내용 정의 / [24:10] div 선언 / [25:11] 내용 보기 / [27:03] 중간 점검 / [28:41] 버튼 확인 / [29:37] 로고 설정 / [30:37] 이미지 설정 / [31:03] 새로고침 / [31:17] pc 버전일때만 이미지 나오게 설정 / [32:07] ul 목록 튜닝 / [32:37] 미디어 타입 선언 / [33:35] 실제 내용 보기 / [34:27] 잘못된 경우 / [34:45] 소스 추가 / [35:57] 변경된 내용 보기 / [37:15] js 적용 확인 / [37:50] 맨 아래 내용 셋팅 / [38:52] 이미지 width 값 설정 / [39:09] 사이즈 설정해 주지 않아도 적용 되는 이유

반응형 웹 제작실무

02 실제적용 사례 CSS실무코딩 1

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

48분

책갈피 : [00:08] 실제 사용된 웹사이트 소스 분석 / [01:17] 완성된 내용 보기 / [01:23] 사이트 크기 줄이기 / [02:00] 웹 페이지 다운로드 / [02:28] meta content 영역 / [03:27] 설명 보기 / [04:00] 세개의 css / [04:26] 세개의 css 분석 / [05:46] 복잡한 코딩 보는 방법 / [06:27] css 파일 불러오기 / [06:38] 62번째 라인 찾기 / [06:46] 기본 사항 확인 / [07:15] 세번째 적용 부분 / [07:46] index css / [09:58] 네비게이션 css / [10:13] 적용된 내용 확인 / [11:15] 미디엄에 대한 css 적용 확인 / [11:54] 컨테이너 / [13:43] 로고 부분 설명 / [14:35] 네비게이션 안에 있는 ul 목록 / [14:58] 확인 / [15:22] 메뉴가 스몰로 되어있을 경우 / [16:26] 실제적으로 줄여지는 내용 / [16:47] 로고 부분 보기 / [17:11] 메뉴 부분 보기 / [18:30] 숨겨진 메뉴 / [19:25] 웹사이트 가운데 내용 확인 / [20:29] 제목과 스펜 / [20:52] 큰 문자 / [21:30] 일반 텍스트 / [22:32] 현재 선언된 부분 / [23:41] 웹사이트가 좁혀졌을때 / [24:41] 컬러 부분 / [25:06] 컨텐트가 됐을 경우 / [26:40] 자간 확인 / [27:22] 내용 보기 / [27:55] 바뀐 내용 확인 / [28:41] p태그 숨어있는 부분 / [29:30] 글자 움직이는 부분 / [29:56] 이미지 부분 보기 / [30:48] 확인 / [31:25] 밑 메뉴 보기 / [32:43] 변경 사항 확인 / [33:22] 버튼 , 푸터 부분 보기 / [34:15] 확인 / [34:59] pc 버전 적용 내용 / [35:34] pc 버전 전체 선언 보기 / [36:52] 텍스트 외부 여백 / [37:30] p 태그 소스 보기 / [37:58] 스몰 사이즈 됐을 경우 확인 / [39:22] pc버전에서 미디엄 버전으로 넘어갈 경우 / [39:42] 내용 함축해서 줄이기 / [42:22] 푸터 부분 보기 / [43:15] 100프로로 나오는 이유 / [44:52] 푸터 부분 스몰일 경우 확인 / [45:52] 왼쪽 메뉴 보기 / [46:34] 이미지가 위로 올라간 이유 / [47:13] 확인

03 실제적용 사례 CSS실무코딩 2

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

38분

책갈피 : [00:07] 웹사이트 보기 / [01:06] 소스 확인 / [02:23] 복잡하게 선언된 이유 / [04:00] 바디 부분 소스 보기 / [05:27] wrapper 내용 보기 / [06:00] 확인 / [06:57] 좌우 여백이 생겼다가 없어지는 이유 / [07:25] 사이트 크기 키운 뒤 로고 확인 / [07:55] 로고 부분 소스 보기 / [09:11] 사이트 크기 줄인 뒤 확인 / [10:15] 로고 부분 확인 / [10:50] 이미지 일부분만 보이게 변경하는 방법 / [11:35] width 값 수정 / [11:58] 확인 / [12:18] 내용이 없어졌을 경우 / [13:13] body 부분 보기 / [13:48] display:none 보기 / [15:01] 확인 / [15:35] 사이트 확대 후 확인 / [16:41] 우측 메뉴 / [16:59] 소스 보기 / [18:17] 어떻게 변경 되는지 알아보기 / [19:30] 중심 부분 확인 / [20:07] 삼단계 변경 설명 / [20:52] 소스 보기 / [21:32] max 값 확인 / [22:22] 결과 / [22:45] 선언된 내용 이미지 / [24:47] 텍스트 부분 소스 보기 / [25:11] 확인 / [26:07] 섹션 확인 / [27:15] 내부 여백 값 확인 / [27:45] pc 사이즈일 경우 / [28:07] 확인 / [28:41] 좌측 값 확인 / [29:03] 평상시 화면일 경우 선언 / [30:26] 밑 여백 보기 / [31:03] 10 픽셀로 수정 후 확인 / [32:37] 함축이 됐을 경우 / [33:30] 내부 여백 값 확인 / [33:45] 첫번째 섹션 / [34:12] 배경 컬러가 흰색인 이유 / [34:30] pc 버전일 경우 sidebar 확인 / [35:19] 아이콘 보기 / [36:45] footer 내용 보기 / [37:15] 기본 패딩값 확인 / [37:53] 웹사이트 화면 줄인 후 확인

04 실제적용 사례 CSS실무코딩 3

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

53분

책갈피 : [01:18] 웹 사이트 보기 / [01:55] 소스 확인 / [02:23] lt로 돼 있을 경우 / [03:43] home blog / [04:15] 네비게이션 태그 보기 / [05:13] 좁혔을때 메뉴가 없어졌을 경우 / [07:00] 상단 메뉴, 로고 부분 / [07:38] 화면 줄인 후 확인 / [08:26] 해당 내용 소스 보기 / [09:22] 화면 작아질 때 공백 / [10:01] 토글 스트림 확인 / [11:07] 로고 확인 / [11:54] ul 목록 / [12:28] 소스에서 주목해야 할 점 / [13:13] 기본 사항 보기 / [14:03] 본 메뉴 확인 / [14:37] 소스 보기 / [15:20] css의 pc 적용 확인 / [16:17] 상단 공백 부분 / [16:33] 소스 보기 / [17:56] 서치 바 부분 / [18:18] 소스 보기 / [19:03] 서치 바가 없어져 보이는 이유 / [19:41] follow 버튼 / [20:07] 소스 보기 / [21:14] 메인 확인 / [21:33] stream / [23:07] visibility:visible / [23:52] 전체 설명 / [24:11] 소스 보기 / [25:52] 모바일 화면일 경우 / [26:17] 메인 부분 소스 보기 / [27:17] 존속된 사항 / [28:03] content-head 값 확인 / [29:41] 메인 전체 감싸는 부분 / [30:51] 모바일일 경우 / [31:41] top-story-wrapper clearfix / [32:13] 추가 적용 부분 / [33:42] 통합 적용 부분 / [34:43] top-story / [35:42] bottom 값 보기 / [36:36] 디바이스 사이즈가 줄었을 경우 / [38:15] top-story-side / [39:27] 이미지가 커진 이유 / [41:21] 따로 설정해야할 부분 / [41:52] 사이즈가 줄어들었을 때 / [43:15] 여섯개 라인 부분 / [43:45] pc 버전 소스 확인 / [44:07] 태블릿일 경우 / [45:22] 모바일일 경우 / [45:44] 소스 확인 / [46:07] article-listing / [46:44] 태블릿일 때 제일 먼저 적용 받는 사항 / [47:37] 하단 메뉴 부분 / [48:13] footer 보기 / [49:13] 모바일 화면일때 메뉴 확인 / [49:45] 소스 보기 / [51:52] 카피라이트 부분 / [52:22] 태블릿일 경우

05 실제적용 사례 CSS실무코딩 4

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

32분

책갈피 : [00:04] 홈페이지 살펴보기 / [00:56] 소스 확인 / [01:07] meta name=viewport / [01:23] link href / [01:53] div id=header / [02:58] @media only screen / [03:14] 배경값 / [04:30] 스텐다드인 경우 / [05:40] 로고 설명 / [06:46] h1 class=logo alt / [06:59] div id=mobile-header / [08:46] mobile-header / [09:35] 모바일 헤더 아래 로고 불러오기 / [11:35] div class=wrapper / [11:50] position relative z-index / [12:33] div class=aside aside-left / [13:56] absolute 제거 했을 경우 / [15:20] 결과값 확인 / [15:43] 적용된 내용 확인 / [16:07] left 값 확인 / [17:03] 내부 여백 확인 / [17:41] 위치 확인 / [18:00] h2 class=hdr / [19:25] ul class=nav nav-permanent-actions / [20:07] 배너 이미지 / [21:18] ul 목록 적용사항 보기 / [22:15] row span3 / [22:51] row card-break-2up / [23:56] div-class=figure / [24:22] 적용사항 보기 / [25:00] 홈페이지 하단 / [25:18] div class=wrapper homepage-sock / [26:15] div class=span3 gutter-horiz-in gutter-bottom-4 / [28:45] div id=footer / [29:37] gutter-horiz-in / [30:18] 변경 값 확인 / [31:15] span class=logo alt / [31:52] 하단 메뉴

06 실제적용 사례 CSS실무코딩 5, 6

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

1시간 18분

책갈피 : [00:58] 소스 보기 / [01:25] meta name=handheldfriendly / [02:53] meta name=apple-mobile-web-app-title / [03:46] link rel=apple-touch-icon / [04:39] 상태바 컬러 정하기 / [05:10] 웹사이트에 적용된 css / [05:30] id 값과 css값 보기 / [06:13] body 확인 / [06:30] div class=ihatetimvandamme / [07:13] em 정의 확인 / [08:13] 차이가 margin-bottom 일 경우 / [08:22] 태블릿으로 들어갔을때 / [09:05] ihatetimvandamme / [09:43] 확인 / [10:03] 로고 / [11:05] 변경 내용 확인 / [11:31] 로고 애니메이션 효과 확인 / [12:48] 네비게이션 / [13:43] 전체 화면일 경우 소스 보기 / [14:28] 작은 화면일 경우 소스 보기 / [15:05] 좌우 여백 / [16:00] 메뉴 함축 됐을경우 적용 사항 확인 / [17:07] 우측 단축 메뉴 / [17:33] pc와 wide 일 경우 / [18:59] 오퍼시티 값 / [19:56] 웹사이트 이미지 확인 / [20:11] div class=illustration / [20:33] 그룹화 / [21:22] 확인 / [21:59] div class=apes / [22:15] 이미지 애니메이션 효과 확인 / [22:41] 최대 화면일 경우 / [23:45] height 값 확인 / [24:26] 미디어 사이즈 별 적용 부분 확인 / [26:56] 태블릿 적용 내용 확인 / [27:40] 작은 화면에서 아이콘 나왔을 경우 / [28:30] 백그라운드 이미지 / [29:33] 그림자 이미지 / [31:00] 와이드 화면이 아닐 경우 / [32:20] 적용된 내용 확인 / [32:59] 메인 이미지 / [33:30] 와이드 화면일 경우 / [34:37] 와이드 화면보다 작을 경우 / [36:37] div class=line / [37:15] 와이드 화면일 경우 / [37:58] 화면 줄인 후 확인 / [38:58] 모바일 화면일 경우 / [40:29] div class=container / [40:51] 와이드 화면일 경우 / [41:15] 줄인 화면일 경우 / [42:15] 웹사이트 기본값 확인 / [43:51] 기본 스텐다드 확인 / [45:00] 화면 줄이기 / [45:49] ul class=nav-sections / [46:59] 디자인 소스 / [47:36] header class=section-header / [48:44] content / [49:27] 웹사이트 화면 줄이기 / [50:12] ul 목록 이미지 / [50:43] li 값 확인 / [51:27] div class=section-header / [52:45] 텍스트 부분 소스 보기 / [53:37] 여백 값 확인 / [54:36] 폰트 사이즈 / [55:22] 모바일일 경우 h1 / [56:15] 모바일일 경우 p태그 / [56:49] 기본 적용 부분 / [58:29] div class=box box-writing / [58:45] 와이드 화면일 경우 / [59:14] 백그라운드 이미지 확인 / [59:37] box content / [61:07] 사이즈 줄일 경우 / [62:37] 패딩 값 수정 후 확인 / [63:36] 기본 사항일때 / [64:11] 글꼴 변경 확인 / [65:00] 섹션 / [66:10] 제목글 부분 / [66:30] 하단 p태그 / [67:58] 아래 메뉴 / [68:30] ul 목록 확인 / [69:30] li 값 확인 / [72:00] 홀수일 경우에만 백그라운드 컬러 지정 / [73:00] 반복되는 내용 / [74:10] 화면이 작아졌을 경우 / [74:30] 기본값 적용 확인 / [75:23] 웹사이트 하단 / [76:00] footer 사항 / [76:30] 기본 와이드값 / [77:55] 모바일 화면일 경우

07 실제적용 사례 CSS실무코딩 7

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

54분

책갈피 : [00:15] 웹사이트 살펴보기 / [00:36] 기본 설정 부분 / [01:11] body 부분 해당 css / [02:53] 이미지 소스 확인 / [03:05] 이미지 보기 / [04:14] 내용 보기 / [05:00] 기본 선언 / [05:58] clouds img / [06:46] 모바일일 경우 / [07:10] header / [08:48] contents / [09:46] 기본 pc일 경우 적용 사항 / [10:46] 태블릿일 경우 적용 사항 / [11:50] div role=navigation / [12:01] 기본 pc일 경우 적용 사항 / [12:41] 태블릿일 경우 적용 사항 / [13:28] a 링크 / [13:58] li 부분 / [14:13] 웹사이트 보기 / [14:41] 기본 pc일 경우 / [15:39] 일반 텍스트에 적용되는 컬러값 / [15:56] main / [16:45] 소스 보기 / [17:07] 배경 확인 / [19:37] h1 텍스트 부분 보기 / [19:45] 기본 pc일 경우 / [19:56] 태블릿일 경우 / [20:10] general / [20:25] 모바일 화면 보기 / [20:52] serious / [21:37] 섹션 / [22:03] h2 제목글 / [22:22] 기본 pc일 경우 / [23:37] 그림자 / [24:26] 화면 줄인 후 확인 / [25:30] hoist before / [25:55] strip wrap after / [26:41] 모바일일 경우 / [27:07] strip / [27:18] 모바일일 경우 에프터에 대한 선언 / [27:47] viewall / [28:48] gallery / [29:37] 기본 pc일 경우 / [31:07] 모바일일 경우 / [32:07] 밑 메뉴 확인 / [33:20] 이미지 확인 / [33:45] section class=group / [34:45] pc일 경우 이미지 / [35:30] 태블릿일 경우 / [36:22] p class=colonel serious / [38:15] split snip / [39:07] div class=reasons / [40:34] 현재 내용 확인 / [42:15] 배경 이미지 확인 / [42:37] 내부 텍스트 값 / [44:30] div class=actions / [44:52] li 보기 / [45:52] actions li / [46:43] 웹사이트 화면 보기 / [47:29] nav class=conditions / [48:51] 메뉴에 대한 ul 목록 / [50:14] footer role=contentinfo / [52:09] 이미지

08 실제적용 사례 CSS실무코딩 8

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

59분

책갈피 : [00:02] 웹사이트 확인 / [00:10] 소스 보기 / [01:19] 기본 설정 부분 확인 / [01:59] 주의 할 부분 / [02:43] div class=svtseGlobalHeaderContainer / [04:10] 모바일일 경우 차이 / [05:00] 웹사이트 모바일로 함축 / [05:56] nav 태그 내용 / [06:45] div id=global-navigation / [07:15] 위치, width 값 확인 / [08:01] media 태그 변경 확인 / [08:35] header role=banner / [09:05] a 링크-pc 사이즈일 경우 / [10:00] 모바일일 경우 / [10:56] 실제 적용된 사항 살펴보기 / [11:43] 이미지 css 확인 / [13:01] div id=global-nav / [13:28] 일반 pc일 경우 / [13:48] div id=global-links / [14:03] 일반 pc일 경우 / [14:50] ul 태그 / [15:35] 평상시 li 값 알아보기 / [16:22] 기본적인 css 사항 / [17:55] ul id=global-services / [19:06] li 값 확인 / [20:07] ul id=global-search / [20:37] 기본 사항일 경우 / [21:56] li에 대한 선언 / [23:18] 일반 pc일 경우 / [24:33] input 확인 / [25:41] ul id=global-menu / [27:02] 바 부분 / [27:26] 일반 pc일 경우 / [28:15] 모바일일 경우 / [29:14] div class=messageTypevma / [30:21] div class=svtContainerBase / [31:15] 일반 스텐다드 사항 / [32:51] 태블릿일 경우 / [33:58] 모바일일 경우 / [34:37] 기본 설정 파일 셋팅 / [35:07] 바 밑 부분 내용 / [36:00] 기본 적용 사항 확인 / [37:07] 기본적인 섹션 적용사항 / [37:15] pc 일 경우 / [38:00] 모바일일 경우 / [38:28] 기본 설정 파일 / [38:58] div class=svtServiceHeader svtXClearFix / [39:52] 확인 / [40:37] 오른쪽 섹션 / [42:21] 웹사이트 사진 div / [43:22] div class=svtUnit svtNth-1 / [44:22] 기본 css / [45:07] 태블릿일 경우 변경 사항 / [46:22] section class=svtContainerFull / [47:15] 내부, 외부 여백 / [48:07] div class=svtnit-1 svtnit-1-2 / [49:36] div class=svtUnit svtnit-3 / [50:37] 모바일, 태블릿일 경우 / [52:22] 절대값 정렬 확인 / [54:06] footer / [55:07] 일반 pc 버전일 경우 / [56:04] 모바일 버전일 경우 / [57:52] 태블릿일 경우 / [58:38] 하단 부분 / [59:06] 요약

09 실제적용 사례 CSS실무코딩 9

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

1시간 6분

책갈피 : [00:10] 웹사이트 확인 / [00:28] 소스 분석 / [01:02] media=screen, projection / [02:46] meta name=viewport / [03:12] 모바일일 경우 / [04:24] head content / [04:46] div id=header_area / [05:27] div class=page / [06:25] header 부분 사이즈가 바뀔 경우 / [07:46] div class= faux_page / [08:15] 일반 pc일 경우 / [09:48] 웹사이트 화면 확인 / [09:58] div class=header_left / [11:31] 로고 이미지 / [11:46] css 보기 / [12:22] 모바일, 태블릿일 경우 / [12:56] 로고 이미지 확인 / [13:16] div class= menu-main-menu-container / [13:52] 일반 pc일 경우 / [15:41] ul 확인 / [16:03] 모바일, 태블릿일 경우 / [16:44] li 확인 / [17:44] 달라진 li 값 확인 / [19:03] 절대값이 right 일 경우 / [19:48] li 목록 확인 / [21:10] div class=faux_feature / [22:40] 기본 스텐다드 사항 확인 / [23:07] 이미지 확인 / [23:37] img id=feature_backpack / [24:26] 모바일, 태블릿일 경우 / [26:30] div class=feature_right / [26:47] 일반적인 사항일 경우 / [28:45] p 태그 확인 / [30:03] 로그인 창 / [30:26] 소스 확인 / [30:56] 폼 속성 / [31:10] 기본 설정 부분 / [32:07] in put / [34:04] 모바일 사이즈일 경우 버튼 확인 / [34:52] div class=faux_page / [35:07] 일반적으로 정의된 내용 / [36:30] h2 class=homepage_navigation / [37:35] 모바일 사이즈일 경우 / [38:50] div class=format_text / [39:04] div class=group / [39:30] 이미지 소스 확인 / [40:58] 텍스트 소스 확인 / [42:57] div class=story_content format_text / [43:30] 일반적인 사항일 경우 / [43:52] 추가 적용된 사항 / [45:22] 이미지 / [46:37] 추가 적용된 사항 / [47:37] 모바일일 경우 / [48:37] div class=homepage_quote format_text group / [49:22] 모바일일 경우 / [50:07] 요소 확인 / [52:22] 모바일일 경우 / [53:27] div class=featured_logos group / [53:37] 이미지 확인 / [54:30] 웹사이트 화면 줄이기 / [54:54] 모바일 사이즈일 경우 / [56:27] img class=img_opa / [57:07] 모바일 사이즈일 경우 / [57:37] div class=homepage_latest format_text group / [58:59] div 설정 내용 확인 / [59:30] 기본 사항일 경우 / [60:30] 홈페이지 하단 확인 / [61:22] pc 화면일 경우 / [62:43] li 태그 확인 / [63:49] 여백 내용 확인 / [64:25] 추가적인 팁

10 실제적용 사례 CSS실무코딩 10

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

45분

책갈피 : [00:02] 웹사이트 확인 / [00:23] 소스 보기 / [01:15] div class=wrapper / [02:00] pc 부분 적용 확인 / [03:37] body 부분 확인 / [04:12] div id=header-main / [05:14] 일반 pc 적용사항 확인 / [06:38] 로고 / [07:30] div id=nav / [07:55] 해당 내용 확인 / [08:45] 일반 와이드일 경우 / [09:03] 변경된 패딩값 확인 / [10:09] ul목록 확인 / [11:01] li 메뉴 보기 / [11:26] div id=topright / [12:24] 적용된 사항 확인 / [13:41] div class=h-category hamburger / [15:20] div id=menu class=hamburger / [16:30] 요약 / [18:07] 웹페이지 몸통 부분 / [18:41] div class=wrapper clearfix / [19:11] 와이드 화면일 경우 / [20:02] 특이한 점 / [20:18] section id=author / [21:51] 적용 확인 / [22:37] 웹사이트 화면 줄인 후 메뉴 확인 / [23:47] section id=m-author / [25:22] section id=advert / [25:41] 평상시 화면 적용 확인 / [26:03] 존속된 사항 확인 / [28:03] css 보기 / [28:59] 마진 값 수정 / [30:00] 없어지는 사항 / [30:21] 중앙 부분 / [31:03] div id=announcement / [31:52] 존속된 사항 확인 / [33:58] 모바일일 경우 / [34:15] 차이 알아보기 / [34:37] 포함되는 내용 확인 / [35:07] 기본 반영사항 확인 / [36:57] footer 부분 / [37:42] 네비게이션 / [38:45] ft-nav / [39:50] 기본 사항 / [40:49] ul 목록 / [40:59] 일반 pc일 경우 / [41:44] 모바일일 경우 / [42:44] float: right / [42:53] 카피라이트 / [43:37] 백그라운드 이미지 부분 확인

11 실제적용 사례 CSS실무코딩 11, 12

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

38분

책갈피 : [00:07] 웹사이트 확인 / [00:21] 소스 보기 / [00:47] 기본적으로 선언된 사항 / [01:23] div id=site / [02:42] div id=header / [03:34] 메뉴가 밀릴 경우 / [04:30] 로고 / [05:15] 화면이 줄어들었을 경우 / [06:00] 모바일일 경우 / [07:00] div id=contact / [08:15] 태블릿 이하 적용 사항 확인 / [09:33] ul id=nav / [10:33] 변경 사항 확인 / [11:37] 태블릿 이하 적용 사항 확인 / [12:56] div id=illustration-parts / [14:18] 버튼 / [15:07] cta-grey / [16:11] div class=markers / [17:32] div class=section / [17:52] 첫번째 섹션 확인 / [18:56] 모바일일 경우 / [19:48] 두번째 섹션 / [20:14] 다르게 적용된 부분 확인 / [21:17] nth-child / [21:45] 세번째 섹션 / [23:00] 설정 값 확인 / [23:51] div id=partners / [24:40] 설정 값 확인 / [25:48] 하단 footer / [26:15] div class=center clearfix / [27:22] 모바일 사이즈일 경우 / [28:18] ul id=client-services / [29:15] 2페이지 보기 / [30:07] div id=header / [30:41] pc 화면일 경우 / [31:52] 제목글 보기 / [32:29] 태블릿일 경우 변경사항 확인 / [33:00] ul 부분 / [34:37] 화면 줄인 후 확인 / [35:05] div class=work / [36:29] 내용이 두줄이 될 경우

12 실제적용 사례 CSS실무코딩 13

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

45분

책갈피 : [00:02] 웹페이지 확인 / [00:10] 소스 보기 / [00:24] div id=testata / [00:46] 기본 pc일 경우 / [02:00] div id=menu / [02:38] 기본 pc일 경우 / [03:00] 태블릿일 경우 / [04:15] 로고 / [04:24] div class=wrap / [05:30] 와이드일 경우 / [06:11] 모바일일 경우 / [06:41] 대 화면 로고 css 확인 / [07:55] 태블릿일 경우 / [09:05] a id=expand_menu / [09:58] 이미지 / [11:09] span id=expand_button / [12:28] ul class=menu left it / [13:18] 메뉴가 두줄이 됐을 경우 / [13:46] 태블릿일 경우 / [14:18] css 정의 확인 / [15:20] 모바일일 경우 / [16:33] li에 a가 있을 경우 / [17:15] pc와 와이드 화면 일때 비교 / [18:07] 모바일일 경우 / [19:18] ul class=menu right it / [20:07] div id=lingue / [20:41] 태블릿일 경우 / [21:26] 모바일일 경우 / [21:59] div의 ul 목록 / [23:18] div class=imgtestata / [23:56] css 정의 확인 / [25:03] div id=content / [25:37] pc와 와이드일 경우 / [26:00] 소스 오류 / [26:18] 태블릿일 경우 / [27:29] div class=wrap / [27:51] 와이드일 경우 / [28:15] pc일 경우 / [29:21] 모바일일 경우 / [30:00] div class=left_home / [31:40] div class=right_home / [32:30] div id=slide_vini / [32:49] 와이드, pc일 경우 / [33:37] 태블릿, 모바일일 경우 / [34:30] 이미지 내용 확인 / [34:51] 이미지가 pc 버전에서 오버되는 이유 / [36:22] div id=news_home / [36:30] 와이드, pc일 경우 / [37:28] footer 내용 확인 / [38:00] 태블릿일 경우 / [38:43] 모바일일 경우 / [39:37] div class=wrap / [40:30] 기본 셋팅 확인 / [40:50] div class=sezione_footer sezi / [41:22] 와이드, pc일 경우 / [42:27] 모바일일 경우 / [43:15] 웹페이지 하단 부분 / [44:06] pc 버전 이하 내용

13 실제적용 사례 CSS실무코딩 14

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

42분

책갈피 : [00:01] 웹페이지 확인 / [01:00] div class=wrap header role=banner / [01:10] 평상시 적용된 내용 / [02:00] 모바일일 경우 / [02:57] div class=container / [03:15] 로고 / [04:29] 모바일일 경우 / [05:29] div class=externalWrap / [06:00] div class=external / [07:15] 첫번째 내용 / [08:39] li 확인 / [09:11] 평상시 내용 / [09:33] 모바일일 경우 / [10:28] 아이콘 부분 / [10:54] 공통 적용된 li 값 확인 / [11:31] 추가된 사항 / [12:28] div class=external / [12:41] 기본 적용사항 확인 / [12:58] nth-of-type / [13:18] 태블릿일 경우 / [15:01] 이미지 / [15:43] 존속된 사항 확인 / [16:44] 웹페이지 세번째 메뉴 / [17:06] p class=header-single-link / [17:52] 태블릿일 경우 / [18:21] 모바일일 경우 / [18:40] 검색바 / [19:25] 모바일일 경우 / [20:11] li 값 확인 / [21:02] 일반 pc, 태블릿일 경우 / [21:15] 모바일일 경우 / [22:47] 기본적인 input에 대한 선언 / [24:32] 버튼 / [24:56] 모바일일 경우 / [26:07] input 값 확인 / [26:26] 평상시 적용 사항 / [27:45] 메뉴 / [28:00] ul id=nav role=navigation / [29:33] div class=container / [30:30] 모바일일 경우 / [31:15] li 확인 / [32:37] li 내부에 이미지가 있을 경우 / [33:45] 태블릿일 경우 / [34:07] 모바일일 경우 / [35:21] fieldset / [37:12] 웹페이지 하단 / [38:00] 모바일일 경우 컬러값 / [39:05] li 값 확인 / [40:07] 백그라운드 이미지 / [41:05] 모바일일 경우

14 실제적용 사례 CSS실무코딩 15

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

1시간 16분

책갈피 : [00:05] 웹페이지 확인 / [00:20] header id=globalheader / [00:55] 평상시 화면일 경우 / [01:30] 모바일일 경우 / [02:15] div class=content / [03:30] 모바일일 경우 / [04:46] 태블릿일 경우 / [06:00] ul class=tbar-left / [06:39] li 값 기본 사항 / [07:09] 모바일일 경우 / [07:41] 변경된 폰트 사이즈 확인 / [08:11] 이미지 확인 / [08:46] pc, 태블릿일 경우 / [09:01] ul id=umenu / [10:22] ul class=tbar-right / [10:46] li class=tb-maps / [11:03] 모바일일 경우 / [12:13] a 링크 알아보기 / [13:26] 모바일일 경우 / [14:24] 태블릿일 경우 / [15:28] li class=tb-lang / [16:26] li id=ibutton / [16:40] 평상시 화면일 경우 / [17:00] 모바일일 경우 / [17:59] 좌표 / [18:33] div class=content / [20:52] 로고 / [21:21] 일반 pc 일 경우 / [22:14] 모바일 전 상황 / [23:17] 모바일일 경우 / [24:10] nav id=actionnavi / [24:26] 일반 pc 일 경우 / [25:26] 모바일일 경우 / [25:56] input 확인 / [27:45] input type=submit / [29:29] li에 내용이 있을 때 / [29:48] 태블릿일 경우 / [30:21] 평상시 화면일 경우 / [30:47] 모바일일 경우 / [31:41] 메뉴 / [32:15] nav id=globalnavi class=grid grid-12 first / [33:20] 태블릿일 경우 / [34:13] 모바일일 경우 / [34:52] ul class=sec-top / [35:42] 태블릿일 경우 / [35:59] ul class=mainlinks / [36:35] 태블릿일 경우 / [37:22] li 태그의 열쇠 / [39:30] 모바일일 경우 li 값 / [40:22] 두번째 a링크 / [40:51] div class=content bm-10px / [40:58] pc 일 경우 / [41:30] 태블릿일 경우 / [42:50] div class=grid grid-12 first / [43:45] 모바일일 경우 / [44:15] div id=slideshow / [45:37] 이미지가 변경됐을 때 / [47:22] ul class=link-audience png_bg / [48:22] 작은 사이즈가 됐을때 / [49:00] 모바일일 경우 / [50:00] 텍스트 사이즈 / [51:22] 모바일일 경우 / [52:15] li class=btn-request-info / [53:15] 태블릿일 경우 / [54:07] 모바일일 경우 / [54:30] 간과하지 말아야 할 점 / [56:15] 태블릿일 경우 폰트 사이즈 / [56:35] 모바일일 경우 폰트 사이즈 / [57:22] div class=program-links / [58:52] ul 목록 확인 / [59:44] 패딩값 / [60:44] div class=content featured / [62:22] 평상시 화면일 경우 / [63:37] 태블릿일 경우 / [64:14] 모바일일 경우 / [64:38] 웹페이지 하단 / [66:26] h1 적용사항 확인 / [67:28] 평상시 화면일 경우 / [67:45] 모바일일 경우 / [69:00] footer / [69:53] 평상시 화면일 경우 / [70:11] div class= grid gird-4 first grid-reset / [70:30] 평상시 화면일 경우 / [71:15] 태블릿일 경우 / [72:00] div class=grid grid-8 grid-reset / [73:18] 화면에 따른 크기 차이 / [74:30] 카피라이트

15 실제적용 사례 CSS실무코딩 16

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

1시간 6분

책갈피 : [00:09] div class=navbar navbar-inverse navbar-fixed-top / [01:34] pc 사이즈일 경우 / [02:20] 모바일일 경우 / [02:53] 마진값 제거 후 확인 / [03:28] div class=centered / [04:15] pc 사이즈일 경우 / [05:25] 태블릿일 경우 / [06:00] 모바일일 경우 / [07:15] div class=navbar-inner / [08:18] 평상시 적용된 사항 / [08:39] 모바일일 경우 / [09:58] div class=nav-collapse collapse / [10:33] 평상시 적용된 사항 / [11:33] ul class=nav / [12:26] 모바일일 경우 / [14:41] li 목록 확인 / [15:03] 와이드 화면일 경우 / [15:35] 여백 확인 / [15:56] 태블릿일 경우 / [16:55] 모바일일 경우 / [17:40] 여백 차이 / [18:52] 평상시 css 선언 / [19:33] li id=search / [20:45] 태블릿일 경우 / [21:33] search가 없어진 이유 / [22:26] div class=inline-search / [22:56] 평상시 설정 / [23:56] button type=button / [24:41] button type=button / [25:30] section id=logowrap / [26:15] 태블릿 전 사이즈 일 경우 / [26:52] 태블릿일 경우 / [27:59] 모바일일 경우 이미지 확인 / [28:51] 내용 보기 / [29:41] nav id=global role=navigation / [30:37] pc일 경우 / [31:36] 모바일일 경우 / [32:07] tickets& shows / [32:19] 평상시 설정 / [32:52] 모바일일 경우 / [33:58] 평상시 내용일때 ul 목록 / [34:35] 일반 pc 사이즈일 경우 / [35:37] 모바일 li 값 확인 / [37:42] 평상시 a가 있을 경우 / [38:37] 이미지 / [38:45] css 선언 보기 / [39:49] 폰트 사이즈 변경 확인 / [40:22] 태블릿일 경우 / [41:00] 모바일일 경우 / [41:37] 아래 이미지 와이드일 경우 / [42:00] 일반 pc 사이즈일 경우 / [42:22] 모바일일 경우 / [43:21] 화면에 따른 폰트 사이즈 변경 확인 / [44:00] pc 화면일 경우 / [44:29] 모바일일 경우 / [44:52] li 태그 / [45:45] 평상시 내용 / [47:00] 모바일일 경우 / [48:04] 섹션 확인 / [48:37] section class=callout / [49:30] 모바일일 경우 / [50:57] section id=content / [51:19] 와이드일 경우 / [52:22] 모바일일 경우 / [53:45] 와이드일 경우 기본적인 사항 / [54:22] 모바일일 경우 넓이값 / [56:12] 두가지 텍스트 유형 / [57:00] 모바일일 경우 / [58:27] 모바일일 경우 p태그 사이즈 확인 / [59:14] aside id=side bar / [59:30] 평상시 사이즈 확인 / [60:45] footer / [61:59] 모바일일 경우 / [62:37] 메뉴 / [63:00] 평상시 내용 / [64:00] li 보기 / [65:43] 우측 하단 내용

[전문가 skillup]

16 실제적용 사례 CSS실무코딩 17

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

56분

책갈피 : [00:08] 웹페이지 확인 / [00:44] 이미지 / [01:07] div id=branding / [01:37] 일반적인 선언 보기 / [02:06] 모바일일 경우 / [02:38] 이미지 확인 / [03:58] 밑 이미지 css 확인 / [04:46] a링크 됐을 경우 로고 확인 / [05:46] 평상시 백그라운드 포지션 / [06:46] ul id=navigation_pri / [07:00] 평상시 화면일 경우 / [08:54] 모바일일 경우 / [09:58] li 태그 / [10:09] 평상시 화면일 경우 / [11:00] 백그라운드 이미지 설정 확인 / [12:01] 외부 여백 확인 / [12:33] 모바일일 경우 넓이 / [13:48] 웹페이지 하단 내용 보기 / [14:43] 새 웹페이지 확인 / [15:05] div id=page class=sc-home / [15:58] div id=masthead / [16:37] 백그라운드 이미지 선언 확인 / [17:22] 웹페이지가 줄어들었을 경우 / [18:51] 모바일일 경우 적용사항 / [19:55] 해당 css에 h1이 있을경우 / [20:14] 로고 확인 / [21:18] a링크에 이미지가 있을 경우 / [22:21] 로고 추가 설정 부분 / [22:52] ul id=nav / [23:06] 평상시 선언 확인 / [24:15] 모바일일 경우 / [25:51] 실제 적용된 사항 / [27:45] 처음 이미지 적용 사항 / [29:25] 화면이 줄었을 경우 li 확인 / [30:45] 보더값 / [31:17] 백그라운드 이미지에 포지션 주기 / [31:30] 포지션 이미지 확인 / [32:15] 가운데 메뉴 / [32:37] div id=promo-nav / [32:52] 모바일일 경우 / [33:52] 평상시 사항 / [35:07] 평상시 li / [36:00] promo-nav li a 보기 / [36:45] 좌,우 두개가 됐을 경우 / [37:00] li와 a값 확인 / [38:20] 평상시 최소높이 / [39:04] div id=primary / [39:22] 평상시 사항 / [40:00] 태블릿일 경우 / [41:52] 웹페이지 오른쪽 부분 / [42:15] 평상시 사항 / [43:12] 모바일일 경우 / [44:21] div class=inner / [45:50] 모바일일 경우 / [46:30] 이미지 확인 / [47:52] div id=footer / [48:30] div class=inner / [49:13] 평상시 사항 / [50:15] div id=social / [50:37] 내용 확인 / [52:07] 컬럼 카운트 확인 / [52:49] 평상시 li 내용 / [53:34] 카피라이트 / [55:01] 모바일일 경우

17 실제적용 사례 CSS실무코딩 18

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

52분

책갈피 : [00:05] 웹페이지 확인 / [00:35] header id=branding / [01:06] 웹페이지 상단 보기 / [02:06] min-width 확인 / [03:46] 평상시 선언 사항 / [04:15] div id=head-inner / [04:46] 와이드 화면일 경우 변경 사항 / [06:15] pc일 경우 / [07:28] a id=back-home / [07:54] 일반적인 사항일 경우 / [08:56] div clss=logo / [09:31] 모바일일 경우 / [09:58] 와이드와 일반 pc일 경우 / [10:26] 변경 사항 확인 / [12:05] 이미지 / [13:43] 일반적인 사항 / [14:43] 아이콘 소스 보기 / [14:58] div id=mini-nav / [15:58] a 링크 / [17:14] 주목해야할 부분 / [17:48] div id=mini-search / [18:30] 평상시 선언 / [19:07] div id=search-container / [19:40] 평상시 선언 / [20:18] 변수 확인 / [20:37] 와이드 화면일 경우 width 값 / [21:44] 메뉴 / [23:11] css 설정 확인 / [23:52] 메인 부분 / [24:26] div id=main / [25:18] 외부 여백 확인 / [26:45] div id=primary / [28:45] 모바일일 경우 / [29:45] div class=inner / [30:03] 와이드일 경우 / [30:37] pc와 태블릿일 경우 / [31:41] h1에 대한 태그 / [32:30] 모바일일 경우 / [33:21] 이미지 값 살펴보기 / [33:57] div id=social / [36:00] div id=secondary / [36:44] 기본 사항 / [38:37] footer / [38:52] 일반적인 사항 보기 / [39:35] 사이즈 확인 / [41:07] div class=signup / [41:29] 평상시 화면일 경우 / [42:34] colophon.signup / [43:20] 기본적인 적용 사항 / [44:14] div class=item / [45:22] 일반적인 사항일 경우 / [45:45] 화면 줄여졌을 경우 / [47:14] ul class=nav / [48:58] colophon.nav li / [49:37] 차이점 / [50:22] div class=mission / [51:14] 차이점

18 실제적용 사례 CSS실무코딩 19, 20, 21

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

1시간 32분

책갈피 : [00:05] 웹페이지 확인 / [00:56] body 알아보기 / [01:19] body id=Home class=no-js / [01:59] 팝업 확인 / [03:30] ul id=Accessibility / [03:59] 평상시 사이즈, 와이드일 경우 / [04:41] 모바일일 경우 / [05:00] div id=ToolbarWrapper / [06:15] ul class=left / [07:46] ul class=right / [08:37] 변경 사항 / [09:20] 평상시 내용 확인 / [10:24] li 값 확인 / [11:26] 화면 크기가 줄었을 경우 / [12:22] 일반 li 값이 출력되는 이유 / [13:05] width 값 해당하는 내용 확인 / [13:37] li class=likontakt / [14:24] li class=lirss / [15:03] rss 정의 부분 확인 / [16:03] 일반 설정 사항 / [17:11] 로고 설정 확인 / [18:26] search 대해 알아보기 / [18:37] div id=searchform class=clearfix / [19:03] 일반 정의 내용 보기 / [19:22] 화면 크기가 줄었을 경우 / [20:37] 텍스트 사이즈 확인 / [21:41] input type / [22:59] 메뉴 / [23:18] ul에 대한 선언 알아보기 / [24:56] 화면 크기 변화에 따른 ul 태그 확인 / [25:48] 기본 사항 확인 / [26:48] 평상시 정의된 a 사항 / [27:33] a링크 확인 / [28:33] 변경된 li 사항 / [29:15] 내부 a링크 확인 / [29:56] div id=Aktuellt / [30:18] 와이드 화면일 경우 / [31:11] 화면 줄었을 경우 내부 여백 변경 확인 / [32:06] 외부 여백 추가 확인 / [32:22] p class=ribbon / [33:37] div class=featureimage / [34:37] div class=featureText / [35:52] div id=main / [36:04] 평상시 화면일 경우 / [36:37] 모바일일 경우 / [37:22] ul id=Breadcrumb / [38:22] h2 class=entry-title / [39:37] div class=entry-meta-wrapper / [40:29] ul의 평상시 설정 / [41:30] li 목록 확인 / [42:20] 텍스트 선언 확인 / [42:45] a링크 확인 / [44:36] 오른쪽 메뉴 div 확인 / [45:51] 하단 메뉴 / [47:14] div id=landskapswrapper / [48:21] div id=landskap1 / [48:45] div id=landskap2 / [50:20] div id=etikettmoln / [50:30] 평상시 화면일 경우 / [52:19] footer 확인 / [53:07] 카피라이트 부분 / [53:43] 웹페이지 확인 / [53:52] div id=wrap / [54:27] 화면 줄어들었을 경우 / [55:27] header role=banner / [55:49] 모바일일 경우 / [56:22] 로고 확인 / [56:45] div id=logo / [56:50] 평상시 화면일 경우 / [58:00] ul class=group / [58:52] 평상시 li 확인 / [59:15] 평상시 a링크 확인 / [60:30] article / [60:35] 기본 사항일 경우 / [61:44] article aside / [62:45] 제목글에 h4가 있을 때 / [62:50] 평상시 화면일 경우 / [63:30] 본문 아래 텍스트 부분 / [64:00] 모바일일 경우 / [65:30] 웹페이지 아래 부분 / [66:00] 모바일일 경우 / [66:45] div.mod-main / [67:14] 모바일일 경우 / [67:43] div.mod-alt / [68:41] footer / [68:58] 일반 사항일때 / [70:08] 새로운 웹페이지 보기 / [70:45] div class=inner / [73:38] 일반적인 설정일 경우 / [74:27] 로고 / [74:30] 와이드 화면일 경우 / [75:00] 로고 뒤 이미지 / [75:23] 일반 pc 화면일 경우 / [77:14] ul.nav / [79:09] ul.nav li / [79:58] li.first a / [80:42] ul.nav li.first a / [81:15] intro 평상시 경우 / [82:30] 모바일 화면일 경우 / [83:15] 이미지 / [83:30] .main / [84:30] 와이드 화면일 경우 / [85:15] figure / [87:15] footer / [88:03] 추가 부분 확인 / [89:30] margin-left 값 수정 / [90:33] 넓이값

19 실제적용 사례 CSS실무코딩 22

반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

1시간 8분

책갈피 : [00:00] 웹페이지 확인 / [00:11] body class=home / [00:46] 일반 body 설정사항 확인 / [00:56] css 특이점 / [02:45] 태블릿일 경우 / [03:05] 태블릿 이상일 경우 해당 이미지 / [04:15] 모바일일 경우 해당 이미지 / [05:00] 태블릿 이상 사이즈일 경우 기본 내용 / [05:43] 네비게이션 태그 / [06:15] 현재까지 내용 확인 / [07:00] 평상시 컬러값과 폰트 사이즈 확인 / [07:15] 모바일일 경우 / [07:57] ul class=clearfix / [09:46] li 값 확인 / [09:56] 태블릿 이상일 경우 / [10:33] 사이트 화면 줄었을 경우 / [11:11] 반영 안되는 사항 / [12:11] span class=nav-bar clearfix / [12:26] 일반 pc, 와이드일 경우 / [13:46] 사이트 화면 줄었을 경우 / [15:15] header class=vevent clearfix / [15:24] 일반 pc, 와이드일 경우 / [16:03] 모바일일 경우 / [17:37] hgroup / [17:56] 일반 pc일 경우 / [18:52] 추가적인 일반사항 / [19:29] 태블릿일 경우 / [20:41] header h1 / [21:26] 화면 줄었을 경우 텍스트 사이즈 확인 / [22:03] 일반적인 사항일 경우 / [23:07] header h2 / [23:56] 화면 줄었을 경우 / [24:26] 모바일 사이즈일 경우 기본 선언 / [25:00] span class=ribbon / [25:29] 와이드 화면일 경우 / [26:48] section class=introduction / [27:41] 화면 줄었을 경우 기본 정의사항 / [28:26] h2 이미지 / [29:18] 일반적인 사항 / [30:10] pc나 와이드일 경우 / [31:40] introduction img 일반적 사항 / [32:22] div class=section / [34:04] 웹사이트 화면에 따른 내부 여백 확인 / [35:07] 모바일일 경우 / [36:45] span clss=we-are-8 / [37:57] 평상시 화면일 경우 / [38:22] section class=speakers-list section bleed clearfix / [38:45] 와이드일 경우 / [39:07] 웹사이트 화면 줄어들었을 경우 / [39:45] 모바일일 경우 / [40:35] li 태그 확인 / [41:04] 와이드일 경우 / [42:04] li 별도 선언 값 확인 / [43:30] 두번째 li 확인 / [46:13] 기본적인 li 값 확인 / [47:49] li 이미지 확인 / [48:07] 태블릿일 경우 / [49:36] 두번째 이미지 내용 확인 / [50:45] 화면 줄어들었을 경우 첫번째 li 값 확인 / [51:22] 두번째 내용 확인 / [52:57] 흰색 라인 생성 / [54:15] 주석 처리 부분 제거 / [54:58] 확인 / [56:22] div class=social-links section clearfix / [57:15] 화면 줄어들었을 경우 / [58:45] li에 대한 차이 / [59:12] li class=twitter / [59:37] 포지션 정의 부분 / [61:37] 퍼센트 정의 부분 / [62:59] 밑 메뉴 부분 / [63:15] li에 a가 있는 경우 / [63:57] 기본 적용 사항 / [65:00] 화면 줄어들었을 경우 / [66:41] 웹페이지 하단 로고 / [67:12] footer small img / [67:46] 팁

20  워드프레스와 반응형웹

반응형웹을 지원하는 워드프레스의 Twenty Twelve 테마, Twenty Fourteen 테마, Twenty Thirteen 테마, Twenty Eleven 테마를 활용해 코딩 실습을 진행합니다.

1시간 20분

책갈피 : [00:06] 워드프레스의 반응형 웹 / [00:22] 내용 보기 / [01:03] 미디어 스크린일 경우 적용사항 / [02:15] pc, 와이드 이하일 경우 / [03:07] 전체 내용 페이지 소스 확인 / [04:29] body.site / [05:29] 반영된 내용 확인 / [06:15] 사이즈 줄었을 경우 / [08:50] 메뉴 확인 / [09:13] 문제점 / [09:35] 메뉴 소스 보기 / [10:24] menu-toggle / [11:15] main-navigation ul.nav-menu / [12:37] 버튼 요소 확인 / [13:18] 평상시 적용값 확인 / [13:52] 테블릿 이하 모바일일 경우 / [15:03] 평상시 사항일 경우 / [16:00] main-navigation ul.nav-menu / [17:52] 컬러 추가 / [18:37] 화면 줄였을 경우 나머지 부분 / [19:18] 평상시 사항일 경우 / [20:03] widget-area / [21:52] 워드프레스 테마 보기 / [22:17] 헤드 부분 보기 / [22:48] 화면 사이즈 변경 / [23:18] masthead-fixed.site-header / [23:36] site-header / [24:03] 차이점 / [25:07] div class=header-main / [26:17] 화면 줄어들었을 경우 / [27:03] h1 class / [27:52] 화면 줄어들었을 경우 / [28:11] 검색 버튼 / [28:45] 화면 줄어들었을 경우 / [29:51] 메뉴 / [30:37] 메뉴 부분 페이지 소스 보기 / [31:11] primary-navigation.nav-menu / [31:25] 화면 줄어들었을 경우 / [32:22] 메뉴 단축 버튼 / [33:22] menu-toggle / [34:37] menu-toggle:before / [36:15] secondary / [37:19] 와이드 화면일 경우 / [38:22] 화면 줄어들었을 경우 / [39:21] main-content / [39:29] 왼쪽에 메뉴가 있는 경우 / [40:37] 평상시 사항일 경우 / [41:52] 화면 줄어들었을 경우 / [42:28] list-view.site-content.hentry / [43:29] 차이 비교 / [44:50] site-description / [46:05] 마우스 오버시 메뉴 차이점 / [46:44] secondary-navigation a / [47:00] site-navigation li / [48:22] secondary-navigation ul ul / [49:07] 하단 메뉴 부분 / [49:45] footer-sidebar.widget / [50:30] 테마 보기 / [51:13] 소스 보기 / [51:52] 화면 확대 후 보더 확인 / [52:22] 평상시 사항일 경우 / [53:52] 화면 사이즈 줄였을 경우 / [55:30] 링크 부분 소스 보기 / [55:45] site-header.home-link / [57:34] site-title / [58:07] 도메인 주소 / [58:30] clip / [60:28] menu-toggle / [61:29] 검색 버튼 / [62:15] entry-header / [62:37] 태블릿 화면일 경우 / [64:00] entry-title / [65:15] 태블릿 화면일 경우 / [65:30] 화면 줄어들었을 경우 / [66:30] 위젯 차이 확인 / [67:53] 반응형 웹 화면 보기 / [68:15] body, input,textarea / [69:45] site-title / [71:00] 링크 값 / [71:38] site-title a / [72:13] site-description / [73:15] branding searchform / [74:43] access ul / [75:38] 본문 내용 / [76:45] 우측 내용 / [78:02] supplementary.two.widget-area

샘플확인 : 알지오 검색후 -> 강의검색란 -> 반응형웹 [전문과정]