웹표준 [입문 + 고급]

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

수강기간
2개월

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

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

웹표준 [입문]
01.27분 웹표준 스킬의 폭풍성장을 위한 필수과정! 1
웹문서 및 소스 관련 팁

책갈피[00:00] 웹문서 개념/[02:26] body 태그 적용/[10:37] 주석처리 방법/[15:13] img 태그/[22:10] 소스 분석
02.27분 웹표준 스킬의 폭풍성장을 위한 필수과정! 2
마우스 오버 및 내부 외부

책갈피[00:00] select/[07:00] input, textarea/[16:29] style/[19:44] line-height/[22:22] display:none/[25:34] 내부여백, 외부여백
03.30분 웹표준 스킬의 폭풍성장을 위한 필수과정! 3
박스구현, 넓이값 계산방법, 상속관계 차별화

책갈피[00:00] 제목 타이틀/[03:03] color, font-size, line-height/[04:16] span태그와 p태그/[08:31] font-weight/[13:10] 넓이값 계산방법/[18:47] a링크/[25:15] line-height/[27:02] letter-spacing/[28:08] text-align
04.25분 웹표준 스킬의 폭풍성장을 위한 필수과정! 4
가운데 및 위아래, 상대 및 절대 포지션

책갈피[00:00] div 가운데 정의/[02:29] padding/[07:53] position(절대위치, 상대위치)/[09:40] z-index/[15:44] br 태그/[17:00] table/[17:26] border-collapse, border-spacing/[21:30] td 태그
05.21분 웹표준 스킬의 폭풍성장을 위한 필수과정! 5
떠있는 요소및 상속관계

책갈피[00:10] ul, ol, dd, dt/[03:20] li 목록/[16:45] 계층구조 분석
웹표준 [고급]
06.43분 스킬 향상을 위한 Finishing up! 메뉴 총정리 1
종류별 메뉴 세팅

책갈피[00:00] 종류별 메뉴 셋팅/[00:22] 기본 메뉴/[05:45] li 목록 메뉴/[14:54] div 목록 메뉴/[24:10] 세로 메뉴 실습/[38:38] 가로 메뉴 실습
07.34분 스킬 향상을 위한 Finishing up! 메뉴 총정리 2
float:left, position, white-space

책갈피[00:28] float:left/[01:49] width/[04:14] text-decoration/[06:43] css 정의/[11:33] 마우스오버/[20:53] text-align:center/[23:22] width/[25:41] .alzio 23/[26:36] a .topright /[28:23] .alzio 23 a:hover/[31:55] topleft/[33:35] toprigh
08.35분 스킬 향상을 위한 Finishing up! 메뉴 총정리 3
컬러별 메뉴

책갈피[00:11] border-right/[02:01] border-right/[04:31] left, top/[06:34] 상속관계 설명/[09:53] 컬러별 메뉴 생성/[11:47] width, height, text-align/[14:09] .alzio 25 a:hover/[20:37] .alzio 26/[22:59] float:left, line-height/[24:03] display:block, padding//[29:36] cursor:default//[31:40] body
09.49분 웹표준의 정석! 제대로 배우자 1
난이도 있는 레이아웃 만들기

책갈피[00:00] 레이아웃/[02:11] 3단 레이아웃/[05:10] css코딩/[13:01] 박스 정렬/[19:41] .alzio31-gap/[23:36] overflow:hidden/[29:17] 레이아웃 나누기/[35:22] 테이블 추가/[38:50] background-color/[40:07] footer/[42:31] 배너식 활용/[45:10] box-shadow/[48:30] 31%로 정의한 이유
10.46분 웹표준의 정석! 제대로 배우자 2
레이아웃 전체적인 구성

책갈피[00:00] 기본적인 레이아웃/[03:17] box-sizing/[08:31] 오른쪽 내용 생성/[12:56] line-height/[19:33] form기본사항/[22:38] line-height/[27:49] font-weight/[30:57] box-sizing/[34:57] text-indent/[37:00] em 태그/[40:48] list-style/[43:03] text-align; left
11.37분 웹표준의 정석! 제대로 배우자 3
값들의 정의

책갈피[00:00] 넓이값/[03:29] 함축해서 표현하기1/[05:58] max-width/[10:43] float/[16:31] display: inline-block/[21:49] p:last-child/[27:42] input[type=text]/[31:11] input:out-of-range/[33:18] p:nth-last-of-type(1)/[34:08] q:lang/[35:08] :not(p)/[36:03] :target
12.40분 웹표준의 정석! 제대로 배우자 4
응용 예제

