강의자료 제공과 학습진도 관리는 어떻게 되나요?

모든 강좌에 강의자료를 제공하며, 수강생 대시보드에서 학습진도 확인이 가능합니다. 강사답변/질문답변 기능으로 질의응답도 지원합니다.

평생교육이용권은 무엇이며 사용처는 어디인가요?

평생교육이용권은 다양한 온라인/오프라인 교육 과정을 이용할 수 있는 패스이며, 알지오평생교육원 포함 제휴 사용처에서 적용됩니다. 상세 사용처는 공지 페이지를 참고하세요.

추천 인강과 IT강의 로드맵이 있나요?

기초→전문→실습 순으로 구성된 로드맵을 제공하여 IT 비전공자도 체계적으로 학습할 수 있습니다.

드림위버 cc 강의 기초 부터 실무 인강 알지오 평생교육원 추천강의

기초부터 차근차근 실무까지.
마지막 학습 보장!

드림위버 cc

강의구성
(20강) 전체 : 17시간 38분|평균 : 52분53초

이용기간 / 강사
2개월 / 알지오 R&D [IT]

증빙가능
수료증, 수강증, 학습진도

수강료
310,000원
155,000원

"5개월" 혜택!

수강 전 자주 묻는 질문

교재 없이? 초보자도 가능 한가요?

교재 없이도 동영상과 실습 자료만으로 학습할 수 있으며, 초보자도 이해하고 따라올 수 있도록 설계된 강의입니다.

알지오의 강의특징은 무엇인가요?

알지오 강의는 단순 촬영본이 아니라, 전문 편집으로 핵심만 담아 학습 효율을 높인 강의입니다.

프로그램은 어떻게 구하나요?

알지오 는 원격평생교육원 으로, 프로그램에 대한 정보는 알수 없습니다.

강의목록

수강생 리얼후기!

연관학과

01.27분 드림위버CC 인터페이스와 속성익히기
웹사이트 제작을 위한 사이트를 정의하고 웹브라우저에서 결과를 확인합니다.

기능 설명(패널/속성)/페이지 설정/파일 설정(사이트설정)/로컬사이트 폴더 설정/제거및 편집 방법(사이트설정)/서식기능 활용/코드기능 확인/분할기능 확인/디자인기능 확인/파일 저장/브라우져 미리보기/링크설정 후 결과확인/모양 설정(페이지속성)/인용블록기능 설명/목록항목기능 설명/삽입패널 설명/이미지삽입 방법/속성창 설명/이미지링크 설정/저장/브라우저 미리보기/border 변경 (분할)/그림설명 기능/이미지 변경(파일탐색 설정)/편집기능 설명/맵기능 설명/이미지일부분 링크설정/이미지일부분 결과확인/대상기능 설명/정렬기능 설명/활용
02.1시간 16분 문서에 content삽입하기
문서환경을 설정하고 텍스트, 이미지를 삽입해서 예제를 통해 결과 화면을 확인합니다.

예제1 불러오기/속성창 열기/문단 나누기/p 태그확인(소스코드)/문단 줄바꾸기/br 태그확인(소스코드)/서식기능 설명/모양(CSS)기능 활용/예제1 저장/예제1 결과확인/저작권 삽입 (문자기능)/예제2 불러오기/dl 태그, dt 태그, dd 태그 활용/목록문단 정의/li 태그 활용 (비순차목록)/ol 태그 활용 (순차목록)/예제2 저장 후 결과 확인/목록항목 설정, 변경 및 결과확인/CSS규칙에 대한 상황별 정의(문자)/이미지 삽입, 정렬/CSS규칙에 대한 상황별 정의(이미지)/롤오버이미지 삽입/롤오버이미지 저장/롤오버이미지 결과확인(콘텐츠허용)/수평선기능 활용과 소스코드 확인/가로세로변경, 단위값설정, 정렬설정/수평선 저장 후 결과확인(수평선기능의 다양한 활용결과)/hr태그, 색상변경(소스코드)/예제3 불러오기(총괄 확인)/예제3 결과확인(콘텐츠허용)/예제3 만들기(배경색, 문자삽입)/수평선 만들기/문자 설정(CSS규칙정의)/수평선색상 설정/예제3 중간 결과확인/문자삽입(CSS규칙 정의설정, 색상, 글꼴)/수평선 만들기 설정/예제3 중간 결과확인/이미지 삽입/문자삽입과 속성설정/예제3 중간 결과확인(링크설정)/이미지 삽입, 설정/예제3 중간 결과확인(롤오버이미지)/목록 만들기/비순차목록/목록항목 기능(기호변경)/순차목록/목록항목 기능(로마자,숫자,알파벳)/목록항목 기능(시작번호 설정)/목록항목 기능(번호 재설정)/예제3정리, 목록정리/링크 속성과 테이블/절대경로 링크설정/링크 색상설정(링크(CSS))/링크 저장 후 결과확인/배경색 변경(모양(CSS))/배경이미지 변경(모양(CSS))/다양한 배경색에 따른 문자저장 후 결과확인/상대경로 링크설정/링크 저장 후 결과확인/테이블 정의/표 설정/table태그, tr태그, td태그/표속성크기 조절/CellPad, CellSpace 설정/테이블 저장 후 결과확인(Border값 1)/테이블 저장 후 결과확인(Border값 0)/표속성 설명/셀기능 설명(삽입, 병합, 분할)/셀기능 설명(수평, 수직, 가로, 세로)/셀기능 설명(한 줄로, 머리글, 배경)/총괄 예제/첫변째페이지 만들기/표삽입, 설정/이미지삽입, 설정/첫변째페이지 저장/첫번째페이지 결과확인/첫번째페이지 수정, 변경 후 결과확인/그림설명 추가
03.59분 테이블 삽입하고 셀 편집하기
테이블과 셀속성을 삽입을 통해 관련 속성을 알아보고 예제를 통해 실습해 봅니다.

