드림위버 cc - 총 17시간 38분 / 강의당평균 : 52분53초

드림위버 cc

전체 : 17시간 38분 / 강의당평균 : 52분53초

01 드림위버CC 인터페이스와 속성익히기

웹사이트 제작을 위한 사이트를 정의하고 웹브라우저에서 결과를 확인합니다.

27분

책갈피 : [00:21] 기능 설명(패널/속성) / [00:55] 페이지 설정 / [02:00] 파일 설정(사이트설정) / [03:05] 로컬사이트 폴더 설정 / [03:58] 제거및 편집 방법(사이트설정) / [04:46] 서식기능 활용 / [05:11] 코드기능 확인 / [05:40] 분할기능 확인 / [05:54] 디자인기능 확인 / [06:00] 파일 저장 / [07:55] 브라우져 미리보기 / [08:33] 링크설정 후 결과확인 / [09:33] 모양 설정(페이지속성) / [11:48] 인용블록기능 설명 / [12:52] 목록항목기능 설명 / [15:39] 삽입패널 설명 / [16:18] 이미지삽입 방법 / [17:22] 속성창 설명 / [18:21] 이미지링크 설정/저장 / [18:52] 브라우저 미리보기 / [19:26] border 변경 (분할) / [20:21] 그림설명 기능 / [21:30] 이미지 변경(파일탐색 설정) / [22:07] 편집기능 설명 / [23:06] 맵기능 설명 / [23:22] 이미지일부분 링크설정 / [24:17] 이미지일부분 결과확인 / [24:41] 대상기능 설명 / [25:56] 정렬기능 설명/활용

02 문서에 content삽입하기

문서환경을 설정하고 텍스트, 이미지를 삽입해서 예제를 통해 결과 화면을 확인합니다.

1시간 16분

책갈피 : [00:06] 예제1 불러오기 / [00:26] 속성창 열기 / [00:37] 문단 나누기 / [01:30] p 태그확인(소스코드) / [01:45] 문단 줄바꾸기 / [02:15] br 태그확인(소스코드) / [02:35] 서식기능 설명 / [04:12] 모양(CSS)기능 활용 / [05:46] 예제1 저장 / [06:08] 예제1 결과확인 / [07:15] 저작권 삽입 (문자기능) / [07:59] 예제2 불러오기 / [08:35] dl 태그, dt 태그, dd 태그 활용 / [09:46] 목록문단 정의 / [10:01] li 태그 활용 (비순차목록) / [10:50] ol 태그 활용 (순차목록) / [11:35] 예제2 저장 후 결과 확인 / [12:26] 목록항목 설정, 변경 및 결과확인 / [14:39] CSS규칙에 대한 상황별 정의(문자) / [19:26] 이미지 삽입, 정렬 / [20:07] CSS규칙에 대한 상황별 정의(이미지) / [21:52] 롤오버이미지 삽입 / [22:56] 롤오버이미지 저장 / [23:11] 롤오버이미지 결과확인(콘텐츠허용) / [23:40] 수평선기능 활용과 소스코드 확인 / [24:07] 가로세로변경, 단위값설정, 정렬설정 / [24:56] 수평선 저장 후 결과확인(수평선기능의 다양한 활용결과) / [27:18] hr태그, 색상변경(소스코드) / [28:11] 예제3 불러오기(총괄 확인) / [28:36] 예제3 결과확인(콘텐츠허용) / [30:26] 예제3 만들기(배경색, 문자삽입) / [31:17] 수평선 만들기 / [31:47] 문자 설정(CSS규칙정의) / [32:45] 수평선색상 설정 / [33:15] 예제3 중간 결과확인 / [33:59] 문자삽입(CSS규칙 정의설정, 색상, 글꼴) / [35:04] 수평선 만들기 설정 / [35:35] 예제3 중간 결과확인 / [35:52] 이미지 삽입 / [36:35] 문자삽입과 속성설정 / [37:45] 예제3 중간 결과확인(링크설정) / [38:22] 이미지 삽입, 설정 / [39:04] 예제3 중간 결과확인(롤오버이미지) / [39:37] 목록 만들기 / [40:37] 비순차목록 / [41:37] 목록항목 기능(기호변경) / [42:28] 순차목록 / [42:45] 목록항목 기능(로마자,숫자,알파벳) / [44:22] 목록항목 기능(시작번호 설정) / [45:49] 목록항목 기능(번호 재설정) / [46:30] 예제3정리, 목록정리 / [47:50] 링크 속성과 테이블 / [48:04] 절대경로 링크설정 / [48:43] 링크 색상설정(링크(CSS)) / [50:14] 링크 저장 후 결과확인 / [51:15] 배경색 변경(모양(CSS)) / [51:59] 배경이미지 변경(모양(CSS)) / [52:52] 다양한 배경색에 따른 문자저장 후 결과확인 / [54:35] 상대경로 링크설정 / [55:49] 링크 저장 후 결과확인 / [56:57] 테이블 정의 / [57:13] 표 설정 / [57:52] table태그, tr태그, td태그 / [58:30] 표속성크기 조절 / [60:05] CellPad, CellSpace 설정 / [61:13] 테이블 저장 후 결과확인(Border값 1) / [61:30] 테이블 저장 후 결과확인(Border값 0) / [62:15] 표속성 설명 / [63:43] 셀기능 설명(삽입, 병합, 분할) / [65:15] 셀기능 설명(수평, 수직, 가로, 세로) / [66:45] 셀기능 설명(한 줄로, 머리글, 배경) / [67:40] 총괄 예제 / [70:26] 첫변째페이지 만들기 / [70:30] 표삽입, 설정 / [71:15] 이미지삽입, 설정 / [73:56] 첫변째페이지 저장 / [74:17] 첫번째페이지 결과확인 / [74:33] 첫번째페이지 수정, 변경 후 결과확인 / [75:45] 그림설명 추가

03 테이블 삽입하고 셀 편집하기

테이블과 셀속성을 삽입을 통해 관련 속성을 알아보고 예제를 통해 실습해 봅니다.

59분

책갈피 : [00:00] 페이지 생성 / [00:20] 표 생성 / [00:44] 가운데 정렬 / [00:52] 본문 이미지 삽입 / [01:55] 타이틀 이미지 삽입 / [02:11] 그림 설명 / [02:40] 다른 이름으로 저장 / [02:56] 브라우저에서 미리보기 / [03:18] CellPadding, CellSpace, Border 값 조절 / [04:31] 타이틀에 링크 걸기 / [04:54] 브라우저에서 미리보기 / [05:12] 타이틀 테두리 없애기 / [06:05] dispaly:block / [06:49] 브라우저에서 미리보기 / [07:13] 가운데 정렬 / [07:44] 1.html 페이지로 링크 걸기 / [07:51] 브라우저에서 미리보기 / [08:11] 이미지 테두리 없애기 / [08:57] page1로 링크 걸기 / [09:19] 완성페이지 확인 / [09:33] 표 생성 / [09:49] 가운데 정렬 / [10:06] 이미지 삽입 / [10:17] 텍스트 입력 / [10:31] 표 레이아웃 변경 / [10:48] 배경색 삽입 / [11:14] 저장 후 결과 확인 / [11:45] 2.html 페이지로 링크 걸기 / [11:57] Border=0 / [12:16] 브라우저에서 미리보기 / [12:55] 2.html 페이지 본문 내용 삽입 / [15:03] 이미지 크기 조절 / [15:33] 표 테두리 생성 / [16:17] 브라우저에서 미리보기 / [16:47] HTML Colors 표 만들기 실습 / [17:50] 행, 열, 표 폭 / [18:05] 테두리 두께, 셀 패딩, 셀 간격 / [18:42] 머리글 / [19:16] 캡션, 요약 / [20:28] 표 내용 입력 / [21:48] 저장 후 미리보기 / [22:08] 행과 열의 수 변경하기 / [23:04] 행 삽입 / [23:48] 열 삽입 / [24:18] 셀 병합 / [25:50] 열 크기 변경 / [26:20] 배경색 삽입 / [27:04] 셀의 가로 정렬 / [27:51] 브라우저에서 미리보기 / [28:16] 사이트 정의 및 관리 / [29:01] 테이블 명령어 / [29:45] 포토샵 파일 테이블로 가져오기 / [30:03] 슬라이스툴로 이미지 분할하기 / [32:34] Rulers 표시 / [33:37] 분할된 이미지 저장하기 / [35:20] 저장된 이미지 확인하기 / [35:53] 드림위버로 분할된 이미지 불러오기 / [37:48] 완성 예제 확인하기 / [38:26] 타이틀과 상단 메뉴 테이블 만들기 / [38:37] 표 만들기 / [39:12] 이미지 불러오기 / [40:32] 표 만들고 이미지 불러오기 / [42:31] 브라우저에서 미리보기 / [43:44] 본문 만들기1 / [44:04] 표 만들고 이미지 불러오기 / [45:02] 텍스트 입력 / [45:32] 이미지 삽입 된 상태에서 텍스트 입력하기 / [48:03] 브라우저에서 미리보기 / [48:54] 본문 만들기2 / [50:27] 이미지 불러오기 / [53:51] 브라우저에서 미리보기 / [54:15] 텍스트 입력 / [54:44] 브라우저에서 미리보기 / [55:02] 텍스트 편집 / [56:14] copyright 입력 / [57:19] 가운데 정렬 / [57:33] 브라우저에서 미리보기

