드림위버 [기초+실무]

19회차 속성과정
전체 : 10시간 19분|회차당 평균 : 32분34초

이용기간 2개월

전문강사 : 알지오 R&D [IT]

드림위버 [기초+실무] 인강 평생교육원 교육 안내
웹개발을 쉽게 하기 위한 응용프로그램으로 웹표준에 대해서 코드 이해가 부족하더라도 쉽게 학습이 가능합니다. 하지만 웹디자인이 아닌 개발을 원하신다면 웹표준부터 학습하는 것을 추천합니다. 웹디자인 학습과정 중에서는 필수로 학습해야 하는 과정이며 간편한 웹페이지를 구성하는 것부터 css3 스타일을 이용해 프로젝트를 구성할 수 있습니다. 간단한 메뉴 이용으로 웹개발을 원한다면 권장합니다.

01.30분 로컬과 리모트 실시간 작업
웹문서 개념, 호스트 도메인, 내 pc에서 작업한 내용을 바로 도메인에서 확인

책갈피[00:04] 드림위버 환경 설정/[01:09] 사이트 정의/[03:18] 새 문서 생성/[06:53] 편집기로 보기/[09:13] 호스트 도메인 설정/[13:54] PC와 웹 호스팅 동기화/[16:27] 루트 폴더 변경/[19:27] 웹 호스팅에 업로드/[24:00] 인코딩/[27:18] 인코딩 옵션 설정
02.35분 웹사이트 제작
CSS Designer 활용 및 하드코딩 동시에 사용해서 기존내용의 수정방법

책갈피[00:16] 템플릿 이용하여 새문서 만들기/[03:40] 속성창/[07:33] viewport/[11:38] margin-left:auto/[17:25] css 속성/[22:24] CSS Designer/[25:04] 폰트 변경/[29:57] 디자인 모드에서 css 변경
03.35분 웹사이트 제작 2 + 모바일 ~ PC까지 반응형웹
인서트 를 사용한 엘리먼트 추가후 CSS의 클래스 출력 원하는 위치에 DIV 넣기

책갈피[00:23] 엘리먼트 추가/[03:42] id, class/[07:24] css 추가/[10:03] css 상속관계/[14:49] position:relative/[18:03] F10 소스보기/[23:16] id/[28:09] Media Query 추가/[31:56] 반응형 웹
04.30분 웹사이트 제작 3 + 모바일 ~ PC까지 반응형웹
반응형 웹 전반적인 내용 @media 사이즈 별 각각 수정방법

책갈피[00:00] 반응형 웹 반영영역/[05:16] 메뉴 기본 개념/[10:26] 메뉴 Media Query/[16:07] 모바일 때 Media Query/[19:53] PC일 때 css/[24:08] width:16%
05.34분 웹사이트 제작 4 + 모바일 ~ PC까지 반응형웹
에니메이션, 이미지맵, @media 사이즈 별 각각 수정방법

책갈피[00:00] 모바일일 때 스타일 수정/[03:20] 태블릿일 때 스타일 수정/[07:29] 애니메이션 효과/[11:57] li 태그에 id 및 스타일 설정/[16:03] color 설정/[22:06] 이미지 삽입/[27:40] 이미지맵/[32:33] 이미지맵 결과 확인
06.28분 웹사이트 제작 5 + 모바일 ~ PC까지 반응형웹
실제 사용되는 내용을 위주의 종류별 실습진행

책갈피[00:21] 이미지 링크 target 및 title 정의/[04:40] 이미지 위치 수정/[07:56] 공백 삽입/[10:15] 클래스 삽입하는 방법1/[16:12] 클래스 삽입하는 방법2/[19:04] 수직, 수평 정렬/[20:56] Wrap tag/[23:49] section
07.32분 웹사이트 제작 6 + 모바일 ~ PC까지 반응형웹
실제 사용되는 내용을 위주의 종류별 실습진행

책갈피[00:00] article/[03:28] text-transform:uppercase/[06:03] line-height/[09:19] .left_article/[12:31] Go to Code/[16:53] .right_article/[19:55] 반응형 웹/[23:07] @media 사이즈 별 스타일/[26:03] 모바일 환경일 때 스타일 정의/[30:34] margin-bottom
08.32분 웹사이트 제작 7 + 모바일 ~ PC까지 반응형웹
실제 사용되는 내용을 위주의 종류별 실습진행

책갈피[01:15] display:inline-block/[05:37] p태그 스타일/[06:59] border-radius/[10:48] 이미지 가운데 정렬/[13:50] p태그 스타일 상속관계/[18:02] text-align/[21:43] @media 사이즈 별 스타일 수정/[25:45] 페이지 하단 요소 확인/[29:33] left column 스타일 확인
09.28분 웹사이트 제작 8 + 모바일 ~ PC까지 반응형웹
실제 사용되는 내용을 위주의 종류별 실습진행

책갈피[00:00] right column 스타일 확인/[04:09] @media 사이즈 별 스타일 수정/[08:18] 모바일일 때 배경색 수정/[11:59] clear:both/[15:57] social_icon 스타일 확인/[18:24] opacity/[21:22] footer/[24:02] overflow:auto
10.35분 웹사이트 제작 9 + 모바일 ~ PC까지 반응형웹
실제 사용되는 내용을 위주의 종류별 실습진행

