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