04 폼 정의와 폼 컨트롤 요소 삽입하기

폼 문서에 대해서 알아보고 폼 컨트롤 요소에 대해서 속성을 지정하고 결과 화면을 확인합니다.

51분

책갈피 : [00:00] 폼 정의 / [00:36] 텍스트 폼 / [01:05] 문자폭 설정 / [01:46] Max Length(최대허용문자) / [02:47] value값 입력 / [03:43] 텍스트 필드 여러줄로 만들기 / [03:59] 텍스트 영역 / [04:34] value값 입력 / [04:56] Rows값 설정 / [05:58] 암호 / [06:19] Max Length(최대허용문자) / [06:43] value값 입력 / [07:13] 결과 확인 / [07:41] 컨트롤명 변경 / [09:01] 컨트롤 비활성화 / [09:10] 브라우저에서 미리보기 / [09:28] 읽기전용으로 설정 / [10:08] 텍스트 영역 삽입 / [10:30] value값 입력 / [10:39] Rows값 설정 / [10:54] 버튼 컨트롤 / [10:59] 체크 상자 삽입 / [12:23] 체크 상자 여러개 삽입 / [12:58] 브라우저에서 미리보기 / [13:18] Checked 설정 / [13:47] 라디오 버튼 삽입 / [14:22] 브라우저에서 미리보기 / [14:57] Name과 Title 변경 / [15:25] 브라우저에서 미리보기 / [15:47] 체크 상자 그룹 삽입 / [16:59] 라디오 그룹 삽입 / [18:04] 브라우저에서 미리보기 / [18:23] 선택 컨트롤 삽입 / [19:39] 브라우저에서 미리보기 / [20:05] 선택 컨트롤 사이즈 변경 / [20:26] Multiple / [21:08] 목록값 변경 / [21:24] 파일 컨트롤 삽입 / [21:51] 브라우저에서 미리보기 / [22:13] 버튼 컨트롤 삽입 / [22:35] Vlaue값 입력 / [23:21] 브라우저에서 미리보기 / [23:47] 폼 컨트롤을 활용한 실습-가입신청서 양식 / [24:21] 표 만들기 / [24:50] 항목 입력 / [25:37] 텍스트 컨트롤 삽입 / [26:18] 버튼 컨트롤 삽입 / [26:55] 암호 컨트롤 삽입1 / [27:33] 암호 컨트롤 삽입2 / [28:02] 텍스트 컨트롤 삽입 / [30:36] 라디오 버튼 / [31:53] 브라우저에서 미리보기 / [32:46] 선택 컨트롤 삽입 / [33:03] 목록값 입력 / [33:47] 브라우저에서 미리보기 / [34:56] 버튼 컨트롤 삽입 / [35:22] CellPadding, CellSpace, Border 값 조절 / [36:03] 폼 컨트롤을 활용한 실습2 / [36:43] 폼 태그 확인 / [37:09] 폼 ID 변경 / [37:22] Method 변경 / [38:02] 텍스트 컨트롤 삽입 / [38:21] ID 속성 바꾸기 / [38:53] 암호 컨트롤 삽입과 변경 / [40:53] 파일 컨트롤 삽입과 변경 / [41:35] 버튼 컨트롤 삽입과 변경 / [42:40] 폼 컨트롤을 활용한 실습3 / [43:03] 필드세트 컨트롤 삽입 / [43:45] 라디오 그룹 컨트롤 추가 / [45:16] 레이블과 값 입력 / [46:26] 체크 상자 컨트롤 삽입 / [47:30] 선택 컨트롤 삽입 / [48:12] 목록값 추가 / [49:56] 브라우저에서 미리보기

05 하드코딩으로 HTML요소 삽입해보기

하드코딩을 위한 코딩환경설정과 HTML의 태그요소를 삽입하고 예제를 통해 적용된 결과화면을 확인합니다.

55분

책갈피 : [00:09] 하드코딩으로 HTML요소 삽입 / [00:25] 예제를 통해 코드 살펴보기 / [01:33] 주석문 입력하기 / [02:07] h1 부터 h6 태그 입력하기 / [03:35] p 태그 입력 / [03:43] br 태그 입력 / [03:49] strong 태그 입력 / [04:00] em 태그 입력 / [05:00] div 태그 입력 / [05:57] 익스플로러 미리보기로 결과 화면 확인 / [07:29] 태그를 이용해 목록 정의하기 / [08:11] ul과 li태그 삽입 / [08:37] hr과 ol 과 li 태그 입력 / [08:54] hr, di, dt, dd 태그 입력 / [09:22] p, a, img 태그 입력 / [10:11] p, a 태그 입력 / [10:33] 익스플로러 미리보기로 결과 확인 / [11:58] 테이블 태그에 대해 알아보기 / [12:37] 테이블과 캡션 태그요소 입력 / [13:33] 행 관련 tr, th 태그 입력 / [14:11] 2행 3행 관련된 tr, td 태그 입력 / [14:46] 익스플로러 미리보기로 결과 확인 / [15:54] 폼 관련 태그 요소에 대해 알아보기 / [16:33] 폼 태그 요소 입력 / [17:15] 텍스트 필드 삽입 / [18:15] 리스트 메뉴 삽입 / [19:18] 파일 필드 삽입 / [19:56] 필드 셋과 라디오 버튼 삽입 / [21:47] 체크박스 삽입 / [23:00] 텍스트 영역 패드 삽입 / [23:51] 폼 버튼 삽입 / [24:59] 익스플로러 미리보기로 결과 확인 / [27:30] 태그 정리 / [27:59] p 태그 / [28:18] div 태그 / [29:30] br 태그 / [29:45] h 태그 / [30:36] strong 태그 / [30:48] em 태그 / [31:06] ol 태그 / [31:52] ul 태그 / [32:20] li 태그 / [32:30] dl 태그 / [32:45] dt 태그 / [32:57] dd 태그 / [33:22] hr 태그 / [33:35] img 태그 / [34:29] a 태그 / [34:44] table 태그 / [35:22] tr 태그 / [35:37] th 태그 / [36:04] td 태그 / [36:15] caption 태그 / [36:22] thead 태그 / [36:30] tfoot 태그 / [36:34] form 태그 / [37:06] input 태그 / [37:45] textarea 태그 / [38:04] select 태그 / [38:19] option 태그 / [39:15] 태그로 새로운 예제 만들기 / [40:13] 타이틀 작업 / [41:15] 태그를 이용해 텍스트 입력 / [41:43] 이미지 삽입 / [42:35] 속성값 변경 / [43:50] 익스플로러 미리 보기 / [45:07] 테이블과 폼 삽입하기 / [46:00] 테이블 삽입 / [46:57] 테이블에 텍스트 삽입 / [47:27] 셀 합치기 / [48:00] 행 색깔 지정 / [49:13] 폼 정의 명령 실행하기 / [50:07] 텍스트 영역 삽입 / [52:07] 버튼 삽입 / [52:42] 익스플로러 미리 보기