페이지 생성/표 생성/가운데 정렬/본문 이미지 삽입/타이틀 이미지 삽입/그림 설명/다른 이름으로 저장/브라우저에서 미리보기/CellPadding, CellSpace, Border 값 조절/타이틀에 링크 걸기/브라우저에서 미리보기/타이틀 테두리 없애기/dispaly:block/브라우저에서 미리보기/가운데 정렬/1.html 페이지로 링크 걸기/브라우저에서 미리보기/이미지 테두리 없애기/page1로 링크 걸기/완성페이지 확인/표 생성/가운데 정렬/이미지 삽입/텍스트 입력/표 레이아웃 변경/배경색 삽입/저장 후 결과 확인/2.html 페이지로 링크 걸기/Border=0/브라우저에서 미리보기/2.html 페이지 본문 내용 삽입/이미지 크기 조절/표 테두리 생성/브라우저에서 미리보기/HTML Colors 표 만들기 실습/행, 열, 표 폭/테두리 두께, 셀 패딩, 셀 간격/머리글/캡션, 요약/표 내용 입력/저장 후 미리보기/행과 열의 수 변경하기/행 삽입/열 삽입/셀 병합/열 크기 변경/배경색 삽입/셀의 가로 정렬/브라우저에서 미리보기/사이트 정의 및 관리/테이블 명령어/포토샵 파일 테이블로 가져오기/슬라이스툴로 이미지 분할하기/Rulers 표시/분할된 이미지 저장하기/저장된 이미지 확인하기/드림위버로 분할된 이미지 불러오기/완성 예제 확인하기/타이틀과 상단 메뉴 테이블 만들기/표 만들기/이미지 불러오기/표 만들고 이미지 불러오기/브라우저에서 미리보기/본문 만들기1/표 만들고 이미지 불러오기/텍스트 입력/이미지 삽입 된 상태에서 텍스트 입력하기/브라우저에서 미리보기/본문 만들기2/이미지 불러오기/브라우저에서 미리보기/텍스트 입력/브라우저에서 미리보기/텍스트 편집/copyright 입력/가운데 정렬/브라우저에서 미리보기
04.51분 폼 정의와 폼 컨트롤 요소 삽입하기
폼 문서에 대해서 알아보고 폼 컨트롤 요소에 대해서 속성을 지정하고 결과 화면을 확인합니다.

폼 정의/텍스트 폼/문자폭 설정/Max Length(최대허용문자)/value값 입력/텍스트 필드 여러줄로 만들기/텍스트 영역/value값 입력/Rows값 설정/암호/Max Length(최대허용문자)/value값 입력/결과 확인/컨트롤명 변경/컨트롤 비활성화/브라우저에서 미리보기/읽기전용으로 설정/텍스트 영역 삽입/value값 입력/Rows값 설정/버튼 컨트롤/체크 상자 삽입/체크 상자 여러개 삽입/브라우저에서 미리보기/Checked 설정/라디오 버튼 삽입/브라우저에서 미리보기/Name과 Title 변경/브라우저에서 미리보기/체크 상자 그룹 삽입/라디오 그룹 삽입/브라우저에서 미리보기/선택 컨트롤 삽입/브라우저에서 미리보기/선택 컨트롤 사이즈 변경/Multiple/목록값 변경/파일 컨트롤 삽입/브라우저에서 미리보기/버튼 컨트롤 삽입/Vlaue값 입력/브라우저에서 미리보기/폼 컨트롤을 활용한 실습-가입신청서 양식/표 만들기/항목 입력/텍스트 컨트롤 삽입/버튼 컨트롤 삽입/암호 컨트롤 삽입1/암호 컨트롤 삽입2/텍스트 컨트롤 삽입/라디오 버튼/브라우저에서 미리보기/선택 컨트롤 삽입/목록값 입력/브라우저에서 미리보기/버튼 컨트롤 삽입/CellPadding, CellSpace, Border 값 조절/폼 컨트롤을 활용한 실습2/폼 태그 확인/폼 ID 변경/Method 변경/텍스트 컨트롤 삽입/ID 속성 바꾸기/암호 컨트롤 삽입과 변경/파일 컨트롤 삽입과 변경/버튼 컨트롤 삽입과 변경/폼 컨트롤을 활용한 실습3/필드세트 컨트롤 삽입/라디오 그룹 컨트롤 추가/레이블과 값 입력/체크 상자 컨트롤 삽입/선택 컨트롤 삽입/목록값 추가/브라우저에서 미리보기
05.55분 하드코딩으로 HTML요소 삽입해보기
하드코딩을 위한 코딩환경설정과 HTML의 태그요소를 삽입하고 예제를 통해 적용된 결과화면을 확인합니다.

