ONLINE CLASS

모바일 홈페이지 제작

COURSE FOCUS

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

탭 메뉴와 검색바가 있는 모바일 홈페이지를 만들며 메인 페이지의 구성 방법을 익힙니다. nav 메뉴의 표시·숨김과 그라데이션 배경을 다루고, table cell과 input 요소로 검색 영역과 목록을 배치합니다. listSection·listItem·thumbList의 정렬 및 크기 조절을 실습하면서 같은 페이지 안에서 메뉴와 항목의 위치가 어떻게 달라지는지 확인합니다.

?

수강 전 꼭 확인하세요

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

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

A

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

◆

기업이 선택한 신뢰 강의

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

자세히 보기 >

REAL REVIEW

수강생 리얼후기!

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

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

RECENT Q&A

최근 수강질문

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

전체 수강질문 보기

ALZIO DEEP GUIDE

모바일 웹을 더 깊게 이해하기

20강은 탭·nav·검색·로그인·소개·footer와 table-cell·list·content 영역을 조합해 모바일 페이지를 구성합니다. 409번의 외부 서비스·QR·PC 전환 중심 흐름과 다른 화면 조립 학습입니다.

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

모바일 홈페이지 제작 · 20강 · 18시간 1분

01

모바일 웹은 무엇인가

모바일 웹은 휴대전화 브라우저에서 사용할 문서·화면·동작을 만드는 웹 개발입니다. 설치형 네이티브 앱과 실행 환경이 다르며 반응형은 화면 크기에 따라 표시를 조절하는 설계 방식입니다.

02

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

HTML·CSS·JavaScript와 브라우저가 기본 구성입니다. viewport와 미디어쿼리·유연한 배치는 다른 역할입니다. 터치·키보드·브라우저 API·PWA는 현재 기술의 추가 선택지이며 실제 강좌에서 확인된 범위와 구분합니다.

03

모바일 웹의 핵심 기능

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

viewport·미디어쿼리

브라우저 표시 범위와 조건별 스타일을 다룹니다. 하나의 설정만으로 모든 레이아웃 문제가 해결되지 않습니다. 실제 회차 연결표를 확인합니다.

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

유연한 레이아웃

폭·여백·정렬을 콘텐츠에 맞춥니다. 방향 전환 때 긴 글과 메뉴를 봅니다. 당시 table-cell 방식과 현재 추가 도구를 구분합니다.

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

메뉴·폼·목록

탐색과 입력을 작은 화면에 배치합니다. 화면 디자인과 서버 인증은 다릅니다. 로그인 폼 제작을 보안 시스템 전체로 확대하지 않습니다.

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

터치·키보드

입력 방식과 조작 영역을 고려합니다. 작은 버튼과 가려진 입력을 점검합니다. 접근성 검토 전체를 모든 강좌의 직접 학습으로 표시하지 않습니다.

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

브라우저 API·연결

지도·전화·SNS 등 외부 기능을 연결합니다. 권한·서비스·브라우저 조건을 확인합니다. 구형 API의 현재 실행을 보장하지 않습니다.

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

PWA·네이티브와 차이

설치·오프라인 등 웹 확장과 네이티브 환경을 비교합니다. 기능과 배포 조건은 다릅니다. PWA 구축은 아래 과정의 직접 범위로 확인되지 않았습니다.

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

04

이 과정의 실제 작업 흐름

1~8강은 탭·nav·소개 페이지·하단·table-cell·검색·아이콘·footer 배치입니다. 9~14강은 sign in·기본 CSS·list 영역 정렬·배경·메인 목록을 다룹니다.

15~20강은 main/canvas 클래스·listSection/listItem·content·loginForm·searchForm·크기 조절 목록입니다. canvas라는 클래스 표기를 그래픽 Canvas API 실습으로 해석하지 않습니다.

탭·nav
소개·하단
검색·아이콘
폼·기본 스타일
list 정렬
content·페이지 구성

05

핵심 구조를 이해하는 방법

콘텐츠 순서와 메뉴·폼을 정하고 화면 폭·여백·글·그림·목록을 조정한 뒤 기기 방향과 입력 조건을 대조합니다. 좁은 화면에서 보인다는 사실만으로 읽기와 조작까지 편하다고 보지는 않습니다.

06

실무 적용과 결과 확인

1~8강을 복습하며 메뉴를 숨기는 조건·검색영역·footer의 정렬과 높이를 비교해 보세요. 긴 라벨과 작은 화면의 변화는 추가 응용 점검입니다. table-cell 표현을 표 데이터의 의미와 동일시하지 않습니다.

9~20강은 로그인·검색·목록 페이지에서 공통 스타일과 개별 영역을 분리해 보세요. 입력 상태·길어진 목록과 결과 배치를 확인하는 연습입니다. 폼 표시만으로 서버 검색·회원 인증의 구현을 보장하지 않습니다.