06 텍스트와 이미지에 하이퍼링크 지정하기

텍스트와 이미지에 하이퍼링크를 지정하고 하이퍼링크의 스타일을 변경해보는 작업을 진행합니다.

52분

책갈피 : [00:03] 하이퍼링크 지정과 하이퍼링크 스타일 변경하기 / [00:40] 예제에 하이퍼링크 지정 / [01:11] 대상 지정할때 blank / [02:13] 하이퍼링크 경로 선택해서 입력 / [02:59] 이미지에 하이퍼링크 지정 / [03:30] 링크 css 설정 / [04:30] 브라우저에서 미리보기 / [05:58] 페이지속성 살펴보기 / [06:46] 밑줄 스타일 / [07:42] 하이퍼링크 삭제 / [08:01] 네임앵커 기능 / [08:31] 예제를 이용해 네임앵커 기능 보기 / [08:50] ID 지정 / [09:28] 링크 입력 / [10:48] 브라우저에서 미리보기 / [11:16] 다른 웹문서에서 이미 지정된 네임앵커 위치를 하이퍼링크로 지정하는 방법 / [12:35] 이미지 맵으로 하이퍼링크 지정하기 / [13:01] 이미지 선택 / [13:58] 이미지 맵 영역에 하이퍼링크 지정 / [14:28] 타원으로 이미지맵 영역 지정 / [14:58] 이미지 맵에 링크 지정 / [15:16] 다각형으로 이미지맵 영역 지정 / [15:43] 이미지 맵에 링크 지정 / [16:15] 브라우저 미리보기 / [17:52] 만들어진 이미지 영역 이동하기 / [18:56] iframe 명령어 / [19:26] iframe 소스 내용 / [20:26] iframe 소스 만들기 / [20:52] 새 도큐먼트 열기 / [21:07] 분할 화면 선택 / [21:52] 불러오는 링크태그 입력 / [22:18] 브라우저에서 미리보기 / [22:41] iframe 소스 여러번 사용하기 / [23:33] iframe 크기조절 / [24:07] 브라우저 미리보기 / [24:37] iframe 외곽선 두께 / [25:03] frameborder 값 지정 / [25:33] iframe 스크롤바 조절 / [26:33] iframe 여백조절 / [27:48] iframe 링크 / [28:11] 빈 페이지에 배경색 지정 / [29:21] a 태그로 타겟 페이지 불러오기 / [30:59] 브라우저에서 미리보기 / [32:15] iframe을 응용해 사이트 만들기 / [32:45] 빈페이지에 표 삽입 / [33:35] 가운데 셀에 플래시파일 불러오기 / [34:21] 플래시 파일 미리보기 / [34:37] 이미지 삽입 / [35:22] 전체 테이블 선택 후 불필요한 선 제거 / [35:37] 브라우저에서 미리보기 / [37:00] 새 페이지에 표 삽입 / [37:30] 기존에 있던 이미지 부르기 / [38:15] 배경색 깔기 / [39:00] iframe 입력 / [40:45] 디자인 보기 / [41:37] 타이틀 입력 / [42:15] 타이틀에 링크 지정 / [44:22] 브라우저에서 미리보기 / [44:58] home 눌렀을때 메인으로 넘어가는 링크 지정 / [45:52] 주의할 점 / [46:37] 저장된 문서를 iframe으로 삽입하기 / [47:27] iframe 삽입 / [47:45] iframe 소스 수정 / [48:59] 브라우저에서 미리보기 / [49:29] iframe구조에서 하이퍼링크와 타겟 지정 / [51:15] 브라우저에서 미리보기

07 점프메뉴, 롤오버이미지, 갤러리 삽입하기

이벤트에 따라 이미지가 변경되는 롤오버를 설정하고 그에맞는 갤러리예제를 통해 삽입된 이미지의 결과를 확인합니다.

60분

책갈피 : [00:01] 점프메뉴, 롤오버이미지, 갤러리 삽입하기 / [00:47] 롤오버이미지 삽입하기 / [01:45] 롤오버 이미지 삽입 대화상자 / [02:46] 이미지 이름 지정 / [02:57] 원본 이미지 불러오기 / [03:19] 롤오버 이미지 불러오기 / [03:29] 그림 설명 작성 / [03:38] 링크 입력 / [05:24] 브라우저에서 미리보기 / [06:46] 비헤이비어 / [06:59] 마우스 오버 / [07:30] 점프메뉴 삽입과 폼버튼에 하이퍼링크 입력 / [08:18] 폼 버튼 삽입 / [09:03] 비헤이비어 추가 / [10:09] 비헤이이비어 메뉴가 onClick 인지 확인 / [11:00] 점프메뉴 / [11:46] 점프 메뉴 대화상자 / [13:03] 메뉴 아이템 등록 / [13:09] 텍스트 입력 / [13:33] 항목 추가 / [13:56] 하이퍼링크 주소 지정 / [15:15] 브라우저에서 미리보기 / [15:46] 점프메뉴 삽입 확인 / [16:32] 점프메뉴 수정 / [17:15] 이미지교체 비헤이비어로 롤오버 갤러리 만들기 / [18:18] 첫번째로 교체되는 이미지의 ID 지정 / [18:56] 하이퍼링크 텍스트 지정과 이미지교체 비헤이비어 적용 / [19:41] 이미지 교체 대화상자 / [20:33] 소스설정 검색 / [20:55] 이미지 교체 비헤이비어 이벤트 교체 / [22:40] 브라우저에서 미리보기 / [24:02] 비헤이비어 삭제하고 싶을때 / [24:55] 브라우저 윈도우 열기, 자바스크립트 호출, 요소 표시 숨김 / [25:33] 브라우저 윈도우 열기 비헤이비어 설명 / [25:52] 자바스크립트 호출 비헤이비어 설명 / [26:26] 요소 표시 숨김 비헤이비어 설명 / [27:33] 자바스크립트 호출 예제 / [28:15] 비헤이비어 적용 / [28:56] 작업 확인 / [30:00] 브라우저 윈도우 열기 비헤이비어로 팝업창 표시하기 / [30:59] 하이퍼링크 텍스트 지정과 비헤이비어 적용 / [32:22] 나타낼 URL 검색 / [33:22] 브라우저 미리보기 / [36:07] 요소표시 숨김 비헤이비어로 특정위치에 팝업창효과 지정하기 / [36:42] 하이퍼링크로 지정한 ID 값 확인 / [38:07] 요소 목록에서 요소 숨김 / [38:52] 이벤트 지정 / [39:45] 요소 목록에서 요소 표시 / [40:20] 브라우저에서 미리보기 / [41:35] 팝업 메시지 비헤이비어로 경고음과 함께 메시지 창 출력 / [41:59] 팝업 메시지 비헤이비어 적용 / [43:04] 브라우저에서 미리보기 / [43:52] 예제 결과 확인 / [45:07] 자바스크립트 호출 비헤이비어 적용 / [46:15] 브라우저 윈도우 열기 비헤이비어 적용 / [47:44] 이미지 맵 기능 적용할 이미지 선택 / [48:45] 이미지 맵 영역에 대한 하이퍼링크 지정 / [49:30] 브라우저 미리보기 / [51:14] 예제 결과 확인 / [52:15] 웹 페이지 하이퍼링크 지정 / [52:51] 텍스트 내부 웹페이지 하이퍼링크 / [53:30] 상단으로 이동하는 하이퍼링크 지정 / [54:14] 링크 CSS에서 색상 변경 / [54:52] 점프메뉴 작성 / [57:14] 브라우저에서 미리보기

08 비헤이비어속성으로 웹페이지 만들기

call javascript, open BrowserWindow, Show-hide element비헤이비어대해서 알아보고 적용되는 결과를 실습합니다.

53분