하드코딩으로 HTML요소 삽입/예제를 통해 코드 살펴보기/주석문 입력하기/h1 부터 h6 태그 입력하기/p 태그 입력/br 태그 입력/strong 태그 입력/em 태그 입력/div 태그 입력/익스플로러 미리보기로 결과 화면 확인/태그를 이용해 목록 정의하기/ul과 li태그 삽입/hr과 ol 과 li 태그 입력/hr, di, dt, dd 태그 입력/p, a, img 태그 입력/p, a 태그 입력/익스플로러 미리보기로 결과 확인/테이블 태그에 대해 알아보기/테이블과 캡션 태그요소 입력/행 관련 tr, th 태그 입력/2행 3행 관련된 tr, td 태그 입력/익스플로러 미리보기로 결과 확인/폼 관련 태그 요소에 대해 알아보기/폼 태그 요소 입력/텍스트 필드 삽입/리스트 메뉴 삽입/파일 필드 삽입/필드 셋과 라디오 버튼 삽입/체크박스 삽입/텍스트 영역 패드 삽입/폼 버튼 삽입/익스플로러 미리보기로 결과 확인/태그 정리/p 태그/div 태그/br 태그/h 태그/strong 태그/em 태그/ol 태그/ul 태그/li 태그/dl 태그/dt 태그/dd 태그/hr 태그/img 태그/a 태그/table 태그/tr 태그/th 태그/td 태그/caption 태그/thead 태그/tfoot 태그/form 태그/input 태그/textarea 태그/select 태그/option 태그/태그로 새로운 예제 만들기/타이틀 작업/태그를 이용해 텍스트 입력/이미지 삽입/속성값 변경/익스플로러 미리 보기/테이블과 폼 삽입하기/테이블 삽입/테이블에 텍스트 삽입/셀 합치기/행 색깔 지정/폼 정의 명령 실행하기/텍스트 영역 삽입/버튼 삽입/익스플로러 미리 보기
06.52분 텍스트와 이미지에 하이퍼링크 지정하기
텍스트와 이미지에 하이퍼링크를 지정하고 하이퍼링크의 스타일을 변경해보는 작업을 진행합니다.

하이퍼링크 지정과 하이퍼링크 스타일 변경하기/예제에 하이퍼링크 지정/대상 지정할때 blank/하이퍼링크 경로 선택해서 입력/이미지에 하이퍼링크 지정/링크 css 설정/브라우저에서 미리보기/페이지속성 살펴보기/밑줄 스타일/하이퍼링크 삭제/네임앵커 기능/예제를 이용해 네임앵커 기능 보기/ID 지정/링크 입력/브라우저에서 미리보기/다른 웹문서에서 이미 지정된 네임앵커 위치를 하이퍼링크로 지정하는 방법/이미지 맵으로 하이퍼링크 지정하기/이미지 선택/이미지 맵 영역에 하이퍼링크 지정/타원으로 이미지맵 영역 지정/이미지 맵에 링크 지정/다각형으로 이미지맵 영역 지정/이미지 맵에 링크 지정/브라우저 미리보기/만들어진 이미지 영역 이동하기/iframe 명령어/iframe 소스 내용/iframe 소스 만들기/새 도큐먼트 열기/분할 화면 선택/불러오는 링크태그 입력/브라우저에서 미리보기/iframe 소스 여러번 사용하기/iframe 크기조절/브라우저 미리보기/iframe 외곽선 두께/frameborder 값 지정/iframe 스크롤바 조절/iframe 여백조절/iframe 링크/빈 페이지에 배경색 지정/a 태그로 타겟 페이지 불러오기/브라우저에서 미리보기/iframe을 응용해 사이트 만들기/빈페이지에 표 삽입/가운데 셀에 플래시파일 불러오기/플래시 파일 미리보기/이미지 삽입/전체 테이블 선택 후 불필요한 선 제거/브라우저에서 미리보기/새 페이지에 표 삽입/기존에 있던 이미지 부르기/배경색 깔기/iframe 입력/디자인 보기/타이틀 입력/타이틀에 링크 지정/브라우저에서 미리보기/home 눌렀을때 메인으로 넘어가는 링크 지정/주의할 점/저장된 문서를 iframe으로 삽입하기/iframe 삽입/iframe 소스 수정/브라우저에서 미리보기/iframe구조에서 하이퍼링크와 타겟 지정/브라우저에서 미리보기
07.60분 점프메뉴, 롤오버이미지, 갤러리 삽입하기
이벤트에 따라 이미지가 변경되는 롤오버를 설정하고 그에맞는 갤러리예제를 통해 삽입된 이미지의 결과를 확인합니다.

점프메뉴, 롤오버이미지, 갤러리 삽입하기/롤오버이미지 삽입하기/롤오버 이미지 삽입 대화상자/이미지 이름 지정/원본 이미지 불러오기/롤오버 이미지 불러오기/그림 설명 작성/링크 입력/브라우저에서 미리보기/비헤이비어/마우스 오버/점프메뉴 삽입과 폼버튼에 하이퍼링크 입력/폼 버튼 삽입/비헤이비어 추가/비헤이이비어 메뉴가 onClick 인지 확인/점프메뉴/점프 메뉴 대화상자/메뉴 아이템 등록/텍스트 입력/항목 추가/하이퍼링크 주소 지정/브라우저에서 미리보기/점프메뉴 삽입 확인/점프메뉴 수정/이미지교체 비헤이비어로 롤오버 갤러리 만들기/첫번째로 교체되는 이미지의 ID 지정/하이퍼링크 텍스트 지정과 이미지교체 비헤이비어 적용/이미지 교체 대화상자/소스설정 검색/이미지 교체 비헤이비어 이벤트 교체/브라우저에서 미리보기/비헤이비어 삭제하고 싶을때/브라우저 윈도우 열기, 자바스크립트 호출, 요소 표시 숨김/브라우저 윈도우 열기 비헤이비어 설명/자바스크립트 호출 비헤이비어 설명/요소 표시 숨김 비헤이비어 설명/자바스크립트 호출 예제/비헤이비어 적용/작업 확인/브라우저 윈도우 열기 비헤이비어로 팝업창 표시하기/하이퍼링크 텍스트 지정과 비헤이비어 적용/나타낼 URL 검색/브라우저 미리보기/요소표시 숨김 비헤이비어로 특정위치에 팝업창효과 지정하기/하이퍼링크로 지정한 ID 값 확인/요소 목록에서 요소 숨김/이벤트 지정/요소 목록에서 요소 표시/브라우저에서 미리보기/팝업 메시지 비헤이비어로 경고음과 함께 메시지 창 출력/팝업 메시지 비헤이비어 적용/브라우저에서 미리보기/예제 결과 확인/자바스크립트 호출 비헤이비어 적용/브라우저 윈도우 열기 비헤이비어 적용/이미지 맵 기능 적용할 이미지 선택/이미지 맵 영역에 대한 하이퍼링크 지정/브라우저 미리보기/예제 결과 확인/웹 페이지 하이퍼링크 지정/텍스트 내부 웹페이지 하이퍼링크/상단으로 이동하는 하이퍼링크 지정/링크 CSS에서 색상 변경/점프메뉴 작성/브라우저에서 미리보기
08.53분 비헤이비어속성으로 웹페이지 만들기
call javascript, open BrowserWindow, Show-hide element비헤이비어대해서 알아보고 적용되는 결과를 실습합니다.

