드림위버 cc
웹개발을 쉽게하기위한 응용프로그램으로 웹표준에 대해서 코드이해가 부족하더라도 쉽게 학습이 가능합니다. 하지만 웹디자인이 아닌 개발을 원하신다면 웹표준부터 학습하는것을 추천합니다. 웹디자인 학습과정 중에서는 필수로 학습해야하는 과정이며 간편한 웹페이지를 구성하는것부터 css3 스타일을 이용해 프로젝트를 구성할 수 있습니다. 간단한 메뉴 이용으로 웹개발을 원한다면 권장합니다.
-
01.27분 드림위버CC 인터페이스와 속성익히기
웹사이트 제작을 위한 사이트를 정의하고 웹브라우저에서 결과를 확인합니다.
책갈피 : [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.1시간 16분 문서에 content삽입하기
문서환경을 설정하고 텍스트, 이미지를 삽입해서 예제를 통해 결과 화면을 확인합니다.
책갈피 : [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.55분 하드코딩으로 HTML요소 삽입해보기
하드코딩을 위한 코딩환경설정과 HTML의 태그요소를 삽입하고 예제를 통해 적용된 결과화면을 확인합니다.
책갈피 : [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.53분 비헤이비어속성으로 웹페이지 만들기
call javascript, open BrowserWindow, Show-hide element비헤이비어대해서 알아보고 적용되는 결과를 실습합니다.
책갈피 : [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.51분 CSS로 컨텐츠 디자인하기
CSS태그요소를 삽입하여 태그 선택자를 등록하고 CSS를 적용하여 결과를 확인합니다.
책갈피 : [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.51분 그룹 선택자를 등록하고 CSS 적용하기
그룹선택자의 특징과 적용방식을 알아보고 실습을 통해 CSS가 어떻게 적용되는지를 확인합니다.
책갈피 : [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.51분 style태그 선택자를 등록해서 CSS적용하기
style태그를 이용해서 예제를 통한 선택자등록과 CSS적용하는 결과를 확인합니다.
책갈피 : [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.57분 CSS 레이아웃 만들기
float속성과 clear속성을 이용한 부유 레이아웃으로 웹페이지를 만들어보는 실습을 진행합니다.
책갈피 : [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.55분 CSS 레이아웃을 이용해 문서 만들기
관련선택자등록해서 CSS 레이아웃을 만들어서 패널과 대화상자를 이용해 문서를 만들어보는 작업을 진행합니다.
책갈피 : [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.44분 CSS3 선택자 이용하기
CSS3 선택자를 이용해서 예제를 만들고 선택자의 적용 결과를 확인합니다.
책갈피 : [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.55분 CSS3 트랜지션 기능을 이용한 애니메이션만들기(1)
트랜지션기능을 이용해서 롤오버시 튀어나는메뉴를 만들어보고 그 결과를 확인해봅니다.
책갈피 : [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.44분 CSS3 트랜지션 기능을 이용한 애니메이션만들기(2)
트랜지션 기능을 이용해서 베너, 롤오버,롤아웃 메뉴를 만들어보고 그 결과를 확인해봅니다.
책갈피 : [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.51분 모바일 웹사이트 만들기(1)
제이쿼리 모바일 위젯을 이용해 페이지를구성하고 테마를 변경해보는 작업을 진행합니다.
책갈피 : [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.55분 모바일 웹사이트 만들기(2)
제이쿼리 모바일 위젯을 이용해 페이지를구성하고 테마를 변경해보는 작업을 진행합니다.
책갈피 : [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 [입문+고급]](/img_file/builder/Date/201310171564PhotoshopCC.jpg "포토샵 cc [입문+고급]")
포토샵 cc [입문+고급]17시간 33분
![일러스트 cc [입문+고급]](/img_file/builder/Date/201310179937IllustratorCC.jpg "일러스트 cc [입문+고급]")
일러스트 cc [입문+고급]16시간 49분
인디자인 cc & 전자책app만들기15시간 46분