책갈피[00:00] target 관리, 표현/[01:23] [title~=alzio]/[04:18] input[type=text]/[08:31] border-radius값/[10:52] 반지름 넓이 높이/[13:41] 배경/[18:33] 외부 여백 margin/[21:44] right bottom/[27:13] 컬러값 적용/[31:47] 방향/[33:53] circle/[36:45] text-shadow/[39:56] box-shadow
13.36분 웹표준의 정석! 제대로 배우자 5
웹폰트, 3D

책갈피[00:04] 기본적인box/[01:52] clip/[03:07] break-word/[05:19] 구글 웹 폰트 사용 방법/[08:35] 박스 모델 만들기/[10:31] transform/[20:26] 원근법, 회전, 각도/[24:10] hidden, visible/[25:07] width 2s/[28:43] transition-timing-function/[33:51] 근본 원리 transition
14.32분 웹표준의 정석! 제대로 배우자 6
애니메이션

책갈피[00:00] 애니메이션/[01:11] from, to/[05:20] keyframe 움직이는 방법/[07:36] position: relative/[10:25] 역방향 애니메이션/[12:37] ease/[15:27] column-count/[20:06] 최적의 넓이값 정의/[25:10] offset/[27:45] display: flex/[29:00] row-reverse/[32:03] space-around
15.54분 웹표준의 정석! 제대로 배우자 7
반응형웹 단계별 적용

책갈피[00:00] 반응형 웹/[00:50] media 쿼리/[07:42] media screen 정의/[12:28] min-width/[18:43] 비슷한 내용 하나로 묶기/[20:23] 해상도width 값/[27:18] 문제점/[30:35] 반응형 웹 실습/[41:04] width,float,padding/[46:57] background-image/[51:52] video/[53:29] max-width
16.35분 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 1
참고, 잘못된 사례

책갈피[00:00] 홈페이지 제작/[01:57] 참고 사항/[04:20] table/[09:30] display: block/[14:24] 메뉴 추가/[18:45] a2_on의 값 넣기/[23:17] 잘못된 사례/[25:41] new 버튼 추가/[29:02] a link 속성/[30:00] link 값 정의/[33:48] line-height값이 같은 이유/[34:35] new 버튼 만들기
17.40분 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 2
본문, 로그인, 위치 수정

책갈피[00:00] 글자 숨기기, 배경 이미지 넣기/[02:45] 경로 지정/[05:04] 한 개의 여백만 밀기/[06:32] hover 사용시 문제점/[10:47] 메뉴 만들기/[14:48] padding-bottom/[20:36] 우측 메뉴 상속 관계/[24:19] 로그인 창 만들기/[29:36] login/[32:15] border-color/[37:12] 패스워드와 아이디
18.44분 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 3
회원가입, 로그아웃

책갈피[00:00] ul목록 정의/[04:03] 문제점/[07:03] 로그인 배경/[11:08] 여백 없이 하는 방법/[13:42] 로그아웃 버튼 만들기/[17:35] text-align:center/[23:29] 파일 연동하기/[29:10] top 태그 코딩/[34:09] font-weight:bold/[39:05] width,, solid/[40:25] contentBox/[43:06] 특정 태그
19.36분 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 4
Main 페이지 코딩마무리

책갈피[00:00] Main/[04:53] color, font/[05:41] margin-bottom/[13:05] margin/[16:28] 구분선 만들기/[20:39] margin, color, font-size/[26:25] main_ju/[30:46] a:hover, background/[32:29] border/[34:03] h5/[36:05] righ
20.35분 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 5
우 메뉴, 퍼센트 제작

책갈피[00:00] 우측 메뉴 세팅/[04:05] h3/[07:38] newlist li/[11:18] ul목록/[13:28] 하단 리스트 추가/[16:36] li .memo/[18:51] 문제점/[22:55] footmenuA img/[23:50] a:hover, text-decoration/[26:02] W3C css/[29:11] 파일명 교체/[31:10] clear: both, width/[33:31] width, position
홈페이지 제작 [특강]
21.36분 레이아웃의 기본이해1
html5 레이아웃, 종류별 메뉴

책갈피[00:00] 레이아웃 설정/[00:59] font-family 설정/[04:26] outline: none/[06:35] list-style: none/[12:28] nav/[15:39] position: relative/[17:59] overflow: hidden/[23:35] 메뉴 사이 구분선 생성/[29:27] 아이콘 위치 변경하기/[31:44] nav .main_newimg/[34:39] 실습메뉴2
22.37분 레이아웃의 기본이해2
아무도 알려주지 않은 버그해결, 또다른 하단 메뉴

책갈피[00:00] display: inline/[02:49] display: inline-block/[06:20] 가운데로 메뉴 정의/[08:35] text-align: center/[13:50] 검색바 추가/[18:28] float: right/[20:02] input 설정/[24:49] article 정의/[27:21] footer 정의/[29:39] ul 목록 정의/[31:58] 메뉴 사이 구분선 생성/[36:14] copyright