ONLINE CLASS

드림위버 강의 [홈페이지제작]

COURSE FOCUS

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

드림위버에서 링크와 이미지·로고를 바꾸며 태그·주소·스타일의 관계를 이해하고 홈페이지 제작을 시작합니다. 3단 배열과 여백을 조정하는 동안 소스를 함께 분석하고 새로운 웹문서에 스타일시트를 반영하는 방법을 익힙니다. 기존 홈페이지 수정과 부트스트랩 부동산 사이트 예제를 통해 화면을 만드는 과정과 이미 작성된 코드를 해석하는 작업을 함께 연습합니다.

?

수강 전 꼭 확인하세요

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

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

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

◆
기업이 선택한 신뢰 강의

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

자세히 보기  >
♥
수강료 일부는 사회환원에 사용됩니다.

작은 나눔이 더 나은 내일을 만듭니다.

자세히 보기  >
REAL REVIEW

수강생 리얼후기!

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

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

RECENT Q&A

최근 수강질문

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

ALZIO DEEP GUIDE

Adobe Dreamweaver을 더 깊게 이해하기

20강은 링크·이미지·CSS와 3단 배치·미디어쿼리에서 브라우저 점검·호스팅·공통 레이아웃, 기존 홈페이지 분석과 Bootstrap 부동산 예제로 이어집니다. 제작 화면과 저장된 코드를 함께 읽는 과정입니다.

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

드림위버 강의 [홈페이지제작] · 20강 · 8시간 52분

01

Adobe Dreamweaver은 무엇인가

Dreamweaver는 웹 문서의 코드 편집과 시각 확인, 사이트 파일 관리와 게시를 연결하는 웹 제작 도구입니다. 문서 구조는 HTML, 표현은 CSS, 동작은 스크립트와 서버 등의 역할로 나누어 읽습니다.

02

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

편집기와 실제 브라우저는 역할이 다릅니다. Dreamweaver에서 보이는 화면만으로 배포 환경의 표시·링크·폼 동작을 확정하지 않습니다. Bootstrap 같은 프레임워크와 웹 표준, 호스팅의 조건도 구분합니다.

03

Adobe Dreamweaver의 핵심 기능

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

문서·코드

HTML 구조와 속성을 편집합니다. 보이는 글과 실제 링크 목적지·문서 구조를 함께 확인합니다.

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

CSS·레이아웃

선택자·여백·배치를 구성합니다. 편집기의 조정 결과가 어떤 규칙으로 저장되는지 확인합니다.

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

링크·자산 경로

문서·이미지·스타일의 위치를 연결합니다. 로컬 미리보기와 서버의 대소문자·경로 조건은 다를 수 있습니다.

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

반응형·미리보기

화면 크기별 배치를 점검합니다. 한 화면에서 정상이라고 모든 브라우저·폭의 결과가 같지는 않습니다.

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

사이트 관리·게시

로컬 파일과 원격 사이트의 구성을 연결합니다. 업로드 이후 실제 목적지와 표시를 확인합니다.

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

템플릿·프레임워크

반복 구조와 외부 프레임워크를 활용합니다. 구형 편집기 기능을 현재 웹 표준이나 모든 현행 기능과 동일시하지 않습니다.

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

이 과정의 실제 작업 흐름

1~6강은 도구 기초와 링크·이미지·CSS·3단 배열·여백을 연결합니다. 7~10강은 미디어쿼리·크로스브라우저·메뉴 속도·호스팅과 원격 수정입니다. 문서 경로와 화면 조건을 함께 기록하세요.

11~15강은 신규 문서·스타일·상하단·로고·메뉴·배너이고, 16~20강은 기존 홈페이지 수정·페이지 분석·Bootstrap 부동산 예제입니다. 기존 소스를 읽고 수정 결과를 브라우저에서 대조하는 흐름으로 복습합니다.

  1. 기초·링크·이미지
  2. CSS·배열·여백
  3. 미디어쿼리·브라우저
  4. 호스팅·문서
  5. 레이아웃·메뉴·배너
  6. 기존 페이지·Bootstrap
05

핵심 구조를 이해하는 방법