책갈피[00:00] copyright css/[03:15] 모바일일 때 copyright css/[04:39] color, font-size 추가/[07:13] copy/[09:32] 주석/[11:22] 링크 제거/[14:22] title에 color 적용/[16:09] padding/[19:43] margin/[22:41] 애니메이션 적용/[25:11] hover/[28:09] display:none/[31:06] position:absolute
11.31분 반응형웹 완료
하드코딩 사용한 실제 사용되는 웹사이트 제작

책갈피[00:43] Window Sizes 패널/[03:29] device-width/[05:22] Preview In Browser/[07:04] Add Browser/[10:36] 새로고침 패널/[12:51] CC Libraries 패널/[15:10] 로컬에서 html 열기/[17:24] 웹페이지 제작/[19:50] 서버에 업로드하기/[22:22] Insert Header/[25:17] New CSS Rule/[28:14] font-weight
12.39분 웹사이트 제작
heard, h1 로고, body

책갈피[00:24] Show Set/[02:28] Layout 설정/[05:36] image 삽입/[08:38] 업로드 확인/[11:18] border, background/[14:36] Selectors/[16:53] padding/[18:57] css 순서 변경/[21:37] user stylesheet/[23:05] css 요소 추가/[26:04] h1 width, height 설정
13.32분 웹사이트 제작 2
목록(UL)추가, 일반적인 CSS선언, 원하는 위치에 NEW이미지

책갈피[00:00] 메뉴 출력방법/[03:36] ul, li/[06:26] css 추가/[08:40] position: absolute/[10:28] 엘리먼트에 css 적용/[13:09] ol/[15:51] float:left/[17:29] li 안에 링크 삽입/[19:40] 링크 밑줄 제거/[22:24] 수직, 수평 정렬/[25:56] 링크 색상 적용/[28:46] 메뉴에 이미지 추가/[31:14] position 존속
14.34분 웹사이트 제작 3
테이블, SECTION, ARTICLE

책갈피[00:50] table 생성/[03:34] div 생성/[06:31] border-spacing/[09:42] 로고 옆에 table 위치시키기/[12:51] margin 이용하여 위치 변경/[15:14] section 삽입/[18:52] section을 2단으로 분리/[21:30] article 사이즈 정의/[24:28] 배경색 지정/[27:41] Aside 삽입/[30:44] aside css 정의/[33:10] insert div
15.31분 웹사이트 제작 4
메인3단계, 종류별 DIV박스 실습, video

책갈피[00:00] 3단 section 만들기/[03:22] .righta/[06:00] .righta css 수정/[09:38] background, width, height 설정/[12:06] margin/[15:51] text color 변경/[18:26] 여러 줄일 때 수직 정렬/[20:09] footer 생성/[23:47] clear:both/[26:59] Meta/[28:44] HTML5 Video 삽입
16.30분 웹사이트 제작 5
메인에 유튜브영상 삽입, SWF추가, 롤오버이미지, 일그러지지 않는 레이아웃

책갈피[00:11] 유투브 영상 삽입/[02:01] Flash SWF 삽입/[05:55] Flash SWF/[07:33] Rollover Image/[09:52] Rollover Image 속성/[11:59] iframe/[14:07] position:relative/[17:42] Rollover Image css 설정/[20:28] 마우스 오버 시 이미지 변경/[23:19] onLoad/[24:03] iframe이란?/[27:00] Character
비헤이비어 집중학습
17.34분 팝업 및 에니메이션 기능
자바스크립트와 제이쿼리의 선언부분 설명

책갈피[00:12] Behaviors/[01:11] 창 닫기 스크립트 생성/[04:38] onMouseOver/[07:14] imageMap/[09:54] Attach Existing CSS File/[12:10] 팝업의 부모 창 생성/[13:19] Open Browser Window/[16:00] 팝업 이름/[18:01] Change Property/[21:55] div에서 Change Property/[22:59] 엘리먼트 대소문자 구분/[25:02] Change Property의 속성 변경/[27:31] 팝업 위치 설정/[29:26] Effects/[31:44] jquery의 필요성
18.31분 에니메이션 기능 2
자바스크립트와 제이쿼리의 선언부분 설명

책갈피[00:54] 다른 요소 hide 시키기/[02:47] text, image hide 시키기/[04:14] show, toggle/[06:54] Blind Direction 종류/[09:49] class와 id의 차이/[11:33] toggle/[12:43] Bounce/[14:35] Distance, Time/[16:10] Clip, Drop, Fade/[19:08] 패널 재설정/[20:04] Fold/[22:54] Highlight/[24:34] Puff, Pulsate/[26:34] Scale/[28:41] Shake, Slide
19.38분 비헤이비어, 레이아웃 보너스
비헤이비어 마무리, 레이아웃 문제될수 있는 요소 를 학습합니다.

책갈피[00:13] Go To URL/[01:50] Jump Menu, Jump Menu Go, Popup Message/[03:35] Preload Images/[05:11] Set Text/[06:59] Show-Hide Elements/[09:10] Swap Image/[11:46] jquery 선언부 제거시 문제/[14:08] css 생성/[16:50] 문서 속성 수정/[18:16] 레이아웃 정의/[21:33] css 정의/[24:03] header, main, footer css 정의/[27:16] 레이아웃이 깨질 수 있는 요소/[30:06] main left-a css 정의/[33:23] footer의 레이아웃 문제 발생 요소/[36:03] clear:both