비헤이비어에 대해 알아보기/상태 표시줄의 텍스트 설정/onLoad 이벤트/브라우저에서 미리보기/도큐먼트 창에 글자 입력/글자에 비헤이비어 추가/브라우저에서 미리보기/팝업 메시지 추가/브라우저에서 미리보기/텍스트에 팝업 메시지 지정/브라우저에서 미리보기/하이퍼링크 밑줄 표시 해제/파일 불러오기/결과 창 확인/비헤이비어를 이용해 롤오버 이미지 이용하기/새 도큐먼트에 배경지정/표 삽입/이미지 삽입/이미지 선택 후 이미지교체 클릭/브라우저에서 미리보기/이미지 삽입/이미지 선택 후 이미지교체 클릭/브라우저에서 미리보기/결과 창 확인/표 삽입/이미지 삽입/새 창 열고 배경색 지정/비헤이비어로 브라우저 윈도우 열기 설정/브라우저에서 미리보기/내비게이션 툴바 체크/위치 툴바와 상태 표시줄 툴바 체크/크기 조절과 스크롤 바 체크/css 명령어 알아보기/새 css 규칙 선택/기본 설정 변경/글꼴 선택 후 텍스트 블록 지정/css 에서 대상 규칙과 클래스 지정/수정 할때/규칙 편집에서 유형 변경/새 css 규칙 만들기/선택기 유형 태그로 지정/선택기 이름 살펴보기/태그 확인/텍스트 유형 변경/글자 배경 색 입력/선택기 유형 ID로 지정/ID의 의미/선택기 이름에 text 입력/완성된 예제 보기/배경에 색과 이미지 지정/클래스를 back 으로 선택/배경 수정/새 css 추가로 글자 수정/글 사이 간격 수정/타이틀 부분 잡기/표 삽입/스타일 시트 테이블 안에 적용/표에 글자 입력/css규칙 편집으로 서체 수정/원하는 사이트 이름으로 변경/사이트 이름에 링크 걸기/브라우저에서 미리보기/밑줄과 없애고 서체 변경하기/브라우저에서 미리보기
09.51분 CSS로 컨텐츠 디자인하기
CSS태그요소를 삽입하여 태그 선택자를 등록하고 CSS를 적용하여 결과를 확인합니다.

스타일 시트 명령어/텍스트 - 링크 입력/새 CSS 규칙/페이지 속성 - 링크 설명/링크 설정/CSS 규칙 설정/미리보기/표 삽입/표 - CSS 규칙 설정/규칙 편집/표 배경 삽입/표 테두리 설정/미리보기/새 문서 - 외부 스타일 시트/외부 스타일 시트 규칙 설정/표 생성 - 스타일 시트 설정/스타일 시트 설정 2/배경색 설정/미리보기/새 파일 - 표 삽입/소스 코드 불러오기/링크 설정/테두리 설정 추가/예제 - CSS 규칙 설정/규칙 재설정/링크 설정/미리보기/다른 예제 - CSS 설정/미리보기/CSS 특징/요소 전체 스타일 지정/새 CSS 설정/미리보기/속성 값 확인/Div 태그/Div 태그 설정/적용된 설정 확인/미리보기/클래스 선택자/클래스 CSS 규칙 설정/클래스 선택 적용/두번째 문단 클래스 적용/미리보기/하이퍼링크 텍스트 메뉴/CSS 규칙 설정/적용된 설정 확인/복제 설정/CSS 규칙 설정 2/복제 설정 2/미리보기/문단 첫글자 디자인 변경/커서 위치 지정 - CSS 규칙 설정/적용된 설정 확인/새 CSS 삽입/적용된 설정 확인/미리보기
10.51분 그룹 선택자를 등록하고 CSS 적용하기
그룹선택자의 특징과 적용방식을 알아보고 실습을 통해 CSS가 어떻게 적용되는지를 확인합니다.