책갈피 : [00:01] 비헤이비어에 대해 알아보기 / [00:48] 상태 표시줄의 텍스트 설정 / [01:30] onLoad 이벤트 / [02:00] 브라우저에서 미리보기 / [03:04] 도큐먼트 창에 글자 입력 / [03:37] 글자에 비헤이비어 추가 / [05:30] 브라우저에서 미리보기 / [06:13] 팝업 메시지 추가 / [07:15] 브라우저에서 미리보기 / [08:16] 텍스트에 팝업 메시지 지정 / [08:54] 브라우저에서 미리보기 / [09:35] 하이퍼링크 밑줄 표시 해제 / [11:00] 파일 불러오기 / [11:24] 결과 창 확인 / [12:11] 비헤이비어를 이용해 롤오버 이미지 이용하기 / [12:35] 새 도큐먼트에 배경지정 / [13:09] 표 삽입 / [14:07] 이미지 삽입 / [15:16] 이미지 선택 후 이미지교체 클릭 / [16:44] 브라우저에서 미리보기 / [17:14] 이미지 삽입 / [18:03] 이미지 선택 후 이미지교체 클릭 / [18:59] 브라우저에서 미리보기 / [19:52] 결과 창 확인 / [20:32] 표 삽입 / [21:03] 이미지 삽입 / [22:07] 새 창 열고 배경색 지정 / [22:56] 비헤이비어로 브라우저 윈도우 열기 설정 / [23:55] 브라우저에서 미리보기 / [24:15] 내비게이션 툴바 체크 / [24:56] 위치 툴바와 상태 표시줄 툴바 체크 / [25:37] 크기 조절과 스크롤 바 체크 / [26:48] css 명령어 알아보기 / [27:52] 새 css 규칙 선택 / [29:48] 기본 설정 변경 / [31:45] 글꼴 선택 후 텍스트 블록 지정 / [32:22] css 에서 대상 규칙과 클래스 지정 / [32:57] 수정 할때 / [33:49] 규칙 편집에서 유형 변경 / [35:07] 새 css 규칙 만들기 / [35:45] 선택기 유형 태그로 지정 / [35:57] 선택기 이름 살펴보기 / [36:22] 태그 확인 / [36:52] 텍스트 유형 변경 / [38:22] 글자 배경 색 입력 / [39:37] 선택기 유형 ID로 지정 / [39:52] ID의 의미 / [40:15] 선택기 이름에 text 입력 / [41:52] 완성된 예제 보기 / [42:45] 배경에 색과 이미지 지정 / [43:30] 클래스를 back 으로 선택 / [44:19] 배경 수정 / [45:07] 새 css 추가로 글자 수정 / [45:51] 글 사이 간격 수정 / [46:37] 타이틀 부분 잡기 / [47:58] 표 삽입 / [48:20] 스타일 시트 테이블 안에 적용 / [49:21] 표에 글자 입력 / [49:36] css규칙 편집으로 서체 수정 / [50:15] 원하는 사이트 이름으로 변경 / [50:37] 사이트 이름에 링크 걸기 / [50:49] 브라우저에서 미리보기 / [51:22] 밑줄과 없애고 서체 변경하기 / [52:13] 브라우저에서 미리보기

09 CSS로 컨텐츠 디자인하기

CSS태그요소를 삽입하여 태그 선택자를 등록하고 CSS를 적용하여 결과를 확인합니다.

51분

책갈피 : [00:00] 스타일 시트 명령어 / [00:09] 텍스트 - 링크 입력 / [00:59] 새 CSS 규칙 / [01:36] 페이지 속성 - 링크 설명 / [02:38] 링크 설정 / [03:07] CSS 규칙 설정 / [04:25] 미리보기 / [05:15] 표 삽입 / [06:08] 표 - CSS 규칙 설정 / [07:27] 규칙 편집 / [07:46] 표 배경 삽입 / [08:20] 표 테두리 설정 / [09:43] 미리보기 / [10:09] 새 문서 - 외부 스타일 시트 / [10:54] 외부 스타일 시트 규칙 설정 / [11:31] 표 생성 - 스타일 시트 설정 / [13:03] 스타일 시트 설정 2 / [13:54] 배경색 설정 / [14:26] 미리보기 / [14:52] 새 파일 - 표 삽입 / [15:35] 소스 코드 불러오기 / [16:26] 링크 설정 / [16:51] 테두리 설정 추가 / [18:21] 예제 - CSS 규칙 설정 / [19:30] 규칙 재설정 / [20:56] 링크 설정 / [22:10] 미리보기 / [22:52] 다른 예제 - CSS 설정 / [24:00] 미리보기 / [24:26] CSS 특징 / [25:10] 요소 전체 스타일 지정 / [25:56] 새 CSS 설정 / [28:17] 미리보기 / [28:55] 속성 값 확인 / [29:29] Div 태그 / [30:03] Div 태그 설정 / [32:37] 적용된 설정 확인 / [33:07] 미리보기 / [33:34] 클래스 선택자 / [34:14] 클래스 CSS 규칙 설정 / [36:49] 클래스 선택 적용 / [37:22] 두번째 문단 클래스 적용 / [37:50] 미리보기 / [38:37] 하이퍼링크 텍스트 메뉴 / [39:21] CSS 규칙 설정 / [40:35] 적용된 설정 확인 / [41:07] 복제 설정 / [42:29] CSS 규칙 설정 2 / [43:37] 복제 설정 2 / [44:15] 미리보기 / [45:07] 문단 첫글자 디자인 변경 / [46:04] 커서 위치 지정 - CSS 규칙 설정 / [47:35] 적용된 설정 확인 / [48:35] 새 CSS 삽입 / [49:42] 적용된 설정 확인 / [50:00] 미리보기

10 그룹 선택자를 등록하고 CSS 적용하기

그룹선택자의 특징과 적용방식을 알아보고 실습을 통해 CSS가 어떻게 적용되는지를 확인합니다.

51분

책갈피 : [00:00] 선택자 등록 및 CSS 적용 / [00:52] 전체 선택자 특징 / [02:30] 전체 선택자 적용 과정 / [03:53] 자손 선택자의 특징 / [04:44] 자손 선택자 문법 / [06:00] 자손 선택자 적용 과정 / [07:29] 쉼표를 이용한 그룹 선택자의 특징 / [08:28] 그룹 선택자 적용 과정 / [09:20] 전제 선택자를 이용한 HTML 예제 설정 / [09:54] CSS 규칙 설정 / [11:31] 적용된 속성 확인 , 미리보기 / [12:39] 자손 선택자를 이용한 예제 정 / [13:20] 첫번째 목록 문단 ID 값 지정 / [14:28] 나머지 목록 문단 ID 값 지정 / [14:45] CSS 규칙 설정 / [16:26] CSS 규칙 설정 2 / [17:11] CSS 규칙 설정 3 / [18:11] CSS 규칙 설정 4 / [18:48] CSS 패널 확인 , 미리보기 / [19:48] 그룹 선택자를 이용한 예제 설정 / [20:15] 첫번째 선택자 등록 / [21:22] 두번째 선택자 등록 / [22:37] CSS 패널 확인 , 미리보기 / [23:52] 외부 CSS 를 이용한 예제 설정 / [24:33] 외부 CSS 파일의 장점 / [25:52] 테이블 ID 값 등록 / [26:22] 미리보기 / [26:37] 첫번째 선택자 등록 / [28:30] 테이블 제목 셀 변환 / [29:15] 두번째 선택자 등록 / [30:41] 세번째 선택자 등록 / [31:48] 네번째 선택자 등록 / [33:22] 불필요한 div 삭제 / [33:52] 브라우저에서 미리보기 / [34:35] css 파일 연결해서 여러 문서에 사용하기 / [35:19] css 파일 연결 / [36:22] 테이블에 ID 값 지정 / [37:22] 제목 셀 변경 / [37:52] 브라우저에서 미리보기 / [38:21] css 파일 연결 해제 / [38:52] 하드코딩으로 CSS 문법을 익히고 디자인 적용하기 / [39:34] CSS 선언 / [39:52] 인라인 방식 / [40:35] 스타일 태그를 이용한 내부 정의 방식 / [41:00] 외부 정의 방식 / [42:00] css 선택자 종류 / [42:22] 태그 선택자 / [42:50] 클래스 선택자 / [43:12] 아이디 선택자 / [44:00] css 속성과 값 / [44:15] 텍스트 관련 속성 / [44:50] 색상과 배경 관련 속성 / [45:15] 박스 모델 관련 속성 / [45:49] 목록 관련 속성 / [46:19] 인라인 방식으로 css 적용하기 / [46:52] css 관련 소스 삽입 / [47:22] 코드 보기 / [48:45] div 요소에 소스 삽입 / [49:37] 브라우저에서 미리보기

