IT전문가

멀티미디어

Apple

오피스 / 자격증

HOME>IT전문가>HTML CSS | 반응형홈페이지>HTML5 CSS3 실무

알지오 패키지

HTML5 CSS3 실무

HTML5 CSS3 실무
17회차 속성과정
전체 : 11시간 57분|회차당 평균 : 42분10초

이용기간 2개월

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

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



알지오 패키지