선택자 등록 및 CSS 적용/전체 선택자 특징/전체 선택자 적용 과정/자손 선택자의 특징/자손 선택자 문법/자손 선택자 적용 과정/쉼표를 이용한 그룹 선택자의 특징/그룹 선택자 적용 과정/전제 선택자를 이용한 HTML 예제 설정/CSS 규칙 설정/적용된 속성 확인 , 미리보기/자손 선택자를 이용한 예제 정/첫번째 목록 문단 ID 값 지정/나머지 목록 문단 ID 값 지정/CSS 규칙 설정/CSS 규칙 설정 2/CSS 규칙 설정 3/CSS 규칙 설정 4/CSS 패널 확인 , 미리보기/그룹 선택자를 이용한 예제 설정/첫번째 선택자 등록/두번째 선택자 등록/CSS 패널 확인 , 미리보기/외부 CSS 를 이용한 예제 설정/외부 CSS 파일의 장점/테이블 ID 값 등록/미리보기/첫번째 선택자 등록/테이블 제목 셀 변환/두번째 선택자 등록/세번째 선택자 등록/네번째 선택자 등록/불필요한 div 삭제/브라우저에서 미리보기/css 파일 연결해서 여러 문서에 사용하기/css 파일 연결/테이블에 ID 값 지정/제목 셀 변경/브라우저에서 미리보기/css 파일 연결 해제/하드코딩으로 CSS 문법을 익히고 디자인 적용하기/CSS 선언/인라인 방식/스타일 태그를 이용한 내부 정의 방식/외부 정의 방식/css 선택자 종류/태그 선택자/클래스 선택자/아이디 선택자/css 속성과 값/텍스트 관련 속성/색상과 배경 관련 속성/박스 모델 관련 속성/목록 관련 속성/인라인 방식으로 css 적용하기/css 관련 소스 삽입/코드 보기/div 요소에 소스 삽입/브라우저에서 미리보기
11.51분 style태그 선택자를 등록해서 CSS적용하기
style태그를 이용해서 예제를 통한 선택자등록과 CSS적용하는 결과를 확인합니다.

스타일 태그를 이용한 CSS 등록/CSS 적용 방식/CSS 선택자 소스 입력/dl 태크 선택자 삽입/cookTitle 클래스 선택자 삽입/h3 태그 요소의 클래스 선택자 삽입/미리보기/외부 파일 방식의 CSS 적용/새 문서 - 미리 저장/외부 CSS 파일 연결/h4 와 ol 태그 요소 클래스 & 아이디 선택자 적용/cookHowtoTitle 선택자 정의/레시피 박스 li선택자 정의/미리보기/예제 - 결과 화면 미리보기/새로운 선택자 등록/선택자 등록 2/선택자 등록 3/선택자 등록 4/CSS 수정/미리보기/하이퍼링크와 문단 디자인 변경/결과 화면 미리보기/기존 CSS 파일 첨부/하이퍼링크 & 목록 문단 디자인 소스 입력/목록 문단 디자인 소스 입력/more 버튼 디자인 소스 입력/p 컨텐츠 디자인 소스 입력/클래스 관련 소스 입력/미리보기/CSS 레이아웃 구현/플룻과 클리어 속성 , 포지션 속성/디스플레이 속성/드림위버의 CSS 레이아웃 , 템플릿을 이용한 공통 레이아웃 속성/CSS 레이아웃의 개념과 특징/예제 - 이단 칼럼 배치 및 디자인 꾸미기/코드 - 새 선택자 등록/선택 영역 지정 - Div 태그 입력/커서 위치 지정 - 선택자 등록/p 소스 커서 지정 - 선택자 등록/미리보기/코드 창 - 새 선택자 등록/불필요한 div 삭제/div 삽입/두번째 선택영역 지정하고 div 태그 삽입/css 패널에서 새 선택자 등록/css 패널에서 다른 새 선택자 등록/브라우저에서 미리보기/퍼센트 단위로 삼단 칼럼 배치/div 삽입/두번째 선택영역 지정하고 div 태그 삽입/세번째 선택영역 지정하고 div 태그 삽입/네번째 선택영역 지정하고 div 태그 삽입/배경 이미지 지정/배경에 제목 텍스트 위치 조정/등록된 선택자 속성 편집/새로운 선택자 등록/브라우저에서 미리보기
12.57분 CSS 레이아웃 만들기
float속성과 clear속성을 이용한 부유 레이아웃으로 웹페이지를 만들어보는 실습을 진행합니다.

좌우 가로로 배치되는 탭 메뉴/예제 결과 화면 미리보기/선택 영역 지정 - Div 삽입/h1 태그 커서 지정 - CSS 규칙/ul 태그 커서 지정 -CSS 규칙/적용된 디자인 확인/div 소스 삽입/CSS 규칙 설정/적용된 디자인 확인/li 커서 지정 - CSS 규칙/CSS 규칙 2/디자인 수정/li 소스 입력/a 태그 커서 지정 - 선택자 등록/미리보기/규칙 편집 , 미리보기/포지션 속성을 이용한 레이아웃 배치/position , top , bottom , left , right/z-index , visibility , overflow/position을 이용한 레이아웃 종류와 특징/예제 - fixed 포지션을 이용한 레이아웃 배치/선택 영역 지정 - Div 삽입/두번째 선택 영역 지정 - Div 삽입/새 선택자 등록/미리보기/상대 좌표값으로 지정되는 relative 포지션을 이용한 레이아웃 배치/커서 위치 지정 - 새 선택자 등록/li 소스 입력 - 선택자 등록/li 소스 입력 2 - 선택자 등록/li 소스 입력 3 - 선택자 등록/li 소스 입력 4 - 선택자 등록/li 소스 입력 5 - 선택자 등록/폰트 속성 수정/미리보기/잘못된 부분 수정/미리보기 2/디스플레이 속성을 이용한 레이아웃/디스플레이 속성 값/디스플레이 속성 값 2/예제 - 지정된 이미지로의 하이퍼링크 배치/IFS 부분 소스 변경/새 선택자 등록/a 태그 커서 지정 - 선택자 등록/미리보기/디스플레이 속성을 이용한 예제 2/a 태그 커서 지정 - 새 선택자 등록/새 선택자 등록 2/디자인 수정 , 미리보기/디스플레이 속성을 이용한 예제 3/li 태그 커서 지정 - 새 선택자 등록/label 태그 커서 지정 - 새 선택자 등록/미리보기/커서 지정 - 새 선택자 등록/선택자 등록/등록된 클래스 적용/등록된 클래스 적용 2/CSS 패널 - 새 선택자 등록/button 클래스 적용/미리보기
13.55분 CSS 레이아웃을 이용해 문서 만들기
관련선택자등록해서 CSS 레이아웃을 만들어서 패널과 대화상자를 이용해 문서를 만들어보는 작업을 진행합니다.

