HOME>디지털 실무>HTML CSS | 반응형홈페이지>웹표준 [입문 + 고급]
ONLINE CLASS

웹표준 [입문 + 고급]

?

수강 전 꼭 확인하세요

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

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

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

◆
기업이 선택한 신뢰 강의

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

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

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

자세히 보기  >
REAL REVIEW

수강생 리얼후기!

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

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

웹표준 [입문 + 고급] 웹표준 [입문 + 고급]

  • 웹표준 [입문 + 고급]

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

수강 전 꼭 확인하세요

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

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

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

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

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

자세히 보기 >
  • 웹표준 [입문]
  • 01.27분 웹표준 스킬의 폭풍성장을 위한 필수과정! 1
    웹문서 및 소스 관련 팁
    웹문서 개념/body 태그 적용/주석처리 방법/img 태그/소스 분석
  • 02.27분 웹표준 스킬의 폭풍성장을 위한 필수과정! 2
    마우스 오버 및 내부 외부
    select/input, textarea/style/line-height/display:none/내부여백, 외부여백
  • 03.30분 웹표준 스킬의 폭풍성장을 위한 필수과정! 3
    박스구현, 넓이값 계산방법, 상속관계 차별화
    제목 타이틀/color, font-size, line-height/span태그와 p태그/font-weight/넓이값 계산방법/a링크/line-height/letter-spacing/text-align
  • 04.25분 웹표준 스킬의 폭풍성장을 위한 필수과정! 4
    가운데 및 위아래, 상대 및 절대 포지션
    div 가운데 정의/padding/position(절대위치, 상대위치)/z-index/br 태그/table/border-collapse, border-spacing/td 태그
  • 05.21분 웹표준 스킬의 폭풍성장을 위한 필수과정! 5
    떠있는 요소및 상속관계
    ul, ol, dd, dt/li 목록/계층구조 분석
  • 웹표준 [고급]
  • 06.43분 스킬 향상을 위한 Finishing up! 메뉴 총정리 1
    종류별 메뉴 세팅
    종류별 메뉴 셋팅/기본 메뉴/li 목록 메뉴/div 목록 메뉴/세로 메뉴 실습/가로 메뉴 실습
  • 07.34분 스킬 향상을 위한 Finishing up! 메뉴 총정리 2
    float:left, position, white-space
    float:left/width/text-decoration/css 정의/마우스오버/text-align:center/width/.alzio 23/a .topright /.alzio 23 a:hover/topleft/toprigh
  • 08.35분 스킬 향상을 위한 Finishing up! 메뉴 총정리 3
    컬러별 메뉴
    border-right/border-right/left, top/상속관계 설명/컬러별 메뉴 생성/width, height, text-align/.alzio 25 a:hover/.alzio 26/float:left, line-height/display:block, padding//cursor:default//body
  • 09.49분 웹표준의 정석! 제대로 배우자 1
    난이도 있는 레이아웃 만들기
    레이아웃/3단 레이아웃/css코딩/박스 정렬/.alzio31-gap/overflow:hidden/레이아웃 나누기/테이블 추가/background-color/footer/배너식 활용/box-shadow/31%로 정의한 이유
  • 10.46분 웹표준의 정석! 제대로 배우자 2
    레이아웃 전체적인 구성
    기본적인 레이아웃/box-sizing/오른쪽 내용 생성/line-height/form기본사항/line-height/font-weight/box-sizing/text-indent/em 태그/list-style/text-align; left
  • 11.37분 웹표준의 정석! 제대로 배우자 3
    값들의 정의
    넓이값/함축해서 표현하기1/max-width/float/display: inline-block/p:last-child/input[type=text]/input:out-of-range/p:nth-last-of-type(1)/q:lang/:not(p)/:target
  • 12.40분 웹표준의 정석! 제대로 배우자 4
    응용 예제
    target 관리, 표현/[title~=alzio]/input[type=text]/border-radius값/반지름 넓이 높이/배경/외부 여백 margin/right bottom/컬러값 적용/방향/circle/text-shadow/box-shadow
  • 13.36분 웹표준의 정석! 제대로 배우자 5
    웹폰트, 3D
    기본적인box/clip/break-word/구글 웹 폰트 사용 방법/박스 모델 만들기/transform/원근법, 회전, 각도/hidden, visible/width 2s/transition-timing-function/근본 원리 transition
  • 14.32분 웹표준의 정석! 제대로 배우자 6
    애니메이션
    애니메이션/from, to/keyframe 움직이는 방법/position: relative/역방향 애니메이션/ease/column-count/최적의 넓이값 정의/offset/display: flex/row-reverse/space-around
  • 15.54분 웹표준의 정석! 제대로 배우자 7
    반응형웹 단계별 적용
    반응형 웹/media 쿼리/media screen 정의/min-width/비슷한 내용 하나로 묶기/해상도width 값/문제점/반응형 웹 실습/width,float,padding/background-image/video/max-width
  • 16.35분 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 1
    참고, 잘못된 사례
    홈페이지 제작/참고 사항/table/display: block/메뉴 추가/a2_on의 값 넣기/잘못된 사례/new 버튼 추가/a link 속성/link 값 정의/line-height값이 같은 이유/new 버튼 만들기
  • 17.40분 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 2
    본문, 로그인, 위치 수정
    글자 숨기기, 배경 이미지 넣기/경로 지정/한 개의 여백만 밀기/hover 사용시 문제점/메뉴 만들기/padding-bottom/우측 메뉴 상속 관계/로그인 창 만들기/login/border-color/패스워드와 아이디
  • 18.44분 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 3
    회원가입, 로그아웃
    ul목록 정의/문제점/로그인 배경/여백 없이 하는 방법/로그아웃 버튼 만들기/text-align:center/파일 연동하기/top 태그 코딩/font-weight:bold/width,, solid/contentBox/특정 태그
  • 19.36분 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 4
    Main 페이지 코딩마무리
    Main/color, font/margin-bottom/margin/구분선 만들기/margin, color, font-size/main_ju/a:hover, background/border/h5/righ
  • 20.35분 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 5
    우 메뉴, 퍼센트 제작
    우측 메뉴 세팅/h3/newlist li/ul목록/하단 리스트 추가/li .memo/문제점/footmenuA img/a:hover, text-decoration/W3C css/파일명 교체/clear: both, width/width, position
  • 홈페이지 제작 [특강]
  • 21.36분 레이아웃의 기본이해1
    html5 레이아웃, 종류별 메뉴
    레이아웃 설정/font-family 설정/outline: none/list-style: none/nav/position: relative/overflow: hidden/메뉴 사이 구분선 생성/아이콘 위치 변경하기/nav .main_newimg/실습메뉴2
  • 22.37분 레이아웃의 기본이해2
    아무도 알려주지 않은 버그해결, 또다른 하단 메뉴
    display: inline/display: inline-block/가운데로 메뉴 정의/text-align: center/검색바 추가/float: right/input 설정/article 정의/footer 정의/ul 목록 정의/메뉴 사이 구분선 생성/copyright

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