ONLINE CLASS

웹표준 [입문 + 고급]

COURSE FOCUS

이 강의에서 배우는 핵심 실무

웹표준 과정에서는 웹문서와 소스의 기본을 살펴보고 마우스 오버 동작과 여러 형태의 메뉴를 구성하는 코딩을 연습합니다. 응용 예제를 거쳐 본문과 로그인 영역의 위치를 수정하며 웹페이지 요소를 배치하는 방법을 익힙니다. 하단 메뉴와 레이아웃의 문제 해결도 함께 다루어 개별 메뉴 제작에서 페이지 전체의 구조를 조정하는 작업으로 이어갑니다.

?

수강 전 꼭 확인하세요

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

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

A

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

◆

기업이 선택한 신뢰 강의

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

자세히 보기 >

REAL REVIEW

수강생 리얼후기!

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

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

RECENT Q&A

최근 수강질문

최근 등록된 수강질문을 작성순서대로 확인해 보세요.

전체 수강질문 보기

ALZIO DEEP GUIDE

HTML·CSS을 더 깊게 이해하기

22강에서 CSS 박스·위치·메뉴·레이아웃·웹폰트·애니메이션·반응형 화면과 웹페이지 코딩을 연결합니다. 로그인·회원가입 화면의 레이아웃 실습을 인증 서버 구현으로 확대하지 않습니다.

공식 기술정보 확인22강 커리큘럼 연결2026 현재 기술정보

웹표준 [입문 + 고급] · 22강 · 13시간 19분

01

HTML·CSS은 무엇인가

HTML은 문서의 의미와 구조를 표현하고 CSS는 표시와 배치를 구성합니다. 브라우저가 문서를 해석해 화면을 만들며 JavaScript는 동작을 추가할 수 있습니다. 태그와 색상을 외우는 것보다 내용의 구조·표시 규칙·사용자 입력을 나눠 이해하는 것이 중요합니다.

02

관련 플랫폼과 개발도구의 관계

문서 파일·스타일시트·이미지·폰트는 경로와 응답 조건으로 연결됩니다. 브라우저는 HTML과 CSS를 해석하고 서버는 필요한 자료를 전달합니다. Bootstrap과 Sass는 각각 UI 구성 도구와 CSS 작성·변환 도구이며 HTML·CSS 자체를 대신하는 별도 표준은 아닙니다.

03

HTML·CSS의 핵심 기능

기술 자체의 기능과 이 강좌의 직접 학습 범위는 다릅니다. 아래 연결 표시는 저장된 공개 커리큘럼에 근거합니다.

문서 구조·의미

제목·문단·목록·표·폼의 역할을 나타냅니다. 내용을 올바르게 구분하면 브라우저와 보조 도구가 구조를 이해하기 쉽습니다. 큰 글자처럼 보이게 했다는 것과 의미 있는 제목 요소를 사용했다는 것은 다릅니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

선택자·캐스케이드

어떤 요소에 어떤 표시 규칙이 적용될지 정합니다. 같은 속성이 겹칠 때 결과를 설명하는 데 중요합니다. 무조건 !important를 추가하기보다 적용된 선언과 조건을 먼저 확인합니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

박스·레이아웃

콘텐츠·여백·테두리와 요소의 배치 공간을 구성합니다. 실제 차지한 크기를 확인하면 예상보다 넓어진 요소나 잘린 자료를 찾기 쉽습니다. 지정한 width가 언제나 바깥 크기와 같다고 가정하지 않습니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

반응형·호환성

공간과 환경에 맞춰 표시를 조정합니다. 긴 글·확대·다른 화면 폭에서 결과를 확인해야 합니다. 한 브라우저의 한 폭에서 보였다고 모든 환경이 동일하다는 뜻은 아닙니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

폼·링크·입력 상태

이동과 사용자 입력의 구조를 표현합니다. 키보드 초점과 레이블·입력 조건을 확인하면 클릭 중심 화면의 불편을 줄일 수 있습니다. 브라우저의 입력 검사와 서버의 자료 검증은 다른 단계입니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

변환·전환·애니메이션

상태 변화와 움직임을 표현합니다. 시작·끝·시간·반복 조건을 나눠야 원하는 동작을 재현하기 쉽습니다. 과도한 움직임과 표시만 변한 상태가 실제 작업 결과를 대신하지 않도록 확인합니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

작성 도구와 프레임워크