상대 경로와 문서 위치, 선택자와 스타일 우선순위, 화면 폭에 따른 배치를 연결하세요. 디자인 화면의 조정이 어떤 코드로 저장되는지 확인하면 파일을 옮기거나 공통 스타일을 수정할 때 생기는 영향을 설명하기 쉽습니다.

06

실무 적용과 결과 확인

2~8강을 복습하며 문서 위치·이미지 경로·선택자·미디어쿼리의 적용 결과를 기록해 보세요. 같은 파일을 다른 폴더에서 열 때와 서버에 올렸을 때 링크가 어떻게 해석되는지 비교하는 추가 연습입니다.

13~20강은 로고·좌메뉴·배너·중하단을 바꾼 전후를 여러 화면 폭에서 비교하세요. Bootstrap 예제의 구조와 사용한 클래스의 역할을 읽는 복습이며 현재 프레임워크 버전 전체 기능을 대신 가르친다고 표시하지 않습니다.

07

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

7~9강의 미디어쿼리·브라우저·반응형 메뉴를 13~15강 레이아웃과 연결하는 것이 중심입니다. 편집 화면의 위치와 CSS 규칙의 적용 결과를 따로 기록하면 원인을 찾기 쉽습니다.

16~20강은 기존 홈페이지와 부동산 실무 예제를 분석합니다. 제작을 처음부터 반복하기보다 제공 구조를 읽고 수정할 부분을 분리하는 학습으로 활용하며 상용 부동산 서비스 기능 전체 구현은 공개 범위로 확인되지 않습니다.

08

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

공개 설명에 Dreamweaver와 Bootstrap의 정확한 촬영 버전이 없습니다. CSS3 표현은 학습 주제이며 편집기의 세부 버전 번호가 아닙니다. 구형 예제의 클래스와 현재 Bootstrap을 동일하게 취급하지 않습니다.

Adobe의 현행 Dreamweaver 도움말을 도구 역할 확인에 사용했습니다. 미디어쿼리·문서 경로·스타일과 실제 브라우저 결과를 연결하되 최신 프레임워크·서버 API·보안 구현 전체를 본 과정에 추가하지 않습니다.

09

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

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

목적에 맞는 기술 선택과 비교
선택지작업 접근이 강좌와의 관계
823번CSS·반응형·호스팅·기존 페이지 분석실제 제작과 코드 확인
871번프레임·Spry·템플릿·유동형 그리드구형 제작 기능의 다른 과정
WordPressCMS 콘텐츠·테마·플러그인다른 제작 방식
10

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

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

기술개념과 알지오 커리큘럼 연결
기능·개념무엇인가실무 의미강좌 회차학습 상태
기초·링크·CSS이미지·스타일·3단 배열·여백코드와 화면 연결1·2·3·4·5·6강강좌에서 직접 학습
반응형·게시미디어쿼리·브라우저·메뉴·호스팅환경별 결과7·8·9·10강강좌에서 직접 학습
레이아웃 구성문서·스타일·상하단·메뉴·배너사이트 배치11·12·13·14·15강강좌에서 직접 학습
페이지 분석·수정기존 홈페이지·Bootstrap 부동산구조를 읽고 적용16·17·18·19·20강강좌에서 직접 학습
11

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

디자인 화면이 브라우저와 항상 같은가?

8강의 크로스브라우저 내용을 실제 결과와 연결합니다. 편집기 미리보기만으로 판단하지 않습니다.

상대 경로는 어디서나 같은가?

문서 위치를 기준으로 해석됩니다. 2·10강에서 로컬과 서버 경로를 구분하세요.

CSS3가 Dreamweaver 버전인가?

스타일 관련 학습 표현입니다. 도구의 세부 버전은 공개 자료로 확정하지 않습니다.

미디어쿼리면 모든 모바일 화면이 완성되나?

폭별 배치·메뉴·입력·콘텐츠를 점검해야 합니다. 7~9강을 표시 결과와 연결하세요.

Bootstrap 예제가 현행 전 기능을 포함하나?