별도의 css파일에 관련 선택자 소스 입력하고 레이아웃 디자인 변경하기/예제 파일 확인/css 새로운 선택자 등록/패딩값과 마진값 주기/태그 입력/소스 입력/하이퍼링크 디자인/컨테이너와 컨텐트박스 선택자 소스 입력/선택자 소스 입력/푸터 입력/브라우저에서 미리보기/이미지가 삽입된 div태그 삽입후 상단 오른쪽에 고정되게 선택자 등록하기/결과 화면 보기/div에 소스 입력/새로운 선택자 등록/브라우저에서 미리보기/태그 스타일로 글자 서식 바꾸기/h2태그에 새 css규칙 만들기/속성창에서 새 스타일 만들기/p태그에 새 css 규칙 생성/폰트 디자인 변경/폰트 크기 변경/h1 태그에 스타일 지정/브라우저에서 미리보기/내부스타일 외부스타일시트로 저장하기/외부스타일 시트를 문서에 링크하기/기존 css파일 첨부/style.css 확인/브라우저에서 미리보기/클래스 스타일로 특정부분 스타일 바꾸기/새 css 규칙 추가/작업 확인/클래스 스타일 적용/적용된 클래스 스타일 제거/태그 제거/span 태그 입력/ID 스타일과 클래스 스타일 적용/ID스타일 사용하기/결과 확인/스타일 만들기/클리어보스를 이용해 푸터를 하나의 영역으로 합치기/푸터에 새 CSS 규칙 지정/브라우저에서 미리보기/여백 주기/클래스 스타일 적용/태그 선택기에서 클래스 스타일 적용/브라우저에서 미리보기/CSS속성 지정할때 대화상자 살펴보기/확장자/배치/스타일 수정/영역에 테두리 그리기/브라우저에서 미리보기/테두리 높이 일정하게 맞추기/푸터 스타일 수정/속성값을 이용해 푸터 속성 변경하기/콘텐트 속성 변경/마진값 입력/브라우저에서 미리보기/CSS 트렌지션 적용/CSS 전환-새 전환 생성/background-color 지정/끝 값 선택/전환 생성/전환 제거/브라우저에서 미리보기/선택한 전환 편집/브라우저에서 미리보기
14.44분 CSS3 선택자 이용하기
CSS3 선택자를 이용해서 예제를 만들고 선택자의 적용 결과를 확인합니다.

드림위버와 css3 알아보기/css3의 중요속성-접두어/webkit/moz/o/ms/css3의 중요속성-border-radius/css3의 중요속성-box-shadow/X-Offset/Y-Offset/Blur radius/Spread radius/Color/css3의 중요속성-text-shadow/X-Offset/Y-Offset/Blur radius/Color/border-radius 실습/border-radius 지정/크롬에서 미리보기/이미지에 그림자 효과 추가와 응용/새 css 규칙 삽입/box-shadow 설정/그림자 효과 추가/디자인 뷰 보기/css를 이용해서 버튼 만들기/새 css규칙 삽입/myButton 지정/myButton 수정/배경 색 지정/버튼 모서리 둥글게 만들기/텍스트에 그림자 효과 주기/마우스 오버했을때 그림자 생기는 버튼 만들기/새 css 규칙 삽입/box-shadow 속성 지정/작업 확인/탑의 좌표값 조절/브라우저에서 미리보기/css로 텍스트 서식 지정/css 소스 추가/새 css 규칙 삽입/h2 태그 스타일 지정/p 태그 스타일 지정/새 css규칙 삽입/accent 스타일 지정/브라우저에서 미리보기/html 문서 살펴보기/head/title/body/css3의 중요속성-resize/css3의 중요속성-background-size/css3의 중요속성-rgba/css3의 중요속성-transform/css3의 중요속성-transition
15.50분 템플릿을 이용해 문서만들기
템플릿을 이용해서 문서를 제작하고 템플릿 레이아웃을 이용해서 디자인을 편집해보는 작업을 진행합니다.

템플릿 기능에 대해 알아보기/예제를 통해 기능 알아보기/사이트관리/새 사이트 생성/로컬사이트 폴더 변경/html 파일 열기/템플릿으로 저장/템플릿.dwt 파일 확인/웹사이트에 올릴수 있는 html 파일 만들기/에셋창 열기/템플릿 드래그해서 도큐먼트에 넣기/파일 다른이름으로 저장/템플릿.dwt 파일에서 수정하기/새 편집 가능 영역/메뉴 전체선택 후 title 입력/템플릿 파일 업데이트/02.html 파일 보기/01.html 파일 보기/02.html 파일 내용 변경/수정 잠금하기/템플릿 마크업 제거/일치하지 않는 영역 이름/menu 부분 수정/탬플릿-반복 영역/반복되는 메뉴 추가/반복되는 메뉴 삭제/새 편집 가능영역 선택/메뉴 이름 변경/글자 부분 수정/메뉴 부분 css로 이동/글자 간격 조절/cellpad와 cellspace 조절/블럭지정한 부분 변경/패딩값 입력/marquee태그/marquee 태그 예시 보기/marquee 태그 입력/크롬으로 보기/익스플로러로 보기/marquee behavior=slide 입력/크롬으로 보기/익스플로러로 보기/marquee behavior=alternate 입력/익스플로러 미리보기/크롬으로 보기/width 값 입력/bgcolor 입력/font color 입력/작업 확인/width 값 변경/작업 확인/bgcolor 변경/marquee behavior=scroll 입력/작업 확인/marquee scrolldelay로 속도 조절/marquee scrollamount/marquee height/direction 변경
16.55분 CSS3 트랜지션 기능을 이용한 애니메이션만들기(1)
트랜지션기능을 이용해서 롤오버시 튀어나는메뉴를 만들어보고 그 결과를 확인해봅니다.

