HTML5 CSS3 실무

강좌구성
(17강) 전체 : 11시간 57분|평균 : 42분10초

수강기간
2개월

전문강사
알지오 R&D [IT]

HTML5 CSS3 실무 인강 평생교육원 교육 안내
HTML5 CSS3 실무 강의는, 앞서서 HTML 과 CSS3 강의를 통해 실제 웹페이지 제작을 하기위한 실제 작업을 강의합니다. 특히 HTML5 의 엘리먼트 기능 들과 CSS3의 가상요소 를 활용하는 방법까지 진행하며 일반적인 학습용이 아니라 메뉴나 레이아웃의 구성요소 까지 완벽하게 케이스 별로 학습하실수 있습니다.

단기 습득!

2년 연속 IT교육 인강부분 1위 알지오 (근거자료)

2003년부터 운영해온 수많은 데이터베이스를 기반으로

단기 습득할 강의

로 제공합니다!
늦지 않았습니다. 알지오에서 지금부터 시작하세요!

HTML5 CSS3
01.44분 HTML5 기초 엘리먼트 를 알아봅니다.
HTML5 형식의 엘리먼트들의 스타일시트 특성과 간단한 웹페이지 레이아웃

책갈피[00:07] 초기설정/[05:07] section/[09:46] canvas/[17:06] rgba/[21:34] grad/[26:11] 수치 확인/[30:27] element 정의/[34:18] font-family/[40:04] 검사
02.51분 HTML5 CSS3 가상요소 적용실습
HTML5 방식의 레이아웃과 CSS3의 적용으로 인한 가상요소를 학습합니다.

책갈피[00:00] label/[06:24] 주석 처리/[10:48] nav ul/[15:17] 블러 효과 설정/[20:27] title h1/[26:16] border-radius값 설정/[30:57] 들여쓰기 설정/[36:47] margin:auto/[41:49] 주석처리 복구/[46:14] border-top
03.53분 HTML5 CSS3 기본 요소와 엘리먼트
CSS3 속성 과 차이점, HTML5에서 가능한 요소들을 총정리합니다.

책갈피[00:02] div 개체/[04:36] display/[09:54] 시간/속도 변경/[15:25] 정렬값/[20:15] 표가 비집고 나온 문제/[25:15] 정렬 확인/[30:52] 그림자 설정/[36:33] 이미지와 텍스트 확인/[41:45] article/[45:57] 밑줄 사라짐
실제 웹페이지 제작
04.39분 CSS3 의 상속관계 를 명확히 알기위한 실습
실제 페이지 두가지 유형으로 그동안 배운 내용을 적용합니다.

책갈피[00:21] css 파일 확인/[05:01] 홈페이지 확인(1)/[10:48] css의 유무 차이/[16:11] 섹션 체크/[21:08] 홈페이지 확인(2)/[26:52] 배경 투명/[31:54] 홈페이지 확인(3)/[37:27] footer 확인
05.48분 CSS3 의 상속관계 와 상속관계 에 대한 실습
여러페이지 를 작업 할수있게 실무능력 을 알려 드립니다.

책갈피[00:07] 메뉴의 하부 트리/[05:40] article h3/[10:37] margin 확인/[15:40] 적용오류 확인/[20:41] display 설정값/[25:22] 상대위치/[30:09] 폼 위치 변경/[36:01] 들여쓰기/[40:34] 공유하기 기능/[44:51] aside 설정
06.44분 CSS3 의 가상요소 와 요소별 실습
폼의 기본 속성, 실제 INDEX 메인화면 처럼 꾸미기

책갈피[00:11] 폼 정의/[05:13] 헤더 확인/[10:08] 대문자 적용 확인/[15:31] 메뉴와 폼 위치/[20:23] ;(세미콜론) 오류/[25:33] 텍스트 색상 변경/[31:21] 변경된 내용 확인/[35:32] before/[40:58] uppercase 확인
07.44분 가상 요소와 CSS3 만 가능한 영역의 실습
3가지 패턴의 웹페이지 를 실습합니다.

책갈피[00:12] css 파일 열기/[05:34] 링크 여백 확인/[11:09] article header/[16:12] first-child/[20:38] 예제 확인/[25:14] hr 정의/[30:44] footer 확인/[35:50] h1 색상과 그림자/[39:59] 마우스오버 시 바뀐 내용/[42:37] 결과 확인
08.43분 실제 메인화면 과 동일한 페이지 를 각각 추가실습
3가지 패턴의 웹페이지 를 실습합니다.

책갈피[00:00] css 정의/[05:52] display:inline 출력/[10:01] 여백 확인/[15:48] opacity 설정/[20:10] .sect_min 확인/[26:10] text-transform/[30:48] 각각의 색상 변경/[35:35] 마우스 오버시의 효과/[40:09] transition 정리
09.39분 외부폰트, transition 과 transform 의 모든것
클라우드 에서 직접사용, 에니메이션 의 효과 화 CSS3 의 모든것