20강은 부동산 홈페이지 분석·수정의 공개 범위입니다. 정확한 버전과 전체 기능은 확인되지 않습니다.

호스팅에 업로드하면 모든 링크가 정상인가?

실제 목적지·대소문자·자산 경로를 확인해야 합니다. 10~11강 복습에서 결과를 대조합니다.

12

다음 학습 방향

드림위버 핵심 마스터

드림위버 핵심 마스터 과정에서 프레임·Spry·템플릿 등 구형 웹 제작 흐름을 비교합니다.

자료 보기 →

HTML5 CSS3 실무

HTML5 CSS3 실무 과정에서 HTML·CSS 기반의 구조와 반응형 학습을 보강합니다.

자료 보기 →

Adobe Dreamweaver 관련 과정 비교

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

자료 보기 →

실습과 복습 계획

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

자료 보기 →

기술정보는 Adobe의 공식자료를 기준으로 검토했으며, 강좌 범위는 드림위버 강의 [홈페이지제작]의 공개 커리큘럼과 구분했습니다.

공식 기술정보 확인일: 2026-10-06 · 강좌 업데이트일을 의미하지 않습니다.

드림위버 강의 [홈페이지제작] 드림위버 강의 [홈페이지제작]
  • 드림위버 강의 [홈페이지제작]

  • 강의구성
  • (20강) 전체 : 8시간 52분|평균 : 26분36초
  • 이용기간/강사
  • 1개월2개월
    알지오 R&D [IT]
  • 증빙가능
  • 수료증, 수강증, 학습진도
  • 수강료
  • 190,000원할인95,000원
?