11 style태그 선택자를 등록해서 CSS적용하기

style태그를 이용해서 예제를 통한 선택자등록과 CSS적용하는 결과를 확인합니다.

51분

책갈피 : [00:00] 스타일 태그를 이용한 CSS 등록 / [00:07] CSS 적용 방식 / [00:44] CSS 선택자 소스 입력 / [01:34] dl 태크 선택자 삽입 / [02:21] cookTitle 클래스 선택자 삽입 / [03:07] h3 태그 요소의 클래스 선택자 삽입 / [03:43] 미리보기 / [04:24] 외부 파일 방식의 CSS 적용 / [04:46] 새 문서 - 미리 저장 / [05:46] 외부 CSS 파일 연결 / [06:28] h4 와 ol 태그 요소 클래스 & 아이디 선택자 적용 / [07:25] cookHowtoTitle 선택자 정의 / [08:15] 레시피 박스 li선택자 정의 / [09:05] 미리보기 / [09:54] 예제 - 결과 화면 미리보기 / [10:39] 새로운 선택자 등록 / [12:37] 선택자 등록 2 / [13:52] 선택자 등록 3 / [15:33] 선택자 등록 4 / [16:11] CSS 수정 / [17:10] 미리보기 / [17:40] 하이퍼링크와 문단 디자인 변경 / [17:52] 결과 화면 미리보기 / [18:22] 기존 CSS 파일 첨부 / [18:48] 하이퍼링크 & 목록 문단 디자인 소스 입력 / [19:18] 목록 문단 디자인 소스 입력 / [19:52] more 버튼 디자인 소스 입력 / [20:14] p 컨텐츠 디자인 소스 입력 / [20:41] 클래스 관련 소스 입력 / [21:11] 미리보기 / [21:48] CSS 레이아웃 구현 / [22:17] 플룻과 클리어 속성 , 포지션 속성 / [23:41] 디스플레이 속성 / [24:26] 드림위버의 CSS 레이아웃 , 템플릿을 이용한 공통 레이아웃 속성 / [25:41] CSS 레이아웃의 개념과 특징 / [26:45] 예제 - 이단 칼럼 배치 및 디자인 꾸미기 / [27:15] 코드 - 새 선택자 등록 / [28:30] 선택 영역 지정 - Div 태그 입력 / [29:48] 커서 위치 지정 - 선택자 등록 / [31:07] p 소스 커서 지정 - 선택자 등록 / [32:00] 미리보기 / [33:22] 코드 창 - 새 선택자 등록 / [35:00] 불필요한 div 삭제 / [35:15] div 삽입 / [36:27] 두번째 선택영역 지정하고 div 태그 삽입 / [36:57] css 패널에서 새 선택자 등록 / [38:29] css 패널에서 다른 새 선택자 등록 / [39:15] 브라우저에서 미리보기 / [39:52] 퍼센트 단위로 삼단 칼럼 배치 / [40:51] div 삽입 / [41:52] 두번째 선택영역 지정하고 div 태그 삽입 / [43:37] 세번째 선택영역 지정하고 div 태그 삽입 / [44:19] 네번째 선택영역 지정하고 div 태그 삽입 / [45:00] 배경 이미지 지정 / [46:14] 배경에 제목 텍스트 위치 조정 / [47:35] 등록된 선택자 속성 편집 / [48:13] 새로운 선택자 등록 / [49:49] 브라우저에서 미리보기

12 CSS 레이아웃 만들기

float속성과 clear속성을 이용한 부유 레이아웃으로 웹페이지를 만들어보는 실습을 진행합니다.

57분

책갈피 : [00:01] 좌우 가로로 배치되는 탭 메뉴 / [00:29] 예제 결과 화면 미리보기 / [01:03] 선택 영역 지정 - Div 삽입 / [02:36] h1 태그 커서 지정 - CSS 규칙 / [04:00] ul 태그 커서 지정 -CSS 규칙 / [05:00] 적용된 디자인 확인 / [05:46] div 소스 삽입 / [06:15] CSS 규칙 설정 / [07:30] 적용된 디자인 확인 / [07:46] li 커서 지정 - CSS 규칙 / [09:39] CSS 규칙 2 / [10:56] 디자인 수정 / [11:13] li 소스 입력 / [11:58] a 태그 커서 지정 - 선택자 등록 / [12:43] 미리보기 / [13:31] 규칙 편집 , 미리보기 / [14:31] 포지션 속성을 이용한 레이아웃 배치 / [15:13] position , top , bottom , left , right / [16:07] z-index , visibility , overflow / [16:47] position을 이용한 레이아웃 종류와 특징 / [18:26] 예제 - fixed 포지션을 이용한 레이아웃 배치 / [19:11] 선택 영역 지정 - Div 삽입 / [20:56] 두번째 선택 영역 지정 - Div 삽입 / [23:11] 새 선택자 등록 / [24:33] 미리보기 / [25:18] 상대 좌표값으로 지정되는 relative 포지션을 이용한 레이아웃 배치 / [26:07] 커서 위치 지정 - 새 선택자 등록 / [27:32] li 소스 입력 - 선택자 등록 / [28:41] li 소스 입력 2 - 선택자 등록 / [29:30] li 소스 입력 3 - 선택자 등록 / [30:21] li 소스 입력 4 - 선택자 등록 / [31:11] li 소스 입력 5 - 선택자 등록 / [32:07] 폰트 속성 수정 / [33:45] 미리보기 / [34:07] 잘못된 부분 수정 / [34:42] 미리보기 2 / [35:37] 디스플레이 속성을 이용한 레이아웃 / [36:04] 디스플레이 속성 값 / [36:30] 디스플레이 속성 값 2 / [37:14] 예제 - 지정된 이미지로의 하이퍼링크 배치 / [37:52] IFS 부분 소스 변경 / [38:37] 새 선택자 등록 / [39:35] a 태그 커서 지정 - 선택자 등록 / [41:07] 미리보기 / [41:50] 디스플레이 속성을 이용한 예제 2 / [42:51] a 태그 커서 지정 - 새 선택자 등록 / [45:22] 새 선택자 등록 2 / [46:28] 디자인 수정 , 미리보기 / [47:22] 디스플레이 속성을 이용한 예제 3 / [47:52] li 태그 커서 지정 - 새 선택자 등록 / [49:14] label 태그 커서 지정 - 새 선택자 등록 / [50:52] 미리보기 / [51:15] 커서 지정 - 새 선택자 등록 / [52:15] 선택자 등록 / [53:12] 등록된 클래스 적용 / [54:00] 등록된 클래스 적용 2 / [54:22] CSS 패널 - 새 선택자 등록 / [55:49] button 클래스 적용 / [56:21] 미리보기

13 CSS 레이아웃을 이용해 문서 만들기

관련선택자등록해서 CSS 레이아웃을 만들어서 패널과 대화상자를 이용해 문서를 만들어보는 작업을 진행합니다.

55분