반복되는 스타일 구성과 코드 작성을 돕습니다. 생성된 CSS와 도구별 버전·클래스 규칙을 읽어야 수정할 부분을 찾을 수 있습니다. 도구를 설치한 것과 모든 브라우저에 맞는 화면이 완성된 것은 다릅니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

04

이 과정의 실제 작업 흐름

1~5강은 문서·박스·위치·상속·float입니다. 공개 주제는 웹표준 스킬의 폭풍성장을 위한 필수과정! 1 / 웹표준 스킬의 폭풍성장을 위한 필수과정! 2 / 웹표준 스킬의 폭풍성장을 위한 필수과정! 3 / 웹표준 스킬의 폭풍성장을 위한 필수과정! 4 / 웹표준 스킬의 폭풍성장을 위한 필수과정! 5.

6~8강은 종류별 메뉴와 배치입니다. 공개 주제는 스킬 향상을 위한 Finishing up! 메뉴 총정리 1 / 스킬 향상을 위한 Finishing up! 메뉴 총정리 2 / 스킬 향상을 위한 Finishing up! 메뉴 총정리 3.

9~15강은 레이아웃·웹폰트·3D·애니메이션·반응형입니다. 공개 주제는 웹표준의 정석! 제대로 배우자 1 / 웹표준의 정석! 제대로 배우자 2 / 웹표준의 정석! 제대로 배우자 3 / 웹표준의 정석! 제대로 배우자 4 / 웹표준의 정석! 제대로 배우자 5 / 웹표준의 정석! 제대로 배우자 6 / 웹표준의 정석! 제대로 배우자 7.

16~20강은 본문·로그인·회원가입·메인 화면 코딩입니다. 공개 주제는 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 1 / 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 2 / 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 3 / 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 4 / 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 5.

21~22강은 HTML5 레이아웃과 메뉴·버그 확인입니다. 공개 주제는 레이아웃의 기본이해1 / 레이아웃의 기본이해2.

문서·박스·위치·상속·float
종류별 메뉴와 배치
레이아웃·웹폰트·3D·애니메이션·반응형
본문·로그인·회원가입·메인 화면 코딩
HTML5 레이아웃과 메뉴·버그 확인

05

핵심 구조를 이해하는 방법

CSS 결과는 상속만으로 결정되지 않습니다. 선택자의 우선순위·선언 순서·적용 조건과 박스 모델을 함께 봐야 합니다. 문서의 중첩 구조와 화면의 위치는 같은 개념이 아니므로 요소가 어디에 속하고 어느 영역을 차지하는지 따로 확인하세요.

06

실무 적용과 결과 확인

복습 후 응용 제안: 화면 폭을 바꿔 메뉴와 본문의 위치를 대조합니다. 인증·결제 서버 제작은 확인된 범위가 아닙니다.

07

이 강좌에서 집중할 전문주제

22강에서 CSS 박스·위치·메뉴·레이아웃·웹폰트·애니메이션·반응형 화면과 웹페이지 코딩을 연결합니다. 로그인·회원가입 화면의 레이아웃 실습을 인증 서버 구현으로 확대하지 않습니다.

복습 후 응용 제안: 화면 폭을 바꿔 메뉴와 본문의 위치를 대조합니다. 인증·결제 서버 제작은 확인된 범위가 아닙니다.

08

현재 기술과 강좌 환경의 관계

웹 표준 입문·고급 · 정확한 브라우저와 제작 연도 미확정

기존 Topic의 현재 기술 설명과 이 강좌의 직접 회차는 분리합니다. 제작 환경과 브라우저·컴파일러의 정확한 버전은 확정하지 않습니다.

09

목적에 맞는 기술 선택과 비교

아래 비교는 목적과 작업 구조를 선택하기 위한 안내입니다. 다른 기술 전체를 본 강좌에서 가르친다는 뜻은 아닙니다.

목적에 맞는 기술 선택과 비교
선택지	작업 접근	이 강좌와의 관계
문서·박스·위치·상속·float	1~5강	복습 후 응용 제안: 화면 폭을 바꿔 메뉴와 본문의 위치를 대조합니다. 인증·결제 서버 제작은 확인된 범위가 아닙니다.
종류별 메뉴와 배치	6~8강	복습 후 응용 제안: 화면 폭을 바꿔 메뉴와 본문의 위치를 대조합니다. 인증·결제 서버 제작은 확인된 범위가 아닙니다.
레이아웃·웹폰트·3D·애니메이션·반응형	9~15강	복습 후 응용 제안: 화면 폭을 바꿔 메뉴와 본문의 위치를 대조합니다. 인증·결제 서버 제작은 확인된 범위가 아닙니다.

