- 강의구성
- (19강) 전체 : 10시간 19분|평균 : 32분34초
- 이용기간 / 강사
- 2개월 / 알지오 R&D [IT]
- 수강료
- 330,000원
- 165,000원
수강 전 자주 묻는 질문
교재 없이? 초보자도 가능 한가요?
교재 없이도 동영상과 실습 자료만으로 학습할 수 있으며, 초보자도 이해하고 따라올 수 있도록 설계된 강의입니다.
알지오의 강의특징은 무엇인가요?
알지오 강의는 단순 촬영본이 아니라, 전문 편집으로 핵심만 담아 학습 효율을 높인 강의입니다.
프로그램은 어떻게 구하나요?
알지오 는 원격평생교육원 으로, 프로그램에 대한 정보는 알수 없습니다.
수강생 여러분께 감사드리며, 납부하신 수강료 일부는 매월 사회 환원 활동에 사용됩니다. 특히 소외된 이웃들에게 라면을 기부하며 작은 나눔을 이어가고 있습니다. 자세한 내용은 아래 링크에서 확인하실 수 있습니다. 알지오 사회환원 활동
-
01.30분
로컬과 리모트 실시간 작업
웹문서 개념, 호스트 도메인, 내 pc에서 작업한 내용을 바로 도메인에서 확인
드림위버 환경 설정/사이트 정의/새 문서 생성/편집기로 보기/호스트 도메인 설정/PC와 웹 호스팅 동기화/루트 폴더 변경/웹 호스팅에 업로드/인코딩/인코딩 옵션 설정
-
02.35분
웹사이트 제작
CSS Designer 활용 및 하드코딩 동시에 사용해서 기존내용의 수정방법
템플릿 이용하여 새문서 만들기/속성창/viewport/margin-left:auto/css 속성/CSS Designer/폰트 변경/디자인 모드에서 css 변경
-
03.35분
웹사이트 제작 2 + 모바일 ~ PC까지 반응형웹
인서트 를 사용한 엘리먼트 추가후 CSS의 클래스 출력 원하는 위치에 DIV 넣기
엘리먼트 추가/id, class/css 추가/css 상속관계/position:relative/F10 소스보기/id/Media Query 추가/반응형 웹
-
04.30분
웹사이트 제작 3 + 모바일 ~ PC까지 반응형웹
반응형 웹 전반적인 내용 @media 사이즈 별 각각 수정방법
반응형 웹 반영영역/메뉴 기본 개념/메뉴 Media Query/모바일 때 Media Query/PC일 때 css/width:16%
-
05.34분
웹사이트 제작 4 + 모바일 ~ PC까지 반응형웹
에니메이션, 이미지맵, @media 사이즈 별 각각 수정방법
모바일일 때 스타일 수정/태블릿일 때 스타일 수정/애니메이션 효과/li 태그에 id 및 스타일 설정/color 설정/이미지 삽입/이미지맵/이미지맵 결과 확인
-
06.28분
웹사이트 제작 5 + 모바일 ~ PC까지 반응형웹
실제 사용되는 내용을 위주의 종류별 실습진행
이미지 링크 target 및 title 정의/이미지 위치 수정/공백 삽입/클래스 삽입하는 방법1/클래스 삽입하는 방법2/수직, 수평 정렬/Wrap tag/section
-
07.32분
웹사이트 제작 6 + 모바일 ~ PC까지 반응형웹
실제 사용되는 내용을 위주의 종류별 실습진행
article/text-transform:uppercase/line-height/.left_article/Go to Code/.right_article/반응형 웹/@media 사이즈 별 스타일/모바일 환경일 때 스타일 정의/margin-bottom
-
08.32분
웹사이트 제작 7 + 모바일 ~ PC까지 반응형웹
실제 사용되는 내용을 위주의 종류별 실습진행
display:inline-block/p태그 스타일/border-radius/이미지 가운데 정렬/p태그 스타일 상속관계/text-align/@media 사이즈 별 스타일 수정/페이지 하단 요소 확인/left column 스타일 확인
-
09.28분
웹사이트 제작 8 + 모바일 ~ PC까지 반응형웹
실제 사용되는 내용을 위주의 종류별 실습진행
right column 스타일 확인/@media 사이즈 별 스타일 수정/모바일일 때 배경색 수정/clear:both/social_icon 스타일 확인/opacity/footer/overflow:auto
-
10.35분
웹사이트 제작 9 + 모바일 ~ PC까지 반응형웹
실제 사용되는 내용을 위주의 종류별 실습진행
copyright css/모바일일 때 copyright css/color, font-size 추가/copy/주석/링크 제거/title에 color 적용/padding/margin/애니메이션 적용/hover/display:none/position:absolute
-
11.31분
반응형웹 완료
하드코딩 사용한 실제 사용되는 웹사이트 제작
Window Sizes 패널/device-width/Preview In Browser/Add Browser/새로고침 패널/CC Libraries 패널/로컬에서 html 열기/웹페이지 제작/서버에 업로드하기/Insert Header/New CSS Rule/font-weight
-
12.39분
웹사이트 제작
heard, h1 로고, body
Show Set/Layout 설정/image 삽입/업로드 확인/border, background/Selectors/padding/css 순서 변경/user stylesheet/css 요소 추가/h1 width, height 설정
-
13.32분
웹사이트 제작 2
목록(UL)추가, 일반적인 CSS선언, 원하는 위치에 NEW이미지
메뉴 출력방법/ul, li/css 추가/position: absolute/엘리먼트에 css 적용/ol/float:left/li 안에 링크 삽입/링크 밑줄 제거/수직, 수평 정렬/링크 색상 적용/메뉴에 이미지 추가/position 존속
-
14.34분
웹사이트 제작 3
테이블, SECTION, ARTICLE
table 생성/div 생성/border-spacing/로고 옆에 table 위치시키기/margin 이용하여 위치 변경/section 삽입/section을 2단으로 분리/article 사이즈 정의/배경색 지정/Aside 삽입/aside css 정의/insert div
-
15.31분
웹사이트 제작 4
메인3단계, 종류별 DIV박스 실습, video
3단 section 만들기/.righta/.righta css 수정/background, width, height 설정/margin/text color 변경/여러 줄일 때 수직 정렬/footer 생성/clear:both/Meta/HTML5 Video 삽입
-
16.30분
웹사이트 제작 5
메인에 유튜브영상 삽입, SWF추가, 롤오버이미지, 일그러지지 않는 레이아웃
유투브 영상 삽입/Flash SWF 삽입/Flash SWF/Rollover Image/Rollover Image 속성/iframe/position:relative/Rollover Image css 설정/마우스 오버 시 이미지 변경/onLoad/iframe이란?/Character
- 비헤이비어 집중학습
-
17.34분
팝업 및 에니메이션 기능
자바스크립트와 제이쿼리의 선언부분 설명
Behaviors/창 닫기 스크립트 생성/onMouseOver/imageMap/Attach Existing CSS File/팝업의 부모 창 생성/Open Browser Window/팝업 이름/Change Property/div에서 Change Property/엘리먼트 대소문자 구분/Change Property의 속성 변경/팝업 위치 설정/Effects/jquery의 필요성
-
18.31분
에니메이션 기능 2
자바스크립트와 제이쿼리의 선언부분 설명
다른 요소 hide 시키기/text, image hide 시키기/show, toggle/Blind Direction 종류/class와 id의 차이/toggle/Bounce/Distance, Time/Clip, Drop, Fade/패널 재설정/Fold/Highlight/Puff, Pulsate/Scale/Shake, Slide
-
19.38분
비헤이비어, 레이아웃 보너스
비헤이비어 마무리, 레이아웃 문제될수 있는 요소 를 학습합니다.
Go To URL/Jump Menu, Jump Menu Go, Popup Message/Preload Images/Set Text/Show-Hide Elements/Swap Image/jquery 선언부 제거시 문제/css 생성/문서 속성 수정/레이아웃 정의/css 정의/header, main, footer css 정의/레이아웃이 깨질 수 있는 요소/main left-a css 정의/footer의 레이아웃 문제 발생 요소/clear:both
![포토샵 cc [입문+고급]](/img_file/builder/Date/201902126921PhotoshopCC.png "포토샵 cc [입문+고급]")
![일러스트 cc [입문+고급]](/img_file/builder/Date/201902123451IllustratorCC.png "일러스트 cc [입문+고급]")
![드림위버 cc 2017 [기초+실무]](/img_file/builder/Date/201902129860Dreamweaver_CC_2017.png)
![드림위버 cc 2017 [기초+실무]](/expert/img/skin_sample_play_PM_05.png)