책갈피[00:00] 마우스에 따라 반응하는 애니메이션/[05:22] 마우스 오버 후의 디자인 설정(1)/[10:50] 색상 지정시 유의사항/[15:15] 마우스 오버 후의 디자인 설정(2)/[20:24] 여백 확인/[25:26] 글꼴 설정/[30:46] 글자 위치 변경/[35:38] 새로고침 후 마우스오버 확인
아무도 알려주지 않는 내용
10.39분 프레임셋, 레이아웃, 문의폼
일반적인 레이아웃, 숨김메뉴 만들고 애니메이션 스타일, 방대한 문의폼 설문

책갈피[00:00] frameset/[05:37] frameset 적용된 내용 확인/[10:33] nav 내용 확인/[15:11] 결과 확인/[20:22] 새로고침 후 변경된 내용/[25:19] 폼 속성/[30:51] label 설정/[35:43] 반영 후 변경
11.37분 실제 사용해도 좋은 본문 페이지
CSS3 효과 폼 테이블 요소별 효과 가상요소 및 홀수 짝수 셀과 타겟 제목 셀

책갈피[00:00] 폼 활용/[05:06] input과 select/[10:24] latter-spacing/[15:26] 특정 font-style 변경/[20:43] 글자색 및 음영색 변경/[26:17] th 조건 확인/[31:11] 색상 변경/[35:00] text-shadow 추가 정의
12.44분 종류별 버튼 웹페이지 제작과 배너 3D 열기
CSS3 활용한 특이한 버튼, 기본 웹페이지 텍스트 쉐도우 종류별 실습 회전문 처럼 열리는 것

책갈피[00:06] 박스 모델 만들기/[05:14] 그림자 효과/[10:26] 텍스트쉐도우/[13:12] 예제 확인(1)/[19:45] 예제 확인(2)/[25:27] stroke을 사용한 글자/[30:18] 새로운 효과 적용/[34:41] 떠있는 듯한 글자 표현/[39:41] 마우스 오버 시 효과변경/[43:49] 2번예제 적용내용 확인
13.34분 버튼과 텍스트 애니메이션 Part 1
Transition과 Transform을 이용하여 로딩되거나 마우스 오버 되면서 반응하는 효과

책갈피[00:00] shake/[05:18] 시간 바꾸기/[10:10] id값과 class값/[15:49] 소스 확인/[20:56] delay_demo/[25:11] 글자에 들어가는 소스들/[30:14] margin값
14.32분 버튼과 텍스트 애니메이션 Part 2
Transition과 Transform을 이용하여 로딩되거나 마우스 오버 되면서 반응하는 효과

책갈피[00:00] 마우스 오버 시 애니메이션/[05:07] button에 대한 정의/[10:35] 마우스를 가져다대면 흐려지는 이미지/[15:16] 3d로 변환할 수 있도록 정의/[20:20] 비율 제거 후 새로고침/[25:47] 선택된 면 확인/[30:20] 새로고침 후 변경된 내용 확인
15.41분 버튼과 텍스트 애니메이션 Part 3
Transition과 Transform을 이용하여 로딩되거나 마우스 오버 되면서 반응, 롤링되는 이미지 배너

책갈피[00:30] 신호등/[05:05] 가상 요소/[10:41] 수치 변경 후 새로고침/[15:50] 기본적인 사항들 확인/[20:03] 예시 확인/[24:48] 애니메이션 조건/[30:37] 반영된 내용 확인/[35:28] content로 시작하는 내용들/[40:19] 정의된 내용 확인
16.43분 버튼과 텍스트 애니메이션 Part 4
종류별 입체적인 3D 버튼과 효과 실습

책갈피[00:00] 메뉴를 누를 때 나오는 이미지/[05:15] 변경된 내용 확인/[10:11] notTarget index/[15:02] 작성된 html문서 확인/[20:35] top과 left 삭제 후 새로고침/[26:19] 버튼 오버 시 내용 확인/[30:09] 정의된 내용 확인/[35:43] 신규 예제 확인/[40:16] box-shadow 수치
17.42분 버튼과 애니메이션 Part 5 & 웹페이지 구조안내
종류별 입체적인 3D 버튼과 효과 실습, 효율성 있는 웹페이지 제작

강의목록 다운로드

Since 2003 IT전문교육!

HTML 기초 CSS3 + 부트스트랩

HTML 기초 CSS3 + 부트스트랩 인강 평생교육원 교육 안내 HTML 태그기초 와 CSS3 부터 시작하는 분들이 완료후 부트스트랩 까지 이용하실수 있는 학습입니다. HTML 태그, CSS3 의 편집기 인 드림위버나 기타 다른 편집 프로그램에 적응되어 있는 분들이라면 이 내용을 간과하기 쉽습니다. 하지만 HTML 태그 CSS3 코딩을 하기 위해서는, 기본적으로 이 내용은 반드시 HTML 태그 부터 CSS3 와 부트스트랩 까지 학습하실 것을 권장합니다.

학습기간 : 2개월/강의수 : 25강/진행시간 : 10시간 57분/수강료 : ~~370,000원~~ 185,000원