07

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

전문 축은 list와 table-cell 방식으로 작은 화면의 메뉴·아이콘·입력 영역을 연결하는 것입니다. 배치 구조와 CSS 속성을 함께 읽는 데 목적이 있습니다.

15~20강의 class 이름은 페이지 구성의 식별자입니다. 이름에서 브라우저 그래픽·오프라인 캐시·네이티브 기능을 추론하지 않습니다. 필요하면 별도 화면·기능 범위를 학습합니다.

08

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

정확한 촬영일·브라우저·CSS 환경은 미확정입니다. 공개 목록의 table-cell과 리스트 배치가 과정의 구현 맥락입니다. 최신 Grid 중심 과정으로 바꿔 소개하지 않습니다.

현재 모바일 웹은 viewport·조건별 스타일·입력과 여러 화면의 검토를 함께 계획합니다. Flexbox·Grid·PWA·접근성 전체는 본 공개 20강의 직접 학습으로 확인되지 않습니다. 추가 점검과 실제 회차를 구분합니다.

09

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

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

목적에 맞는 기술 선택과 비교
선택지	작업 접근	이 강좌와의 관계
502번	메뉴·list·폼·하단 정렬	페이지 조립 중심
409번	viewport·게시판·지도·전환	실무 적용 범위 확장
Flexbox·Grid	현대의 다른 레이아웃 선택지	추가 학습 참고

10

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

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

기술개념과 알지오 커리큘럼 연결
기능·개념	무엇인가	실무 의미	강좌 회차	학습 상태
메뉴·하단	탭·nav·소개·footer	영역 배치	1·2·3·4·5·6·7·8강	강좌에서 직접 학습
폼·list·스타일	sign in·정렬·배경	페이지 조합	9·10·11·12·13·14강	강좌에서 직접 학습
content·화면 완성	class·로그인·검색·목록	개별 페이지	15·16·17·18·19·20강	강좌에서 직접 학습

11

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

table-cell이면 HTML table만 쓰나?

CSS 배치와 표 요소는 구분합니다. 6~7·11~12강의 코드를 확인하세요. 화면 모양만으로 문서 의미를 판단하지 않습니다.

canvas 클래스가 Canvas API인가?

클래스 이름만으로 그래픽 API를 확정하지 않습니다. 15강 공개 설명은 페이지 구성입니다. API 실습을 추가하지 않습니다.

검색창이 서버 검색도 처리하나?

표시와 서버 처리는 다릅니다. 6·19강의 UI 범위를 확인합니다. 구현되지 않은 동작을 보장하지 않습니다.

모든 메뉴를 숨기면 성능이 좋아지나?

표시와 로딩·실행 비용은 다릅니다. 2강의 CSS 조건을 대조합니다. 속성을 하나의 성능 보장으로 소개하지 않습니다.

로그인 폼이면 보안 로그인이 완성인가?

인증·세션·서버 검증은 별도입니다. 9·18강의 화면 구성을 구분하세요. 과정 범위를 확대하지 않습니다.

현재 PWA도 이 과정에 포함되나?

공개 목록에서 확인되지 않습니다. 모바일 페이지와 PWA 기능은 다릅니다. 후속 기술로만 참고합니다.

12

다음 학습 방향

모바일 제작 [실무]

모바일 제작 [실무] 과정에서 viewport·게시판·외부 연결의 실무 범위를 확장합니다.

자료 보기 →

자바스크립트 ES6 [입문부터 고급까지]

자바스크립트 ES6 [입문부터 고급까지] 과정에서 화면 표시와 다른 JavaScript 동작의 기본을 보강합니다.

자료 보기 →

모바일 웹 관련 과정 비교

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

자료 보기 →

실습과 복습 계획

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

자료 보기 →

모바일 홈페이지 제작

모바일 홈페이지 제작

모바일 홈페이지 제작

강의구성
(20강) 전체 : 18시간 1분|평균 : 54분2초

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

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

수강료
330,000원165,000원

?

수강 전 꼭 확인하세요

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

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

A

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

01.49분 메인 페이지의 탭 메뉴
기본 메인 페이지에 대한 탭속성과 검색바 속성에 대해서 학습하고, 탭메뉴를 활성화하는 방법에 대해서 실습해봅니다.

완성 사이트 살펴보기, html 문서 살펴보기, margin, padding, font-family, font-size, background:url, position:relative, width, height, background-color, display:inline-block, position:absolute, text-decoration:none, font-size, font-weight:bold, position: absolute, display:block, font-size, font-weight:bold, position: absolute, gnSearchBoxColumn, padding, width, background-color, width, height, padding, margin, border, input, font-size, height, float, position, clear, clear:both, text-align:right, vertical-align:middle, margin, position:absolute
02.56분 메인 페이지의 nav 메뉴
gradient 속성을 이용한 배경이미지가 어떻게 적용되는지 학습해보고 nav메뉴가 dispaly:none 속성과 overflow:hidden속성 적용에 따라 차이의 모습을 학습합니다.