marquee 태그로 예제 작업/예제 미리보기/새 도큐먼트 만들기/페이지 속성에서 배경색 넣기/표 삽입/코드 입력/글자 입력/저장 후 미리보기/폰트 크기 및 표 수정/저장 후 미리보기/표 삽입/표 안에 이미지 삽입/라인 넣기/이메일 주소 입력/전자 우편 링크 적용/저장 후 미리보기/배운 명령어를 토대로 예제 작업하기/저장 폴더 생성/폴더 안에 파일 정리/html 파일 출력/배경 만들기/표 삽입/표 안에 로고 이미지 삽입/표 삽입/표 안에 이미지 삽입/표 삽입/표 안에 롤오버 이미지 삽입/저장 후 출력/롤오버 이미지 가로로 정렬/보더값 0으로 지정/플래시 파일 삽입/플래시 파일 재생/플래시 파일 크기 조절/이미지 삽입/이메일 불러오기/링크 페이지 제작/표 삽입/배경색 삽입/이미지 삽입/롤오버 이미지 삽입/텍스트 삽입/다른 이름으로 저장/이미지 클릭했을때 해당페이지로 넘어가는 작업하기/이메일 링크걸기/home 부분에 링크걸기/저장 후 작업확인/css 트랜지션 기능을 이용해 애니메이션 만들기/css 디자이너와 css전환 shift+F11/새 전환 생성/전환 설정/다른이름으로 저장/예제 보기/이미지 만들기/이미지 삽입/div와 ul태그로 이미지 묶기/이미지에 하이퍼링크 걸기/li 태그 입력/css 전환 창 열기/대상 규칙 정의/전환 편집/태그 수정/position 속성 입력/저장 후 확인/리스트 형태 수정/list-style 타입 만들기/저장 후 확인/픽셀 값 입력/새로 고침 후 확인/bottom 효과/right 효과/left 효과
17.44분 CSS3 트랜지션 기능을 이용한 애니메이션만들기(2)
트랜지션 기능을 이용해서 베너, 롤오버,롤아웃 메뉴를 만들어보고 그 결과를 확인해봅니다.

애니메이션 제작/예제 보기/div id와 div class 생성/p 태그에 입력/p class 정의/내용 입력/저장 후 확인/타이틀 정하기/스타일 css 입력/디자인 창 보기/새 전환 생성/백그라운드 포지션 속성 설정/저장 후 확인/스타일 css 입력/view에 이미지 저장/모든 브라우저에 호환되도록 설정/컬러와 폰트 입력/width 값 지정/글꼴 입력/확인/중복된 view 부분 지우기/p태그 입력/텍스트 움직이기/트랜지션을 이용한 예제 만들기/새 html 문서 생성/타이틀 입력/바디 부분에 이미지 불러오기/이미지에 div 태그 추가해서 css 스타일 적용하기/새 css 규칙 추가/배경 설정/배치 설정/이미지에 대한 부분 변경/저장 후 확인/트랜지션을 적용해 애니메이션 적용하기/새 전환 생성/선택자 소스 추가/선택자 소스에 새 전환 추가/저장 후 확인/이미지 top값 0픽셀로 조정/회전과 투명도를 이용해 롤오버와 롤아웃이미지 만들기/새 파일 타이틀 정하기/비순차 목록 설정 후 이미지 불러오기/각각에 id와 속성값 지정/투명도 값으로 편집/속성 지정/저장 후 확인/회전에 관한 트랜지션값 적용/새 전환 생성/transform 속성 지정/미리보기/transform에 오퍼시티 값 추가/저장 후 확인/li 태그에 오퍼시티값 적용/미리보기
18.1시간 1분 반응형 웹문서 만들기
미디어쿼리와 유동격자 레이아웃 기능을 이용해서 반응형 웹사이트를 만들어보고 결과를 확인해봅니다.

반응형 웹사이트 만들기/유동 격자 레이아웃으로 문서 만들기/스타일 css 파일로 저장/디자인 부분으로 보기/타이틀 입력 후 문서 저장/저장 된 부분 살펴보기/각각의 소스 추가하기/header에 이미지 삽입/h1 태그에 네비게이션 매뉴 추가/매뉴 항목 추가/div class 태그 추가/이미지 삽입/디자인 부분 보기/섹션 영역에 div 태그 추가/이미지 삽입/div class=gallery 추가/저장 후 디자인 보기/footer 작성/카피라이트 삽입/페이지값 적용/디자인 보기/브라우저에서 확인/페이지 줄이기/해상도에 따라 변경되는 레이아웃 css로 적용하기/pc 화면 적용/코드 보기/utf-8에 각각의 소스 추가/list 항목에 대한 속성 적용/마진과 패딩값 지정/body 부분 만들기/글꼴 지정/백그라운드 컬러 적용/폰트 컬러 지정/폰트 사이즈 지정/header에 적용되는 컬러값 적용/clear에 속성 적용/확인/해상도에 따라 변경되는 레이아웃 만들기/style.css 코드보기/데스크탑 설정/header 부분 적용/width 값 설정/header h1 선택자 소스 추가/header nav 정렬값 지정/header ul 태그 지정/header ul li 태그 지정/a태그가 있을때 따로 지정해 줄수 있는 속성/section 여백값 지정/section .gallery 추가/갤러리 이미지 가져오기/section .gallery ul li span 태그 작성/footer 설정/디자인 보기/타블릿 크기나 모바일 크기 확인/모바일 부분 설정/header 부분 값 조절/마진 값 조절/height 값 지정/width 값 지정/저장 후 디자인보기/코드 추가 수정/디자인 보기/타블렛 부분 설정/저장 후 디자인보기/브라우저 크기 줄여서 확인
19.51분 모바일 웹사이트 만들기(1)
제이쿼리 모바일 위젯을 이용해 페이지를구성하고 테마를 변경해보는 작업을 진행합니다.