수강 전 꼭 확인하세요

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

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

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

  • 드림위버 [홈페이지제작] - 누구나 쉽게 홈페이지 제작이 가능합니다.
  • 01.31분 드림위버 누구나 할 수 있게 기초부터
    나만의 홈페이지 제작을 위한 드림위버 알기
    위치지정부터 작업폴더, 미리보기와 링크, css와 돔트리, container수정, 메뉴바 수정하기
  • 02.30분 링크와 이미지 로고변경
    각각의 태그와 교체 되는 스타일과 링크와 주소개념 완벽정리
    브라우저 단축, 타이틀과 텍스트 링크, 로고이미지, 정렬위치와 변경 반영되는 여러실습
  • 03.22분 기본사항을 완벽히 이해하게 해드립니다.
    드림위버에서 자동붙는 사항 CSS3 기본과 활용방법
    추가 CSS만들기, 제목태그와 위치변경, 우측의 플롯의 정렬, LI목록의 플롯차이
  • 04.25분 초보지만 전문가처럼 작업을 쉽게하기
    두번 작업말고 실무로 한번에 링크와 CSS3까지 완벽 설명합니다.
    호스팅과 노드작업, 브라우저 확인필요, ul과 볼릿기호의미, li와 텍스트 링크정의, 마우스오버 컬러와 링크ID 완벽이해
  • 05.30분 드림위버와 CSS코딩
    드림위버를 좀 더 전문가처럼 사용하게 해드립니다.
    UI기본기 바디와 구성, li와 a의 스타일 변경, 글꼴 로컬과 지정과 웹관리, 외국에서 번역시 sans-serif, html5 기본태그 중 section, 내부여백과 정렬값 팁
  • 06.27분 알고보면 너무 쉬운 3단배열과 여백과 줄
    제작과 동시에 소스분석 습관을 길러드립니다.
    태그의 기본적인 여백, 섹션 위아래 여백 링크변화 무, 컬러변경 숨기기와 문서배경여백, display 벨류값 큰 차이, 줄의 간격과 균등분배
  • 07.27분 미디어쿼리 하드코딩까지
    8개를 2개로 선언 드림위버로 웹페이지 제작과 CSS까지 완벽히
    3단 반응형 1단과 요소설명, 중복반영 css, inline-block과 both차이, 문서전체와 한곳의 css정의
  • 08.26분 드림위버로 안되는 경우
    드림위버 편집과 크로스브라우저로 실무적인 코딩까지 합니다.
    상속과 반영, 반응형 웹의 중복확인, 불필요했던 배경이미지, css 푸터통합과 반응형 설정, 미디어쿼리와 반응형 이미지
  • 09.25분 반응형웹의 속도
    스마트폰으로 보게 되거나 pc로 볼때의 매뉴 속도조절을 합니다.
    실제배경 테두리, 버튼의 배경 및 트랜지션, 상단의 반응형웹 트랜지션
  • 10.25분 드림위버로 전세계인이 볼 수 있게 시작
    웹호스팅 고르는 방법과 드림위버로 페이지 실시간 수정하기
    환경설정 실무, 불필요한 코드제거와 소스코드, 도메인과 호스팅 과정별 선택, 웹호스팅의 경로와 DB비번, 웹호스팅 연결과 올리고 실시간 수정
  • 11.28분 신규 웹문서 구축부터 실무로 시작
    웹문서의 생생한 반영확인과 스타일 시트 선언의 고수가 되게 해드립니다.
    원격서버와 로컬, 신규문서 코딩후 호스팅 확인, 서브링크와 수정반영, CSS 3가지추가 및 재미있는 선언들
  • 12.30분 드림위버로도 웹페이지를 가지고 놀수있어요
    하드코딩 전문가가 보여주는 드림위버의 레이이아웃 마스터하기
    태그삽입 기본유형부터, 전체와 상단생성, 가운데 정렬 본문 1, 2, 3, 4단, 텍스트 정렬값 분리와 실무팁
  • 13.32분 홈페이지를 정식적으로 제작
    레이아웃과 상하단의 모든것
    여러 곳에 사용가능한 컬러값, 레이아웃 상단분할, 로고위치, 좌메뉴 수직수평과 가로, 또 다른 메뉴링크 컬러들
  • 14.27분 상단의 3가지 종류 배치
    좌메뉴와 가운데 로고 우측에 떠있는 메뉴제작
    좌메뉴 수직과 오버, 또 다른방식 우메뉴제작, 포지션과 볼릿 ul의 정렬, 떠있는 아이콘
  • 15.27분 분할 레이아웃 중하단의 배너
    홈페이지 제작시 가장 실수할 수 있는 부분을 해결합니다.
    공백 레이아웃 해결, 하부의 3단 분할, 보더의 차이 해결, 레이아웃이 일그러진다면, 쇼핑몰 3단 배너 난관해결
  • 16.24분 기본이론을 확실히 실습하고 신규 홈페이지
    기본기를 어느정도 알았으니 잘 만들어진 홈페이지 수정합니다.
    3단이미지와 하단여백, 다중 열 홈페이지, container header, primary_header h1, 메뉴 설정하기
  • 17.23분 신규 홈페이지를 내것으로 코딩
    드림위버에서 기본 제공하는 홈페이지를 막힘없이 완벽히 내 취향에 맞게 제작
    nav ul 3단계 반응형웹, 높이값 의미와 해당 LI의 반응형, li와 a의 링크구조 모두변경
  • 18.26분 실무에서 오류나 문제없이 제작
    초보가 할 수 있는 스타일과 많은 시간동안 코딩하면서 반영할 수 있는 스킬
    section의 요소분석, 이미지의 단계별 반응형, row와 columns의 반응형
  • 19.25분 마지막 일반 페이지분석
    위에서 배운대로 응용만 하면 멋진 홈페이지를 제작할 수 있어요.
    row와 blockDisplay 이유, 반응형의 float의 넓이와 반응형 차이, clear: both 이유와 overflow, social_icon 하부의 반응형, 의외의 하단 반응형
  • 20.22분 부트스트랩 부동산 실무 홈페이지
    써먹을 수 있는 홈페이지 선택해서 분석과 수정을 알려드립니다.
    CSS실무코딩 필요성과 신규, 브라우저 dom 네트워크, 프론트엔드는?, navbar 이외 속성, 로고 메뉴 검색, 롤링배너

강의목록 다운로드                        1:1 강의 질문&답변






도움이 필요하신가요?
💬
알지오 학습·수강 도우미
운영진이 확인한 안내를 자세히 보고, 필요하면 바로 상담하세요.
상담 상태 확인 중