10

기술개념과 알지오 커리큘럼 연결

회차는 공개 커리큘럼의 실제 순서입니다. 실습 후 응용 제안과 현재 기술 참고정보를 강의에서 제공하는 실습으로 해석하지 않습니다.

기술개념과 알지오 커리큘럼 연결
기능·개념	무엇인가	실무 의미	강좌 회차	학습 상태
문서·박스·위치·상속·float	문서·박스·위치·상속·float의 역할을 회차 순서로 연결합니다.	입력·처리·결과를 나눠 실제 동작을 확인합니다.	1·2·3·4·5강	강좌에서 직접 학습
종류별 메뉴와 배치	종류별 메뉴와 배치의 역할을 회차 순서로 연결합니다.	입력·처리·결과를 나눠 실제 동작을 확인합니다.	6·7·8강	강좌에서 직접 학습
레이아웃·웹폰트·3D·애니메이션·반응형	레이아웃·웹폰트·3D·애니메이션·반응형의 역할을 회차 순서로 연결합니다.	입력·처리·결과를 나눠 실제 동작을 확인합니다.	9·10·11·12·13·14·15강	강좌에서 직접 학습
본문·로그인·회원가입·메인 화면 코딩	본문·로그인·회원가입·메인 화면 코딩의 역할을 회차 순서로 연결합니다.	입력·처리·결과를 나눠 실제 동작을 확인합니다.	16·17·18·19·20강	강좌에서 직접 학습
HTML5 레이아웃과 메뉴·버그 확인	HTML5 레이아웃과 메뉴·버그 확인의 역할을 회차 순서로 연결합니다.	입력·처리·결과를 나눠 실제 동작을 확인합니다.	21·22강	강좌에서 직접 학습

11

처음 배울 때 자주 생기는 오해

이 과정은 무엇을 연결하나?

22강에서 CSS 박스·위치·메뉴·레이아웃·웹폰트·애니메이션·반응형 화면과 웹페이지 코딩을 연결합니다. 로그인·회원가입 화면의 레이아웃 실습을 인증 서버 구현으로 확대하지 않습니다.

초반의 실제 범위는?

1~5강은 문서·박스·위치·상속·float입니다. 공개 주제는 웹표준 스킬의 폭풍성장을 위한 필수과정! 1 / 웹표준 스킬의 폭풍성장을 위한 필수과정! 2 / 웹표준 스킬의 폭풍성장을 위한 필수과정! 3 / 웹표준 스킬의 폭풍성장을 위한 필수과정! 4 / 웹표준 스킬의 폭풍성장을 위한 필수과정! 5.

마지막에 어떤 결과를 확인하나?

21~22강은 HTML5 레이아웃과 메뉴·버그 확인입니다. 공개 주제는 레이아웃의 기본이해1 / 레이아웃의 기본이해2.

공개 설명 밖의 기능도 직접 배우나?

복습 후 응용 제안: 화면 폭을 바꿔 메뉴와 본문의 위치를 대조합니다. 인증·결제 서버 제작은 확인된 범위가 아닙니다.

최신 버전 강좌인가?

웹 표준 입문·고급 · 정확한 브라우저와 제작 연도 미확정 제목과 설명만으로 최신 버전 대응을 단정하지 않습니다.

다음 학습은 무엇이 다른가?

HTML 기초 CSS3 + 부트스트랩에서 문서 구조·CSS3·부트스트랩의 별도 기초를 보강합니다.

12

다음 학습 방향

HTML 기초 CSS3 + 부트스트랩

HTML 기초 CSS3 + 부트스트랩 과정에서 문서 구조·CSS3·부트스트랩의 별도 기초를 보강합니다.

자료 보기 →

HTML·CSS 관련 과정 비교

입문·실무·심화 과정의 실제 커리큘럼을 목적에 맞게 비교합니다.

자료 보기 →

실습과 복습 계획

새 환경에서 예제를 확인하고 학습 계획을 세우는 방법을 살펴봅니다.

자료 보기 →

웹표준 [입문 + 고급]

웹표준 [입문 + 고급]

웹표준 [입문 + 고급]

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

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

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

수강료
190,000원95,000원

?

수강 전 꼭 확인하세요

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

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 강의 질문&답변

💬

알지오 학습·수강 도우미

운영진이 확인한 안내를 자세히 보고, 필요하면 바로 상담하세요.

상담 상태 확인 중