width, height, overflow:hidden, letter-spacing, display:inline-block, border-right, text-align:center, box-shadow:inset, content:, font-family, font-weight, font-size, letter-spacing. position, border-right, text-align:center, box-shadow:inset, background-image, font-family, font-weight, font-size, letter-spacing, position, text-align, height, box-shadow:inset, background-image, font-family, font-weight, letter-spacing, position:relative, background-size, text-align:center, padding, display:block, text-transform:lowercase, background:url, text-align, line-height, signIN
03.54분 로그인 페이지에서의 nav 메뉴
로그인 페이지의 기본폼에서 nav 메뉴는 어떻게 적용되는지 학습하고 SearchBox에 대한 속성 지정방법에 대해서 실습을 진행합니다.

로그인페이지 살펴보기, margin, padding, font-family, font-size, position:relative, background:url, text-decoration:none, max-width, height:auto, outline, border, background-color, position:absolute, padding, width, clear:both, display:block, webkit-appearance, webkit-border-radius, vertical-align:middle, margin-bottom, overflow:hidden, letter-spacing, box-shadow:inset, background-image, text-decoration:underline, input type
04.51분 소개페이지의 table정렬
소개페이지의 이미지정렬할때의 CSS속성에대해서 학습해보고 모바일에서 적용되는 footer메뉴 속성에 대해서 실습을 진행합니다.

상품 소개 페이지 적용하기, 페이지 완성 화면 살펴보기, width, height, margin, padding, font-weight, text-decoration, clear, background, width, overflow, mobille css, margin, font-size, min-height, text-size-adjust, a, a:visited, a:hover, input, :before, pointer-events
05.56분 table로 지정된 페이지 하단 list메뉴와 footer메뉴
하단에 생성되는 footer메뉴에 대한 이미지 지정과 list메뉴에 대한 정렬 속성을 적용시켜보고 실습을 진행합니다.

a:hover, input type=email, footer_content, white-space, list_item, background, display, text-decoration, font-style, font-size, font-family, word-wrap, text-align, border-color, 완성화면 비교하기, sign-up-email, sign-up-button
06.56분 search box 영역으로 메뉴 만들기
table cell로 정의된 페이지에 search box 영역을 만들고 input type을 활용한 메뉴 만들기

webkit-text-size-adjust:none, font-family, margin, padding, position, overflow:hidden, box-shadow, border, display:table, section, display:table-cell, vertical-align:middle, white-space:nowrap, a:active, a:visited, a:link, text-decoration:none, webkit-tap-highlight-color:rgba, background-image, background-position, srchCl, .myBCl, text-align:center, cursor:pointer, background-position, display:table, vertical-align:middle, margin-right, background-color:transparent, line-height, font-size
07.52분 table cell 이용한 search icon 영역만들기
tablecell을 지정해서 icon영역 지정하고 content영역의 속성을 적용시켜봅니다.

padding, background-color, background gradient, border, vertical-align:middle, display:inline-block, text-align:center, z-index, box-shadow, hidden, background:transparent, background-size, background-position, padding, line-height, overflow:hidden, white-space:nowrap, list-style:none, word-wrap:break-word, font-weight, background-image
08.54분 footer 메뉴 영역설정과 image배치작업
footer section을나누고 section마다 영역을 지정한 속성을 각각 넣어보는 작업을 진행합니다.

footer메뉴와 하단메뉴 설명, display:inline-block, arrowSprite, background-position, morewrap, text-align:center, font-family, position:absolute, display:block, border-bottom:none, background-size, visibility:hidden, 로그인 페이지 살펴보기, 적용되는 속성 묶어서 지정하기
09.58분 sign in 페이지작업하기
page작업에 필요한 속성외에도 전체적인 속성을 지정해주는 css속성 적용방법에 대해서도 적용하여 확인해봅니다.

로그인페이지 살펴보기, vertical-align:middle, white-space:nowrap, font-weight:bold, word-wrap:break-word, footlist, display:block, line-height, line-height, visit_count, font-size, text-decoration:underline, text-overflow:ellipsis, input type, appearance, primary, text-shadow, box-shadow
10.50분 기본 구성된 page의 css적용
기본page의 구성을 살펴보고 css속성 적용의 방법에 대해서 실습합니다.

