Q초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?
A
네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.
HTML5 CSS3 실무
이 강의에서 배우는 핵심 실무
HTML5 요소와 CSS3 가상요소로 페이지를 구성하고 스타일의 상속관계가 여러 페이지에 적용되는 방식을 확인합니다. 외부폰트와 transition·transform을 사용해 로딩이나 마우스 오버에 반응하는 텍스트와 버튼을 제작합니다. 입체적인 3D 버튼과 효과를 실습하면서 문서 구조를 유지한 채 화면의 움직임과 시각적 반응을 추가하는 방법을 익힙니다.
수강 전 꼭 확인하세요
수강 전 자주 묻는 내용을 간단히 안내드립니다.
기업이 선택한 신뢰 강의
검증된 커리큘럼과 전문 강사진으로 높은 만족도를 제공합니다.
자세히 보기 >수강료 일부는 사회환원에 사용됩니다.
작은 나눔이 더 나은 내일을 만듭니다.
자세히 보기 >수강생 리얼후기!
실제 수강생의 학습 경험을 확인해 보세요.
수강후기를 불러오는 중입니다.
최근 수강질문
최근 등록된 수강질문을 작성순서대로 확인해 보세요.
연관학과
같은 학과에서 함께 학습하면 좋은 강의를 모았습니다.
![웹표준 [입문 + 고급]](/alziocoLec/img_file/v4_new_464_20260915_code_r3.jpg "웹표준 [입문 + 고급]")
![반응형웹 + 부트스트랩 [전문과정]](/alziocoLec/img_file/v4_new_552_20260915_code_r3.jpg "반응형웹 + 부트스트랩 [전문과정]")
![웹퍼블리셔 [현장실습]](/alziocoLec/img_file/v4_new_796_20260915_code_r3.jpg "웹퍼블리셔 [현장실습]")
HTML·CSS을 더 깊게 이해하기
17강에서 HTML 요소·CSS 상속·가상요소를 실제 페이지에 적용하고 폰트·transition·transform·버튼·배너 효과로 이어집니다. 화면 효과와 자료 처리 기능을 구분합니다.
공식 기술정보 확인17강 커리큘럼 연결2026 현재 기술정보
HTML·CSS은 무엇인가
HTML은 문서의 의미와 구조를 표현하고 CSS는 표시와 배치를 구성합니다. 브라우저가 문서를 해석해 화면을 만들며 JavaScript는 동작을 추가할 수 있습니다. 태그와 색상을 외우는 것보다 내용의 구조·표시 규칙·사용자 입력을 나눠 이해하는 것이 중요합니다.
관련 플랫폼과 개발도구의 관계
문서 파일·스타일시트·이미지·폰트는 경로와 응답 조건으로 연결됩니다. 브라우저는 HTML과 CSS를 해석하고 서버는 필요한 자료를 전달합니다. Bootstrap과 Sass는 각각 UI 구성 도구와 CSS 작성·변환 도구이며 HTML·CSS 자체를 대신하는 별도 표준은 아닙니다.
HTML·CSS의 핵심 기능
기술 자체의 기능과 이 강좌의 직접 학습 범위는 다릅니다. 아래 연결 표시는 저장된 공개 커리큘럼에 근거합니다.
문서 구조·의미
제목·문단·목록·표·폼의 역할을 나타냅니다. 내용을 올바르게 구분하면 브라우저와 보조 도구가 구조를 이해하기 쉽습니다. 큰 글자처럼 보이게 했다는 것과 의미 있는 제목 요소를 사용했다는 것은 다릅니다.
기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인선택자·캐스케이드
어떤 요소에 어떤 표시 규칙이 적용될지 정합니다. 같은 속성이 겹칠 때 결과를 설명하는 데 중요합니다. 무조건 !important를 추가하기보다 적용된 선언과 조건을 먼저 확인합니다.
기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인박스·레이아웃
콘텐츠·여백·테두리와 요소의 배치 공간을 구성합니다. 실제 차지한 크기를 확인하면 예상보다 넓어진 요소나 잘린 자료를 찾기 쉽습니다. 지정한 width가 언제나 바깥 크기와 같다고 가정하지 않습니다.
기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인반응형·호환성
공간과 환경에 맞춰 표시를 조정합니다. 긴 글·확대·다른 화면 폭에서 결과를 확인해야 합니다. 한 브라우저의 한 폭에서 보였다고 모든 환경이 동일하다는 뜻은 아닙니다.
기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인폼·링크·입력 상태
이동과 사용자 입력의 구조를 표현합니다. 키보드 초점과 레이블·입력 조건을 확인하면 클릭 중심 화면의 불편을 줄일 수 있습니다. 브라우저의 입력 검사와 서버의 자료 검증은 다른 단계입니다.
기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인변환·전환·애니메이션
상태 변화와 움직임을 표현합니다. 시작·끝·시간·반복 조건을 나눠야 원하는 동작을 재현하기 쉽습니다. 과도한 움직임과 표시만 변한 상태가 실제 작업 결과를 대신하지 않도록 확인합니다.
기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인작성 도구와 프레임워크
반복되는 스타일 구성과 코드 작성을 돕습니다. 생성된 CSS와 도구별 버전·클래스 규칙을 읽어야 수정할 부분을 찾을 수 있습니다. 도구를 설치한 것과 모든 브라우저에 맞는 화면이 완성된 것은 다릅니다.
기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인이 과정의 실제 작업 흐름
1~8강은 요소·스타일·상속·가상요소를 여러 페이지에 적용하는 구간입니다. 어떤 선택자가 어떤 요소에 적용됐는지 기록하면 반복 페이지의 차이를 설명하기 쉽습니다.
9~12강은 폰트·전환·변환·레이아웃·문의폼·표·버튼·배너이며 13~17강은 움직임과 입체 효과를 확장합니다. 시각 효과와 문서 의미·입력 결과를 서로 다른 확인 대상으로 봅니다.
- 요소·스타일
- 상속·가상요소
- 실제 페이지
- 폰트·변환
- 폼·버튼
- 배너·구조 정리
핵심 구조를 이해하는 방법
CSS 결과는 상속만으로 결정되지 않습니다. 선택자의 우선순위·선언 순서·적용 조건과 박스 모델을 함께 봐야 합니다. 문서의 중첩 구조와 화면의 위치는 같은 개념이 아니므로 요소가 어디에 속하고 어느 영역을 차지하는지 따로 확인하세요.
실무 적용과 결과 확인
4~8강을 복습할 때 하나의 스타일을 바꿔 여러 페이지에서 달라진 요소를 비교하세요. 상속된 속성과 직접 지정한 속성을 구분하는 것은 추가 응용 제안입니다. 같은 글자 크기라도 적용된 규칙은 다를 수 있습니다.
9·13~17강에서 시작·끝 상태·시간·반복을 기록하고 움직임을 줄인 환경에서 결과를 점검해 보세요. 키보드로도 버튼에 접근할 수 있는지 확인하는 것은 추가 복습 점검입니다. 모든 접근성 평가를 강좌가 직접 제공한다고 확대하지 않습니다.
이 강좌에서 집중할 전문주제
본 과정의 전문 축은 가상요소와 transition·transform을 이용한 페이지 효과입니다. 2·6~8강에서 생성된 표시와 실제 문서 요소를 구분하세요. 13~17강의 효과에서는 보이는 위치와 원래 배치 공간을 따로 확인하는 것이 유용합니다.
10강 프레임셋은 구형 HTML 구성으로 읽어야 합니다. 현재 문서 구조의 권장 방식처럼 표시하지 않습니다. 같은 회차의 문의폼·메뉴와도 별도의 기술 상태로 구분합니다.
현재 기술과 강좌 환경의 관계
브라우저·사용 라이브러리·폰트와 정확한 제작 환경 버전은 미확정입니다. HTML5·CSS3는 학습 범위를 설명하는 표기이며 현재 CSS 전체 기능의 버전 번호가 아닙니다.
frameset은 현재 HTML에서 obsolete로 분류되는 구형 구성입니다. 현재 페이지 레이아웃은 문서 구조와 CSS 배치를 기준으로 별도 확인하세요. 최신 Grid·모든 반응형 기법·서버 문의 처리 전체는 직접 학습으로 확인되지 않습니다.
목적에 맞는 기술 선택과 비교
아래 비교는 목적과 작업 구조를 선택하기 위한 안내입니다. 다른 기술 전체를 본 강좌에서 가르친다는 뜻은 아닙니다.
| 선택지 | 작업 접근 | 이 강좌와의 관계 |
|---|---|---|
| CSS 효과 | 표시 상태와 시간·변환 구성 | 본 과정 중심 |
| JavaScript 동작 | 자료와 이벤트에 따른 처리 | 효과와 실행 책임 비교 |
| Bootstrap | 구성요소의 정해진 규칙 | 직접 스타일과 비교 |
기술개념과 알지오 커리큘럼 연결
회차는 공개 커리큘럼의 실제 순서입니다. 실습 후 응용 제안과 현재 기술 참고정보를 강의에서 제공하는 실습으로 해석하지 않습니다.
| 기능·개념 | 무엇인가 | 실무 의미 | 강좌 회차 | 학습 상태 |
|---|---|---|---|---|
| 요소·CSS·가상요소 | 문서와 표시 연결 | 선택과 생성 표시 | 1·2·3강 | 강좌에서 직접 학습 |
| 상속·페이지 실습 | 여러 구성의 적용 규칙 | 다른 결과의 원인 | 4·5·6·7·8강 | 강좌에서 직접 학습 |
| 폰트·전환·변환 | 글자와 움직임 표현 | 상태와 배치 구분 | 9강 | 강좌에서 직접 학습 |
| 레이아웃·폼·표·버튼 | 페이지와 입력 구조 | 표시·입력 확인 | 10·11·12강 | 강좌에서 직접 학습 |
| 버튼·배너·입체 효과 | 시간과 변환 조건 | 효과의 시작·끝 확인 | 13·14·15·16·17강 | 강좌에서 직접 학습 |
처음 배울 때 자주 생기는 오해
가상요소가 실제 HTML 입력 요소인가?
표시를 생성하는 CSS 역할입니다. 2·6~8강에서 문서 구조와 구분하세요. 사용자 입력과 자료 저장을 대신하지 않습니다.
상속과 우선순위는 같은가?
상속과 선언 적용의 기준은 다릅니다. 4~5강에서 적용된 속성을 확인하세요. 부모 값만으로 모든 최종 표시가 결정되지는 않습니다.
transform이면 배치 공간도 항상 이동하나?
표시 변환과 문서 배치를 구분합니다. 9·13~17강 효과를 원래 영역과 대조하세요. 시각적인 위치만으로 주변 요소의 흐름을 판단하지 않습니다.
문의폼이 있으면 서버 전송도 완성되나?
화면 입력과 서버 처리는 별도입니다. 10~11강의 공개 실습 범위를 확인하세요. 전체 자료 저장·메일 처리로 확대하지 않습니다.
frameset은 현행 권장 레이아웃인가?
구형 구성입니다. 10강의 당시 학습과 현재 HTML 상태를 나눠 읽으세요. 새 페이지의 기본 방식으로 안내하지 않습니다.
애니메이션이면 더 좋은 UI인가?
목적과 입력 상태에 맞아야 합니다. 13~17강 결과의 가독성과 접근을 확인하세요. 움직임 자체가 모든 사용성을 개선하는 것은 아닙니다.
