웹표준 [입문 + 고급] 강의 기초 부터 실무 인강 알지오 평생교육원 추천강의

기초부터 차근차근 실무까지.
마지막 학습 보장!

웹표준 [입문 + 고급]

강의구성
(22강) 전체 : 13시간 19분|평균 : 36분19초

이용기간 / 강사
2개월 / 알지오 R&D [IT]

증빙가능
수료증, 수강증, 학습진도

수강료
330,000원
165,000원

"5개월" 혜택!

수강 전 자주 묻는 질문

교재 없이? 초보자도 가능 한가요?

본 강의는 교재 없이도 동영상 강의만을 통해 충분히 학습할 수 있도록 구성되어 있습니다. 제공되는 실습 자료를 활용해 따라 하면서 학습하시면, 초보자도 이해하고 따라올 수 있게 설계된 강의입니다.

알지오의 강의특징은 무엇인가요?

저희 강의는 단순한 전문가 촬영본을 넘어섭니다. 전문 편집을 통해 필수 내용만을 선별하고, 불필요한 부분을 제거함으로써 학습 효율을 극대화합니다.

프로그램은 어떻게 구하나요?

알지오 는 원격평생교육원 으로, 프로그램에 대한 정보는 알수 없습니다.

웹표준 인강 평생교육원 교육 안내
웹개발을 시작하는 분들이 반드시 이용해야 하며 전문가적 형태로 강의구성이 진행되고 있어 단계에 따라 체계적으로 학습할 수 있습니다. 입문자뿐만 아니라 전문가에게도 도움이 되는 내용입니다.

단기 습득!

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

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

단기 습득할 강의

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

웹표준 [입문]
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 강의 질문&답변