책갈피 : [00:03] 별도의 css파일에 관련 선택자 소스 입력하고 레이아웃 디자인 변경하기 / [00:19] 예제 파일 확인 / [01:03] css 새로운 선택자 등록 / [02:00] 패딩값과 마진값 주기 / [02:38] 태그 입력 / [03:00] 소스 입력 / [03:38] 하이퍼링크 디자인 / [04:00] 컨테이너와 컨텐트박스 선택자 소스 입력 / [04:30] 선택자 소스 입력 / [05:30] 푸터 입력 / [06:14] 브라우저에서 미리보기 / [07:15] 이미지가 삽입된 div태그 삽입후 상단 오른쪽에 고정되게 선택자 등록하기 / [07:30] 결과 화면 보기 / [08:07] div에 소스 입력 / [08:28] 새로운 선택자 등록 / [09:28] 브라우저에서 미리보기 / [10:16] 태그 스타일로 글자 서식 바꾸기 / [11:07] h2태그에 새 css규칙 만들기 / [13:03] 속성창에서 새 스타일 만들기 / [13:54] p태그에 새 css 규칙 생성 / [14:22] 폰트 디자인 변경 / [15:05] 폰트 크기 변경 / [15:28] h1 태그에 스타일 지정 / [16:18] 브라우저에서 미리보기 / [16:48] 내부스타일 외부스타일시트로 저장하기 / [19:36] 외부스타일 시트를 문서에 링크하기 / [20:55] 기존 css파일 첨부 / [22:11] style.css 확인 / [22:32] 브라우저에서 미리보기 / [22:52] 클래스 스타일로 특정부분 스타일 바꾸기 / [23:45] 새 css 규칙 추가 / [25:06] 작업 확인 / [25:36] 클래스 스타일 적용 / [26:55] 적용된 클래스 스타일 제거 / [27:18] 태그 제거 / [28:03] span 태그 입력 / [29:00] ID 스타일과 클래스 스타일 적용 / [29:48] ID스타일 사용하기 / [32:05] 결과 확인 / [32:30] 스타일 만들기 / [34:49] 클리어보스를 이용해 푸터를 하나의 영역으로 합치기 / [35:49] 푸터에 새 CSS 규칙 지정 / [37:00] 브라우저에서 미리보기 / [37:30] 여백 주기 / [38:43] 클래스 스타일 적용 / [39:59] 태그 선택기에서 클래스 스타일 적용 / [40:30] 브라우저에서 미리보기 / [40:52] CSS속성 지정할때 대화상자 살펴보기 / [41:30] 확장자 / [42:22] 배치 / [44:15] 스타일 수정 / [44:37] 영역에 테두리 그리기 / [45:51] 브라우저에서 미리보기 / [46:07] 테두리 높이 일정하게 맞추기 / [46:42] 푸터 스타일 수정 / [47:37] 속성값을 이용해 푸터 속성 변경하기 / [48:00] 콘텐트 속성 변경 / [49:14] 마진값 입력 / [49:52] 브라우저에서 미리보기 / [50:28] CSS 트렌지션 적용 / [51:22] CSS 전환-새 전환 생성 / [52:35] background-color 지정 / [52:51] 끝 값 선택 / [53:22] 전환 생성 / [53:45] 전환 제거 / [54:07] 브라우저에서 미리보기 / [54:28] 선택한 전환 편집 / [54:49] 브라우저에서 미리보기

14 CSS3 선택자 이용하기

CSS3 선택자를 이용해서 예제를 만들고 선택자의 적용 결과를 확인합니다.

44분

책갈피 : [00:05] 드림위버와 css3 알아보기 / [00:25] css3의 중요속성-접두어 / [01:23] webkit / [01:30] moz / [01:36] o / [01:42] ms / [01:49] css3의 중요속성-border-radius / [03:13] css3의 중요속성-box-shadow / [03:38] X-Offset / [03:53] Y-Offset / [04:11] Blur radius / [04:24] Spread radius / [04:38] Color / [05:08] css3의 중요속성-text-shadow / [06:00] X-Offset / [06:11] Y-Offset / [06:25] Blur radius / [06:30] Color / [07:15] border-radius 실습 / [08:07] border-radius 지정 / [08:48] 크롬에서 미리보기 / [09:33] 이미지에 그림자 효과 추가와 응용 / [10:00] 새 css 규칙 삽입 / [11:00] box-shadow 설정 / [12:30] 그림자 효과 추가 / [13:52] 디자인 뷰 보기 / [14:28] css를 이용해서 버튼 만들기 / [15:13] 새 css규칙 삽입 / [16:14] myButton 지정 / [16:37] myButton 수정 / [18:41] 배경 색 지정 / [19:26] 버튼 모서리 둥글게 만들기 / [20:07] 텍스트에 그림자 효과 주기 / [21:30] 마우스 오버했을때 그림자 생기는 버튼 만들기 / [21:56] 새 css 규칙 삽입 / [22:45] box-shadow 속성 지정 / [23:52] 작업 확인 / [24:00] 탑의 좌표값 조절 / [25:15] 브라우저에서 미리보기 / [25:56] css로 텍스트 서식 지정 / [27:15] css 소스 추가 / [27:52] 새 css 규칙 삽입 / [28:29] h2 태그 스타일 지정 / [29:25] p 태그 스타일 지정 / [30:41] 새 css규칙 삽입 / [31:55] accent 스타일 지정 / [32:45] 브라우저에서 미리보기 / [33:52] html 문서 살펴보기 / [35:20] head / [35:49] title / [36:22] body / [37:04] css3의 중요속성-resize / [38:14] css3의 중요속성-background-size / [39:30] css3의 중요속성-rgba / [40:28] css3의 중요속성-transform / [42:19] css3의 중요속성-transition

15 템플릿을 이용해 문서만들기

템플릿을 이용해서 문서를 제작하고 템플릿 레이아웃을 이용해서 디자인을 편집해보는 작업을 진행합니다.

50분

책갈피 : [00:02] 템플릿 기능에 대해 알아보기 / [00:33] 예제를 통해 기능 알아보기 / [00:40] 사이트관리 / [01:21] 새 사이트 생성 / [02:30] 로컬사이트 폴더 변경 / [03:45] html 파일 열기 / [04:38] 템플릿으로 저장 / [05:55] 템플릿.dwt 파일 확인 / [06:39] 웹사이트에 올릴수 있는 html 파일 만들기 / [07:13] 에셋창 열기 / [07:46] 템플릿 드래그해서 도큐먼트에 넣기 / [08:41] 파일 다른이름으로 저장 / [10:35] 템플릿.dwt 파일에서 수정하기 / [11:16] 새 편집 가능 영역 / [11:54] 메뉴 전체선택 후 title 입력 / [13:28] 템플릿 파일 업데이트 / [13:58] 02.html 파일 보기 / [14:11] 01.html 파일 보기 / [15:05] 02.html 파일 내용 변경 / [17:03] 수정 잠금하기 / [17:56] 템플릿 마크업 제거 / [18:30] 일치하지 않는 영역 이름 / [19:25] menu 부분 수정 / [20:52] 탬플릿-반복 영역 / [22:00] 반복되는 메뉴 추가 / [22:45] 반복되는 메뉴 삭제 / [23:30] 새 편집 가능영역 선택 / [24:47] 메뉴 이름 변경 / [25:25] 글자 부분 수정 / [26:18] 메뉴 부분 css로 이동 / [26:56] 글자 간격 조절 / [27:15] cellpad와 cellspace 조절 / [27:59] 블럭지정한 부분 변경 / [30:30] 패딩값 입력 / [31:44] marquee태그 / [32:06] marquee 태그 예시 보기 / [33:00] marquee 태그 입력 / [33:29] 크롬으로 보기 / [34:00] 익스플로러로 보기 / [34:45] marquee behavior=slide 입력 / [35:20] 크롬으로 보기 / [36:00] 익스플로러로 보기 / [36:37] marquee behavior=alternate 입력 / [37:06] 익스플로러 미리보기 / [37:30] 크롬으로 보기 / [38:15] width 값 입력 / [38:30] bgcolor 입력 / [38:36] font color 입력 / [38:52] 작업 확인 / [39:15] width 값 변경 / [40:00] 작업 확인 / [41:05] bgcolor 변경 / [41:44] marquee behavior=scroll 입력 / [41:57] 작업 확인 / [42:22] marquee scrolldelay로 속도 조절 / [44:05] marquee scrollamount / [45:07] marquee height / [46:30] direction 변경

16 CSS3 트랜지션 기능을 이용한 애니메이션만들기(1)

트랜지션기능을 이용해서 롤오버시 튀어나는메뉴를 만들어보고 그 결과를 확인해봅니다.

