- 강의구성
- (17강) 전체 : 11시간 57분|평균 : 42분10초
- 이용기간 / 강사
- 2개월 / 알지오 R&D [IT]
- 수강료
- 370,000원
- 185,000원
수강 전 자주 묻는 질문
교재 없이? 초보자도 가능 한가요?
교재 없이도 동영상과 실습 자료만으로 학습할 수 있으며, 초보자도 이해하고 따라올 수 있도록 설계된 강의입니다.
알지오의 강의특징은 무엇인가요?
알지오 강의는 단순 촬영본이 아니라, 전문 편집으로 핵심만 담아 학습 효율을 높인 강의입니다.
프로그램은 어떻게 구하나요?
알지오 는 원격평생교육원 으로, 프로그램에 대한 정보는 알수 없습니다.
수강생 여러분께 감사드리며, 납부하신 수강료 일부는 매월 사회 환원 활동에 사용됩니다. 특히 소외된 이웃들에게 라면을 기부하며 작은 나눔을 이어가고 있습니다. 자세한 내용은 아래 링크에서 확인하실 수 있습니다. 알지오 사회환원 활동
- HTML5 CSS3
-
01.44분
HTML5 기초 엘리먼트 를 알아봅니다.
HTML5 형식의 엘리먼트들의 스타일시트 특성과 간단한 웹페이지 레이아웃
초기설정/section/canvas/rgba/grad/수치 확인/element 정의/font-family/검사
-
02.51분
HTML5 CSS3 가상요소 적용실습
HTML5 방식의 레이아웃과 CSS3의 적용으로 인한 가상요소를 학습합니다.
label/주석 처리/nav ul/블러 효과 설정/title h1/border-radius값 설정/들여쓰기 설정/margin:auto/주석처리 복구/border-top
-
03.53분
HTML5 CSS3 기본 요소와 엘리먼트
CSS3 속성 과 차이점, HTML5에서 가능한 요소들을 총정리합니다.
div 개체/display/시간/속도 변경/정렬값/표가 비집고 나온 문제/정렬 확인/그림자 설정/이미지와 텍스트 확인/article/밑줄 사라짐
- 실제 웹페이지 제작
-
04.39분
CSS3 의 상속관계 를 명확히 알기위한 실습
실제 페이지 두가지 유형으로 그동안 배운 내용을 적용합니다.
css 파일 확인/홈페이지 확인(1)/css의 유무 차이/섹션 체크/홈페이지 확인(2)/배경 투명/홈페이지 확인(3)/footer 확인
-
05.48분
CSS3 의 상속관계 와 상속관계 에 대한 실습
여러페이지 를 작업 할수있게 실무능력 을 알려 드립니다.
메뉴의 하부 트리/article h3/margin 확인/적용오류 확인/display 설정값/상대위치/폼 위치 변경/들여쓰기/공유하기 기능/aside 설정
-
06.44분
CSS3 의 가상요소 와 요소별 실습
폼의 기본 속성, 실제 INDEX 메인화면 처럼 꾸미기
폼 정의/헤더 확인/대문자 적용 확인/메뉴와 폼 위치/;(세미콜론) 오류/텍스트 색상 변경/변경된 내용 확인/before/uppercase 확인
-
07.44분
가상 요소와 CSS3 만 가능한 영역의 실습
3가지 패턴의 웹페이지 를 실습합니다.
css 파일 열기/링크 여백 확인/article header/first-child/예제 확인/hr 정의/footer 확인/h1 색상과 그림자/마우스오버 시 바뀐 내용/결과 확인
-
08.43분
실제 메인화면 과 동일한 페이지 를 각각 추가실습
3가지 패턴의 웹페이지 를 실습합니다.
css 정의/display:inline 출력/여백 확인/opacity 설정/.sect_min 확인/text-transform/각각의 색상 변경/마우스 오버시의 효과/transition 정리
-
09.39분
외부폰트, transition 과 transform 의 모든것
클라우드 에서 직접사용, 에니메이션 의 효과 화 CSS3 의 모든것
마우스에 따라 반응하는 애니메이션/마우스 오버 후의 디자인 설정(1)/색상 지정시 유의사항/마우스 오버 후의 디자인 설정(2)/여백 확인/글꼴 설정/글자 위치 변경/새로고침 후 마우스오버 확인
- 아무도 알려주지 않는 내용
-
10.39분
프레임셋, 레이아웃, 문의폼
일반적인 레이아웃, 숨김메뉴 만들고 애니메이션 스타일, 방대한 문의폼 설문
frameset/frameset 적용된 내용 확인/nav 내용 확인/결과 확인/새로고침 후 변경된 내용/폼 속성/label 설정/반영 후 변경
-
11.37분
실제 사용해도 좋은 본문 페이지
CSS3 효과 폼 테이블 요소별 효과 가상요소 및 홀수 짝수 셀과 타겟 제목 셀
폼 활용/input과 select/latter-spacing/특정 font-style 변경/글자색 및 음영색 변경/th 조건 확인/색상 변경/text-shadow 추가 정의
-
12.44분
종류별 버튼 웹페이지 제작과 배너 3D 열기
CSS3 활용한 특이한 버튼, 기본 웹페이지 텍스트 쉐도우 종류별 실습 회전문 처럼 열리는 것
박스 모델 만들기/그림자 효과/텍스트쉐도우/예제 확인(1)/예제 확인(2)/stroke을 사용한 글자/새로운 효과 적용/떠있는 듯한 글자 표현/마우스 오버 시 효과변경/2번예제 적용내용 확인
-
13.34분
버튼과 텍스트 애니메이션 Part 1
Transition과 Transform을 이용하여 로딩되거나 마우스 오버 되면서 반응하는 효과
shake/시간 바꾸기/id값과 class값/소스 확인/delay_demo/글자에 들어가는 소스들/margin값
-
14.32분
버튼과 텍스트 애니메이션 Part 2
Transition과 Transform을 이용하여 로딩되거나 마우스 오버 되면서 반응하는 효과
마우스 오버 시 애니메이션/button에 대한 정의/마우스를 가져다대면 흐려지는 이미지/3d로 변환할 수 있도록 정의/비율 제거 후 새로고침/선택된 면 확인/새로고침 후 변경된 내용 확인
-
15.41분
버튼과 텍스트 애니메이션 Part 3
Transition과 Transform을 이용하여 로딩되거나 마우스 오버 되면서 반응, 롤링되는 이미지 배너
신호등/가상 요소/수치 변경 후 새로고침/기본적인 사항들 확인/예시 확인/애니메이션 조건/반영된 내용 확인/content로 시작하는 내용들/정의된 내용 확인
-
16.43분
버튼과 텍스트 애니메이션 Part 4
종류별 입체적인 3D 버튼과 효과 실습
메뉴를 누를 때 나오는 이미지/변경된 내용 확인/notTarget index/작성된 html문서 확인/top과 left 삭제 후 새로고침/버튼 오버 시 내용 확인/정의된 내용 확인/신규 예제 확인/box-shadow 수치
-
17.42분
버튼과 애니메이션 Part 5 & 웹페이지 구조안내
종류별 입체적인 3D 버튼과 효과 실습, 효율성 있는 웹페이지 제작
