HOME>디지털 실무>HTML CSS | 반응형홈페이지>HTML5 CSS3 실무
ONLINE CLASS

HTML5 CSS3 실무

?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?
A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

◆
기업이 선택한 신뢰 강의

검증된 커리큘럼과 전문 강사진으로 높은 만족도를 제공합니다.

자세히 보기  >
♥
수강료 일부는 사회환원에 사용됩니다.

작은 나눔이 더 나은 내일을 만듭니다.

자세히 보기  >
REAL REVIEW

수강생 리얼후기!

실제 수강생의 학습 경험을 확인해 보세요.

수강후기를 불러오는 중입니다.

HTML5 CSS3 실무 HTML5 CSS3 실무

  • HTML5 CSS3 실무

  • 강의구성
  • (17강) 전체 : 11시간 57분|평균 : 42분10초
  • 이용기간/강사
  • 2개월
    알지오 R&D [IT]
  • 증빙가능
  • 수료증, 수강증, 학습진도
  • 수강료
  • 370,000원할인185,000원
  • 알지오 패키지
    • "5개월" 혜택!
?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q 초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?
A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

수강료 일부는 사회환원에 사용됩니다.

작은 나눔이 더 나은 내일을 만듭니다.

자세히 보기 >
  • 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 버튼과 효과 실습, 효율성 있는 웹페이지 제작

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