55분

책갈피 : [00:05] marquee 태그로 예제 작업 / [00:23] 예제 미리보기 / [01:03] 새 도큐먼트 만들기 / [01:22] 페이지 속성에서 배경색 넣기 / [01:55] 표 삽입 / [02:46] 코드 입력 / [04:30] 글자 입력 / [05:24] 저장 후 미리보기 / [05:56] 폰트 크기 및 표 수정 / [06:30] 저장 후 미리보기 / [06:53] 표 삽입 / [07:12] 표 안에 이미지 삽입 / [08:00] 라인 넣기 / [08:41] 이메일 주소 입력 / [09:13] 전자 우편 링크 적용 / [10:16] 저장 후 미리보기 / [11:26] 배운 명령어를 토대로 예제 작업하기 / [11:54] 저장 폴더 생성 / [12:48] 폴더 안에 파일 정리 / [13:05] html 파일 출력 / [15:01] 배경 만들기 / [15:58] 표 삽입 / [16:11] 표 안에 로고 이미지 삽입 / [17:03] 표 삽입 / [17:21] 표 안에 이미지 삽입 / [17:48] 표 삽입 / [17:56] 표 안에 롤오버 이미지 삽입 / [19:37] 저장 후 출력 / [20:03] 롤오버 이미지 가로로 정렬 / [20:44] 보더값 0으로 지정 / [21:48] 플래시 파일 삽입 / [22:22] 플래시 파일 재생 / [22:40] 플래시 파일 크기 조절 / [23:52] 이미지 삽입 / [24:15] 이메일 불러오기 / [25:22] 링크 페이지 제작 / [26:03] 표 삽입 / [26:37] 배경색 삽입 / [27:00] 이미지 삽입 / [27:44] 롤오버 이미지 삽입 / [28:36] 텍스트 삽입 / [29:03] 다른 이름으로 저장 / [29:48] 이미지 클릭했을때 해당페이지로 넘어가는 작업하기 / [31:22] 이메일 링크걸기 / [32:22] home 부분에 링크걸기 / [32:50] 저장 후 작업확인 / [33:37] css 트랜지션 기능을 이용해 애니메이션 만들기 / [33:52] css 디자이너와 css전환 shift+F11 / [35:00] 새 전환 생성 / [35:27] 전환 설정 / [36:50] 다른이름으로 저장 / [37:29] 예제 보기 / [38:22] 이미지 만들기 / [39:21] 이미지 삽입 / [40:07] div와 ul태그로 이미지 묶기 / [41:07] 이미지에 하이퍼링크 걸기 / [42:07] li 태그 입력 / [43:22] css 전환 창 열기 / [43:37] 대상 규칙 정의 / [44:37] 전환 편집 / [46:00] 태그 수정 / [46:37] position 속성 입력 / [47:00] 저장 후 확인 / [48:07] 리스트 형태 수정 / [48:37] list-style 타입 만들기 / [50:00] 저장 후 확인 / [50:58] 픽셀 값 입력 / [52:27] 새로 고침 후 확인 / [53:49] bottom 효과 / [54:21] right 효과 / [54:58] left 효과

17 CSS3 트랜지션 기능을 이용한 애니메이션만들기(2)

트랜지션 기능을 이용해서 베너, 롤오버,롤아웃 메뉴를 만들어보고 그 결과를 확인해봅니다.

44분

책갈피 : [00:02] 애니메이션 제작 / [00:42] 예제 보기 / [01:51] div id와 div class 생성 / [02:53] p 태그에 입력 / [03:23] p class 정의 / [03:59] 내용 입력 / [04:30] 저장 후 확인 / [05:15] 타이틀 정하기 / [05:30] 스타일 css 입력 / [06:11] 디자인 창 보기 / [06:39] 새 전환 생성 / [07:30] 백그라운드 포지션 속성 설정 / [08:15] 저장 후 확인 / [08:52] 스타일 css 입력 / [09:52] view에 이미지 저장 / [10:46] 모든 브라우저에 호환되도록 설정 / [11:22] 컬러와 폰트 입력 / [12:01] width 값 지정 / [12:13] 글꼴 입력 / [12:58] 확인 / [14:16] 중복된 view 부분 지우기 / [15:11] p태그 입력 / [16:18] 텍스트 움직이기 / [17:41] 트랜지션을 이용한 예제 만들기 / [18:00] 새 html 문서 생성 / [18:41] 타이틀 입력 / [18:51] 바디 부분에 이미지 불러오기 / [19:48] 이미지에 div 태그 추가해서 css 스타일 적용하기 / [20:17] 새 css 규칙 추가 / [20:48] 배경 설정 / [21:30] 배치 설정 / [23:10] 이미지에 대한 부분 변경 / [23:56] 저장 후 확인 / [24:29] 트랜지션을 적용해 애니메이션 적용하기 / [24:44] 새 전환 생성 / [26:48] 선택자 소스 추가 / [27:41] 선택자 소스에 새 전환 추가 / [29:41] 저장 후 확인 / [30:44] 이미지 top값 0픽셀로 조정 / [31:44] 회전과 투명도를 이용해 롤오버와 롤아웃이미지 만들기 / [32:14] 새 파일 타이틀 정하기 / [32:42] 비순차 목록 설정 후 이미지 불러오기 / [34:06] 각각에 id와 속성값 지정 / [34:45] 투명도 값으로 편집 / [35:14] 속성 지정 / [35:57] 저장 후 확인 / [36:45] 회전에 관한 트랜지션값 적용 / [37:00] 새 전환 생성 / [37:49] transform 속성 지정 / [39:07] 미리보기 / [39:37] transform에 오퍼시티 값 추가 / [40:59] 저장 후 확인 / [41:30] li 태그에 오퍼시티값 적용 / [42:07] 미리보기

18 반응형 웹문서 만들기

미디어쿼리와 유동격자 레이아웃 기능을 이용해서 반응형 웹사이트를 만들어보고 결과를 확인해봅니다.

1시간 1분

책갈피 : [00:04] 반응형 웹사이트 만들기 / [01:56] 유동 격자 레이아웃으로 문서 만들기 / [04:15] 스타일 css 파일로 저장 / [05:09] 디자인 부분으로 보기 / [05:42] 타이틀 입력 후 문서 저장 / [06:44] 저장 된 부분 살펴보기 / [07:30] 각각의 소스 추가하기 / [08:05] header에 이미지 삽입 / [09:20] h1 태그에 네비게이션 매뉴 추가 / [10:05] 매뉴 항목 추가 / [10:56] div class 태그 추가 / [11:26] 이미지 삽입 / [12:20] 디자인 부분 보기 / [13:03] 섹션 영역에 div 태그 추가 / [13:37] 이미지 삽입 / [13:52] div class=gallery 추가 / [15:24] 저장 후 디자인 보기 / [15:58] footer 작성 / [16:11] 카피라이트 삽입 / [16:41] 페이지값 적용 / [17:41] 디자인 보기 / [18:03] 브라우저에서 확인 / [18:37] 페이지 줄이기 / [19:56] 해상도에 따라 변경되는 레이아웃 css로 적용하기 / [20:41] pc 화면 적용 / [22:22] 코드 보기 / [22:37] utf-8에 각각의 소스 추가 / [24:00] list 항목에 대한 속성 적용 / [24:37] 마진과 패딩값 지정 / [25:02] body 부분 만들기 / [25:18] 글꼴 지정 / [26:32] 백그라운드 컬러 적용 / [27:07] 폰트 컬러 지정 / [27:32] 폰트 사이즈 지정 / [28:02] header에 적용되는 컬러값 적용 / [29:03] clear에 속성 적용 / [29:37] 확인 / [30:22] 해상도에 따라 변경되는 레이아웃 만들기 / [30:48] style.css 코드보기 / [32:59] 데스크탑 설정 / [33:45] header 부분 적용 / [35:37] width 값 설정 / [36:07] header h1 선택자 소스 추가 / [37:07] header nav 정렬값 지정 / [38:00] header ul 태그 지정 / [41:57] header ul li 태그 지정 / [44:06] a태그가 있을때 따로 지정해 줄수 있는 속성 / [44:45] section 여백값 지정 / [46:22] section .gallery 추가 / [46:52] 갤러리 이미지 가져오기 / [48:04] section .gallery ul li span 태그 작성 / [49:07] footer 설정 / [50:57] 디자인 보기 / [52:07] 타블릿 크기나 모바일 크기 확인 / [52:57] 모바일 부분 설정 / [53:27] header 부분 값 조절 / [54:15] 마진 값 조절 / [54:37] height 값 지정 / [54:57] width 값 지정 / [55:50] 저장 후 디자인보기 / [56:14] 코드 추가 수정 / [56:45] 디자인 보기 / [57:07] 타블렛 부분 설정 / [59:13] 저장 후 디자인보기 / [60:22] 브라우저 크기 줄여서 확인