드림위버를 이용해 모바일웹사이트 만들기/새 사이트 만들기/모바일 페이지 제작/시작 템플릿/제이쿼리 모바일(CDN)/제이쿼리 모바일(로컬)/테마가 포함된 제이쿼리 모바일(로컬)/새 문서 저장/파일이름 index로 지정/종속 파일 복사 창/생성된 웹 페이지 확인/전체적인 부분에서 보기/추가적으로 페이지 삽입하기/제이쿼리 모바일 메뉴보기/페이지 선택/머리글 수정/하이퍼링크 목록 지정/브라우저 확인/페이지 소스에 대한 구성 보기/footer에 고정되는 네비게이션 바 추가하기/h4 페이지 바닥글 삭제/div 태그 추가/ul 태그 추가/home 설정 후 링크걸기/네비게이션 바 구성/intro 넣기/페이지 2 id값 수정/페이지 2 history 넣기/페이지 4 program 넣기/페이지 5 lecture 넣기/작성된 부분 새로고침 후 살펴보기/저장 뒤 브라우저로 보기/네비게이션이 각 페이지마다 구성되도록 만들기/data-role footer에 속성 지정/디자인 부분 보기/저장 뒤 브라우저로 보기/2 페이지 네비게이션 바 구성/분할 보기/각 페이지 네비게이션 바 구성/디자인 보기/저장 뒤 브라우저로 보기/구성해준 부분에 타이틀 제목 변경하기/타이틀 입력/분할 부분으로 보기/브라우저에서 확인/각 페이지 타이틀 이름 바꾸기/저장 후 브라우저로 보기/버튼 삽입하고 디자인 변경하기/2 페이지 정의/내용에 해당 컨텐츠 삽입/디자인 보기/제이쿼리 모바일 버튼으로 하단에 버튼 삽입하기/제이쿼리 모바일 버튼 생성/관련 프로그램 입력/생성된 모바일 버튼에 테마 변경/버튼 영역 지정/제이쿼리 색상 견본에서 테마 변경/코드 보기/버튼 아이콘 위치/저장 후 브라우저로 보기/home 버튼에 모바일 버튼 삽입/버튼 삽입/각 영역마다 테마 변경하기/저장 후 브라우저로 보기/각 페이지 선택할때마다 나타나도록 설정하기/페이지에 해당하는 메뉴 고정/테마 적용/디자인뷰로 보기/저장 후 브라우저로 보기
20.55분 모바일 웹사이트 만들기(2)
제이쿼리 모바일 위젯을 이용해 페이지를구성하고 테마를 변경해보는 작업을 진행합니다.

완성된 파일에 이미지 파일 삽입/intro 부분에 이미지 삽입/이미지 소스 보기/width값과 height값 삭제/같은 크기 지정을 위해 속성추가/따로 스타일 규칙 지정하기/top의 CSS 규칙정의/저장후 브라우저 확인/다음 페이지와 이전페이지로 이동하는 하이퍼 링크 작업하기/컨텐츠 내용 삽입/이전,다음 버튼 삽입/버튼 대화창 보기/버튼 삽입 설정/버튼 소스에 스타일 추가/버튼 이름 변경/버튼 테마 적용/버튼 아이콘 선택/브라우저에서 확인/버튼 속성에 링크 설정/브라우저에서 확인/제이쿼리 모바일 위젯 구성 보기/목록보기/레이아웃 격자/축소 가능 블록/텍스트/목록보기를 이용해 작업하기/위젯 적용 시키기/페이지 구성/머릿글 변경/컨텐츠 내용 입력/네비게이션 바 이용을 위해 fooer부분 복사 후 삽입/새 페이지 생성/footer 부분 만들기/목록보기 위젯 삽입해 리스트로 구성하기/목록 보기 대화상자/목록보기 설정/저장후 브라우저에서 확인/스타일 추가해 속성 지정/저장후 브라우저에서 확인/각 페이지로 이동할수있는 부분 만들기/기본값 말풍선에 GO 입력/페이지값 입력/저장후 브라우저에서 확인/완성된 리스트뷰 목록 테마 변경/저장후 브라우저에서 확인/축소 확장 메뉴를 이용해 블록 위젯 삽입하기/축소 가능 블록 삽입/목록 해당부분 만들기/해당 내용 입력/저장 후 브라우저에서 확인/레이아웃 격자를 이용해 블록안의 컨텐츠 재배치 하기/레이아웃 격자 삽입/텍스트 삽입/타이틀 다르게 표현하기/행 부분 정렬/저장후 브라우저에서 확인/검색 적용/전자우편 적용/토글 스위치 뒤집기 적용/슬라이더 적용/제이쿼리 모바일 홈페이지를 앱으로 변환하기/phonegap build 서비스

강의목록 다운로드 1:1 강의 질문&답변