하단메뉴 적용하기, display:block, border-radius, text-align:center, vertical-align:middle, background-color, 이미지로 구성된 메뉴 살펴보기, text-size-adjust:none, background-attachment, border:none,outline:none, bannerContainer, menu, text-align:center, position:relative, footer, text-transform:uppercase, cursor:pointer, font-size, section, errormessage
11.59분 list로 구성된 page작업
list로구성된 메뉴항목을 table cell로 나누어 각 속성을 지정하는 작업을 진행합니다.

리스트로 구성된 메뉴작업 살펴보기, 완성화면 비교하기, text-size-adjust, list-style-image, color: inherit, text-decoration, ul, li, repeat-x scroll, display: block, text-shadow, clear: left, overflow: hidden, background-color, repeat-x scroll, clear: none, border-radius
12.1시간 4분 list로 작성된 table 정렬
section영역을 나누어서 작성된 page영역을 정렬해서 속성을 지정해보는 작업을 해봅니다.

리스트메뉴 구성 살펴보기, font-weight, clear: left, font-weight, title-wrapper, vertical-align: middle, text-shadow, next-link, current-page, background: transparent, search-field, clear: right, display: block, small, medium, large, font-weight, display: block, 완성된 페이지 작업 확인
13.49분 list 메뉴의 정렬과 배경지정
list로 작성된 메뉴들을 정렬하고 배경적용에대한 속성지정에 대해서 작업과 결과를 확인해봅니다.

기본 메인페이지 살펴보기, linear-gradient, text-decoration: none, padding, text-indent, list-style: none, display: block, overflow: hidden, clearfix:after, text-transform: uppercase, text-rendering: optimizeLegibility, display: inline-block, float: none, subheading, nav-section a
14.50분 메인 페이지에 적용하는 list 목록 만들기
list로작성된 메뉴를 가지고 메인 페이지에서 적용하는 속성 지정에 대해서 알아보고 그 결과를 확인해봅니다.

display: none, background:none, text-shadow:none, clear: both, float: none, white-space: normal, margin-bottom, background-size, position: static, mobile-view 속성 적용하기, arrow, background, notched-left:before, box-sizing:border-box
15.56분 main & canvas 클래스를 이용한 페이지 구성
main & canvas을 가지고 메인 페이지구성에 대해서 알아보고 Heder 상위메뉴만들기

페이지구성 살펴 보기, -webkit-text-size-adjust, overflow-x: hidden, clear: both, background, filter, overflow: hidden, float: right, box-sizing: border-box, white-space: nowrap, cursor: pointer, box-sizing: border-box, padding-top, background-position, clear: both, background: url, padding, line-height, cursor: pointer
16.53분 listSection과 listItem을 가지고 페이지만들기
listItem을 가지고 메인 페이지구성에 대해서 알아보고 thumbList에 대한 정렬을 이용해 mainContainer 구성하기

리스트로 구성된 메뉴작업 살펴보기, box-sizing: border-box, float: left, copyright, 페이지구성 살펴 보기, a:hover, header, background, overflow: hidden, text-indent, position: absolute, nav, list-style-type, background, overflow: hidden
17.55분 Section content에 대한 메뉴 리스트 구성하기
Section content에대한 영역을 가지고 페이지를 구성하는 작업을 진행합니다.

메뉴작업 살펴보기, section, box-sizing: border-box, line-height, float: left, font-size, margin, padding, width: auto, font-weight: bold, text-transform: uppercase, border-radius, 탭메뉴 비교하기, footer, text-transform: uppercase, width
18.54분 content영역에 로그인 페이지 구성하기
loginForm,textfield 를 이용해 로그인페이지를 구성하고 footer메뉴의 아이콘 이미지 구성에 대해 알아봅니다.

완성 사이트 살펴보기, text-decoration: underline, position: relative, background: transparent, border, text-align: center, section, box-sizing: border-box, font-weight: bold, text-transform: uppercase, footer, display: block, text-transform:none, clear:left, clear:both, padding, 메세지 박스, vertical-align:middle
19.53분 searchForm을 이용한 페이지의 search영역구성
inputSearchBox이용해 리스트를 구성하고 Search영역을 만들어봅니다.

background, video, box-sizing: border-box, font-weight: bold, z-index, float: left, background gradient, margin, list-style-type: none, font-size, margin: 0 auto, text-decoration: none, overflow:hidden, display:block
20.52분 크기를 조절한 list 목록의 페이지구성
메뉴리스트를 구성하고 리스트의 구성 및 배치방법과 각각의 Item 배치에 대해서 실습을 진행합니다.

완성 페이지 살펴보기, opacity, 메뉴 배경설정, 로고 배경설정, list-style: none, box-sizing: border-box, text-shadow, overflow: hidden, text-shadow, vertical-align:middle, overflow: hidden, font-weight: bold, white-space: nowrap, clear:both, display:inline-block, position:absolute

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

💬

알지오 학습·수강 도우미

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

상담 상태 확인 중