19 모바일 웹사이트 만들기(1)

제이쿼리 모바일 위젯을 이용해 페이지를구성하고 테마를 변경해보는 작업을 진행합니다.

51분

책갈피 : [00:06] 드림위버를 이용해 모바일웹사이트 만들기 / [01:03] 새 사이트 만들기 / [02:22] 모바일 페이지 제작 / [02:51] 시작 템플릿 / [03:12] 제이쿼리 모바일(CDN) / [03:34] 제이쿼리 모바일(로컬) / [03:53] 테마가 포함된 제이쿼리 모바일(로컬) / [04:46] 새 문서 저장 / [05:27] 파일이름 index로 지정 / [05:46] 종속 파일 복사 창 / [07:46] 생성된 웹 페이지 확인 / [08:41] 전체적인 부분에서 보기 / [10:16] 추가적으로 페이지 삽입하기 / [10:58] 제이쿼리 모바일 메뉴보기 / [11:41] 페이지 선택 / [12:31] 머리글 수정 / [13:00] 하이퍼링크 목록 지정 / [14:16] 브라우저 확인 / [14:35] 페이지 소스에 대한 구성 보기 / [15:54] footer에 고정되는 네비게이션 바 추가하기 / [16:30] h4 페이지 바닥글 삭제 / [16:56] div 태그 추가 / [17:26] ul 태그 추가 / [17:48] home 설정 후 링크걸기 / [18:56] 네비게이션 바 구성 / [19:26] intro 넣기 / [19:52] 페이지 2 id값 수정 / [20:14] 페이지 2 history 넣기 / [20:32] 페이지 4 program 넣기 / [20:41] 페이지 5 lecture 넣기 / [20:52] 작성된 부분 새로고침 후 살펴보기 / [22:00] 저장 뒤 브라우저로 보기 / [22:21] 네비게이션이 각 페이지마다 구성되도록 만들기 / [22:56] data-role footer에 속성 지정 / [23:41] 디자인 부분 보기 / [23:55] 저장 뒤 브라우저로 보기 / [24:26] 2 페이지 네비게이션 바 구성 / [25:18] 분할 보기 / [25:41] 각 페이지 네비게이션 바 구성 / [26:07] 디자인 보기 / [26:22] 저장 뒤 브라우저로 보기 / [27:18] 구성해준 부분에 타이틀 제목 변경하기 / [27:56] 타이틀 입력 / [28:48] 분할 부분으로 보기 / [29:07] 브라우저에서 확인 / [29:26] 각 페이지 타이틀 이름 바꾸기 / [31:29] 저장 후 브라우저로 보기 / [31:48] 버튼 삽입하고 디자인 변경하기 / [32:52] 2 페이지 정의 / [33:13] 내용에 해당 컨텐츠 삽입 / [34:05] 디자인 보기 / [34:30] 제이쿼리 모바일 버튼으로 하단에 버튼 삽입하기 / [35:15] 제이쿼리 모바일 버튼 생성 / [38:07] 관련 프로그램 입력 / [38:52] 생성된 모바일 버튼에 테마 변경 / [39:22] 버튼 영역 지정 / [39:36] 제이쿼리 색상 견본에서 테마 변경 / [40:30] 코드 보기 / [41:22] 버튼 아이콘 위치 / [41:51] 저장 후 브라우저로 보기 / [42:19] home 버튼에 모바일 버튼 삽입 / [43:00] 버튼 삽입 / [44:52] 각 영역마다 테마 변경하기 / [46:14] 저장 후 브라우저로 보기 / [46:37] 각 페이지 선택할때마다 나타나도록 설정하기 / [47:29] 페이지에 해당하는 메뉴 고정 / [48:00] 테마 적용 / [49:30] 디자인뷰로 보기 / [50:04] 저장 후 브라우저로 보기

20 모바일 웹사이트 만들기(2)

제이쿼리 모바일 위젯을 이용해 페이지를구성하고 테마를 변경해보는 작업을 진행합니다.

55분

책갈피 : [00:05] 완성된 파일에 이미지 파일 삽입 / [00:42] intro 부분에 이미지 삽입 / [01:57] 이미지 소스 보기 / [02:07] width값과 height값 삭제 / [02:46] 같은 크기 지정을 위해 속성추가 / [03:15] 따로 스타일 규칙 지정하기 / [04:15] top의 CSS 규칙정의 / [05:30] 저장후 브라우저 확인 / [06:28] 다음 페이지와 이전페이지로 이동하는 하이퍼 링크 작업하기 / [06:55] 컨텐츠 내용 삽입 / [07:38] 이전,다음 버튼 삽입 / [08:24] 버튼 대화창 보기 / [10:05] 버튼 삽입 설정 / [11:22] 버튼 소스에 스타일 추가 / [11:56] 버튼 이름 변경 / [13:01] 버튼 테마 적용 / [13:35] 버튼 아이콘 선택 / [14:18] 브라우저에서 확인 / [15:13] 버튼 속성에 링크 설정 / [15:50] 브라우저에서 확인 / [16:15] 제이쿼리 모바일 위젯 구성 보기 / [16:48] 목록보기 / [17:15] 레이아웃 격자 / [17:26] 축소 가능 블록 / [17:44] 텍스트 / [18:29] 목록보기를 이용해 작업하기 / [19:37] 위젯 적용 시키기 / [19:56] 페이지 구성 / [20:55] 머릿글 변경 / [21:10] 컨텐츠 내용 입력 / [22:03] 네비게이션 바 이용을 위해 fooer부분 복사 후 삽입 / [23:22] 새 페이지 생성 / [24:26] footer 부분 만들기 / [25:48] 목록보기 위젯 삽입해 리스트로 구성하기 / [26:37] 목록 보기 대화상자 / [27:15] 목록보기 설정 / [28:48] 저장후 브라우저에서 확인 / [29:00] 스타일 추가해 속성 지정 / [30:52] 저장후 브라우저에서 확인 / [31:03] 각 페이지로 이동할수있는 부분 만들기 / [32:06] 기본값 말풍선에 GO 입력 / [32:44] 페이지값 입력 / [34:13] 저장후 브라우저에서 확인 / [35:07] 완성된 리스트뷰 목록 테마 변경 / [37:28] 저장후 브라우저에서 확인 / [37:57] 축소 확장 메뉴를 이용해 블록 위젯 삽입하기 / [38:45] 축소 가능 블록 삽입 / [39:43] 목록 해당부분 만들기 / [40:27] 해당 내용 입력 / [42:12] 저장 후 브라우저에서 확인 / [42:30] 레이아웃 격자를 이용해 블록안의 컨텐츠 재배치 하기 / [43:21] 레이아웃 격자 삽입 / [44:22] 텍스트 삽입 / [45:30] 타이틀 다르게 표현하기 / [47:29] 행 부분 정렬 / [48:05] 저장후 브라우저에서 확인 / [48:43] 검색 적용 / [51:21] 전자우편 적용 / [51:35] 토글 스위치 뒤집기 적용 / [51:57] 슬라이더 적용 / [52:38] 제이쿼리 모바일 홈페이지를 앱으로 변환하기 / [53:43] phonegap build 서비스

샘플확인 : 알지오 검색후 -> 강의검색란 -> 드림위버 cc