ONLINE CLASS

모바일 제작 [실무]

COURSE FOCUS

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

모바일 웹페이지의 문서 구조를 작성하고 로고·검색바·메뉴 버튼의 위치와 색상, 그림자를 조절하며 화면을 구성합니다. CSS3로 목록의 모양과 텍스트를 디자인하고 아이폰과 안드로이드에서 구현 결과를 확인하는 제작 과정을 따라갑니다. 메뉴리스트의 스마트폰 출력과 PC용 페이지 전환도 다루어 접속 환경에 따른 홈페이지 구성 방식을 살펴봅니다.

?

수강 전 꼭 확인하세요

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

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

A

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

◆

기업이 선택한 신뢰 강의

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

자세히 보기 >

REAL REVIEW

수강생 리얼후기!

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

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

RECENT Q&A

최근 수강질문

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

전체 수강질문 보기

ALZIO DEEP GUIDE

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

41강은 모바일 상단·메뉴·로그인·목록에서 viewport·미디어쿼리·표준화와 게시판·지도·SNS·QR·PC 전환까지 이어지는 제작 과정입니다. 일부 회차의 2014년 녹화 표기를 현재 환경과 구분합니다.

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

모바일 제작 [실무] · 41강 · 22시간 58분

01

모바일 웹은 무엇인가

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

02

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

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

03

모바일 웹의 핵심 기능

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

viewport·미디어쿼리

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

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

유연한 레이아웃

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

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

메뉴·폼·목록

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

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

터치·키보드

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

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

브라우저 API·연결

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

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

PWA·네이티브와 차이

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

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

04

이 과정의 실제 작업 흐름

1~14강은 상단·선택 버튼·메뉴·목록·로그인·페이지 번호·하단이며 15~20강은 viewport·@media·jQuery 소개·디버깅·웹표준 모바일 레이아웃입니다.

21~34강은 실제 기기 확인·검색·아이콘·소개·로그인·게시판 목록과 읽기, 35~41강은 쓰기·전화·지도·상품목록·SNS·QR·에뮬레이터·PC 전환입니다. PWA 서비스워커나 네이티브 앱 제작 전체로 확대하지 않습니다.

상단·메뉴·목록
로그인·하단
viewport·표준화
페이지·게시판
지도·SNS·QR
기기·PC 전환

05

핵심 구조를 이해하는 방법

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

06

실무 적용과 결과 확인

1~20강의 구조를 복습하며 긴 메뉴와 글·가로/세로 전환을 점검해 보세요. 폭·여백·상속 관계의 변경 원인을 기록하는 추가 연습입니다. CSS의 둥근 버튼 표현과 실제 터치 조작을 따로 확인합니다.

21~41강은 폼·게시판·외부 링크·지도와 PC 전환을 나누어 시험 계획을 세우세요. 실제 브라우저·입력·외부 서비스 조건은 현재 환경에서 다시 검토해야 합니다. 당시 QR·SNS API가 지금 그대로 동작한다고 보장하지 않습니다.

07

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

전문 축은 작은 화면에서 목록과 게시판·회사·학습 정보를 구성하는 것입니다. 27~37강은 글·정보·상품을 서로 다른 화면에 배치하는 연결 구간입니다.

15~20강의 viewport·@media와 40~41강의 기기/PC 전환은 서로 다른 대응 전략입니다. 반응형과 별도 화면 전환의 비용을 비교하는 후속 학습에 활용할 수 있습니다. 실제 앱 배포 기능을 직접 회차에 추가하지 않습니다.

08

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

20강 설명에는 2014년 2월 녹화가 명시됩니다. 전체 과정의 모든 회차 촬영일과 jQuery·PHP·브라우저 버전은 확정하지 않습니다. Safari 5·아이폰 3G/4G·Eclipse 등 당시 표기를 현행 기본 환경으로 안내하지 않습니다.

현재 viewport·미디어쿼리의 원리는 참고 기준이며 지도·SNS·에뮬레이터·PC 판별 코드는 재검토가 필요합니다. 현재 Flexbox·Grid·PWA 전체는 직접 학습으로 확인되지 않습니다. 오래된 출력 우회법을 모든 현재 브라우저에 적용한다고 단정하지 않습니다.

09

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

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

목적에 맞는 기술 선택과 비교
선택지	작업 접근	이 강좌와의 관계
409번	표준화·게시판·외부 서비스·기기 전환	41강 실무 연결
502번	메뉴·table-cell·목록·폼	20강 페이지 조립
네이티브 앱	플랫폼 SDK·앱 배포	모바일 웹과 별도 환경

10

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

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

기술개념과 알지오 커리큘럼 연결
기능·개념	무엇인가	실무 의미	강좌 회차	학습 상태
상단·목록·폼	HTML·CSS 조립	페이지 기본	1·2·3·4·5·6·7·8·9·10·11·12·13·14강	강좌에서 직접 학습
표준화·가변 화면	viewport·미디어쿼리·디버깅	화면 대응	15·16·17·18·19·20강	강좌에서 직접 학습
서브·게시판	기기 확인·폼·읽기	콘텐츠 흐름	21·22·23·24·25·26·27·28·29·30·31·32·33·34강	강좌에서 직접 학습
외부 연결·전환	지도·SNS·QR·기기·PC	당시 운영 흐름	35·36·37·38·39·40·41강	강좌에서 직접 학습

11

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

모바일 웹이 네이티브 앱인가?

브라우저와 플랫폼 앱은 다릅니다. 40~41강의 기기 설명을 앱 전체 제작으로 확대하지 않습니다. 실행 환경을 구분하세요.

viewport만 넣으면 반응형인가?

레이아웃과 조건별 스타일이 필요합니다. 15강의 @media를 구조와 연결합니다. 태그 하나로 모든 화면이 해결되지는 않습니다.

로그인 화면을 만들면 인증도 완성인가?

UI와 서버 인증은 다릅니다. 7~9·29~30강의 공개 범위를 확인합니다. 보안 체계 전체 학습으로 확대하지 않습니다.

옛 지도·SNS 호출이 현재도 되나?

서비스와 API 조건을 다시 확인합니다. 35·38강은 당시 연결입니다. 최신 호환을 보장하지 않습니다.

41강이 모두 2014년 촬영인가?

20강의 녹화 표기만 확인됩니다. 전체 촬영일은 미확정입니다. 범위를 넘어 날짜를 확정하지 않습니다.

PWA 오프라인 앱도 제작하나?

공개 목록에서 확인되지 않습니다. 현재 웹의 후속 기술 참고입니다. 모바일이라는 이름만으로 기능을 추가하지 않습니다.

12

다음 학습 방향

모바일 홈페이지 제작

모바일 홈페이지 제작 과정에서 메뉴·목록·폼의 다른 페이지 조립 실습을 비교합니다.

자료 보기 →

HTML5 CSS3 실무

HTML5 CSS3 실무 과정에서 현재 HTML·CSS의 기본 문법을 보강합니다.

자료 보기 →

모바일 웹 관련 과정 비교

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

자료 보기 →

실습과 복습 계획

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

자료 보기 →

모바일 제작 [실무]

모바일 제작 [실무]

모바일 제작 [실무]

강의구성
(41강) 전체 : 22시간 58분|평균 : 33분36초

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

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

수강료
330,000원165,000원

?

수강 전 꼭 확인하세요

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

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

A

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

01.35분 모바일 웹제작의 기본, body, header 코딩
강의진행방식설명, !doctype html 문서선언, 언어선언 및 속성

강의진행방식, 작업시 유의사항, 기본 숙지 사항, 제공 소스, ANSI를 UTF-8로 변경, 모바일 기본사항, body 선언, 꿀팁, overflow:hidden, 꿀팁
02.39분 로고 & 검색바 & 메뉴 셋팅
로고와 검색바, 검색버튼, 메뉴버튼들의 위치를 설정하고, 세부적인 색상과 그림자를 셋팅하는 실습을 진행합니다.

logoimg, webkit-box-shadow, 꿀팁, white-space:nowrap, 꿀팁, top_navtab_c, .top_navtab_c, margin, 꿀팁
03.50분 상속관계 & select button 세팅
select button을 만들고 border-radius태그를 사용한 세부적인 세팅 방법과 개체의 정렬에 대해 학습합니다.

셀렉트 만들기, .lec_intitle, 꿀팁, .yes_lec_intitle select, 꿀팁, .header 직접적용, .search_a, 꿀팁, .top_navtab_a, select, 꿀팁
04.49분 div에 tong 코딩
tong안에 menuline & newslist 을 만들어서 아웃라인을 잡아주고, 메뉴틀을 만들어서 요소들을 세팅하고 div로 마무리하는 내용을 학습합니다.

div, .min_menuline, 꿀팁, .min_menuline_abc_on, section, 꿀팁, div id=“tong”, div class, section 설정값, li class=“listone”, a class=“listone_a”
05.35분 twitter baner & htitle 코딩
twitter baner & htitle를 세팅하면서 a링크 적용과, 객체의 정렬 및 텍스트의 세부적인 스타일을 설정하며 학습합니다.

font-size, .twitter_baner span, .htitle, 꿀팁, .htitle_ul li img, 꿀팁, 꿀팁, ul class=“htitle_ul”, .htitle_ul li img, 꿀팁
06.39분 ul과 li태그로 테이블화 작업 & 이미지 한장으로 여러개 표현하기.
ul과 li 태그만으로 table & sell처럼 보이게 출력하는 방법과 이미지 한장으로 좌표를 이용해 여러가지의 메뉴를 표현하는 방법에 대해서 심층적으로 파고들며 학습합니다.

꿀팁, div로 notable세팅, notable 정의, 꿀팁, display:table, vertical-align:top, 꿀팁, .notable ul li a span, div class=“notable”, 꿀팁, span 상속관계
07.40분 로그인창 세팅 & 코딩 (1)
로그인바 내부 테두리를 둥글게 만들어 주면서 이미지를 사용하지 않고 오직 html5 css3만을 적극 활용해 코딩하는 학습을 합니다.

꿀팁, section 로그인폼, width와 padding, 로그인 바, 꿀팁, #id.bgon, 상속 관계, p class=“aone”
08.34분 로그인창 세팅 & 코딩 (2)
로그인바 내부 테두리를 둥글게 만들어 주면서 이미지를 사용하지 않고 오직 html5 css3만을 적극 활용해 코딩하는 학습을 합니다.

.atwo 로그인버튼, css3 버튼, 꿀팁, margin, 이미지 같은 버튼 디자인, 꿀팁, 로그인유지 상속관계, “foota”상속관계
09.42분 로그인버튼 코딩과 여러 목록을 유형별로 만들기 (1)
로그인 버튼을 이미지같이 디자인하는 코딩방법과 여러 목록을 유형별로 만들어 디테일 하게 디자인하는 방법에 대해 학습합니다. (휴대기기 가로로 눕혀 볼 수 있도록 코딩하기)

.login_comc, .buttonup_a a, 꿀팁, buttonup_a, .mum_list, .mum_list .category .tic, 꿀팁, .mum_list .momtxt strong, 꿀팁
10.41분 여러 목록을 유형별로 만들기 (2)
유형별로 만들어진 목록의 카테고리와 텍스트를 디테일하게 디자인하는 방법에 대해 학습합니다.

price .num, price .prodc, period, buy, li 상속관계, momtxt strong 상속관계, .mum_list, onec, class="alist" 상속관계, 꿀팁
11.26분 여러 목록을 유형별로 만들기 (3)
유형별 목록의 카테고리에 이미지를 넣지 않고 css3만을 사용해서 볼록하게 디자인하는 방법과 디테일한 텍스트 디자인에 대해 학습합니다.

목록유형 NO3, mum_listsam li, display:block, Helvetica, li 상속관계, 꿀팁
12.34분 페이지목록숫자 블록처리
div를 하나로 만들어서 a가 있다면과 span 있다면 span/span이 있다면 으로 이루어지는 css상속관계에 대해 학습합니다.

span, pagess a, .pagess em, a, em 여백주기, 꿀팁, pagess em, pagess a.lr_ic, pagess a.next span span, 꿀팁, em 상속관계, 꿀팁
13.53분 페이지기본제작 및 SNS블록, 웹툰출력방법
CSS3의 gradient와 radius 장점을 백번 활용해서 완벽한 버튼을 제작하는 방법에 대해 학습합니다.

mainwrap, wrap_title .subjec, subjec .cp, 꿀팁, sns 블록 제작, text-align:center, gradient (linear), twitter 버튼, 꿀팁, h1 상속관계, 꿀팁, snsbgic 상속관계, 꿀팁
14.32분 실용적인 페이지하단
최종적인 페이지 마무리와 기존의 간단한 모바일하단 보다는 실용성있고, 디자인적인 하단 부분을 제작하고. 가로 세로 여백을 동일하게 주는 방법에 대해 학습합니다.

footer, overflow:hidden, 꿀팁, footer address, 꿀팁, a 상속관계
[실무자 초빙 강의] 실무역량 강화를 위한 모바일웹제작 실전편
15.1시간 17분 실무능력 향상을 위한 특별강의 ! 모바일에 따른 viewport정의, css3 @media
모바일에 따른 viewport선언을 보여드리며, html5, css3 속성을 이용한 상단 디자인을 정의합니다. 더 나아가 css3의 @media속성을 이용해 가변적인 스크린 크기에 대응하는 방법에 대해 알아봅니다.

실전웹페이지 제작, #wrap, 우측로고위치, keyword_box input, 상단메인메뉴, 창너비 축소, 모바일특가 section, 출력값확인, 상품이미지정의, 상품가격정의
16.1시간 24분 실무능력 향상을 위한 특별강의 ! 실무적으로 접근하는 레이아웃 구성 & 제이쿼리의 사용
html5, css3를 이용해 실제 사용되는 홈페이지의 레이아웃을 구성하며 실무적으로 접근하고 있습니다. 또한 모바일에서 필수적인 제이쿼리 사용에 대해 간략히 설명합니다.

@media, display:table-cell, 고객센터 베너, 출력값확인, .bestPrice_banner img, 상품이미지축소, 출력값확인, 좌우버튼삭제, overflow:hidden 삭제, .carouselSet2 ul li:after, 출력값확인
17.1시간 21분 실무능력 향상을 위한 특별강의 ! 표준화 작업을 위한 디버깅 작업
html5로 구성된 섹션들을 정의하고 실습하면서, 실제 실무에서 발생하는 여러 버그들을 해결하는 능력을 키울 수 있도록 강의를 진행합니다.

모바일 특별혜택, .carouselSet a, 금주의 하이라이트, .slide ul li a, 스페셜 쇼핑 CSS, 높이 버그처리, 이미지원본확인, @media, 버튼참조해서 생성, li:nth-of-type(4)
18.1시간 13분 실무능력 향상을 위한 특별강의 ! 실무에 적용하는 HTML5, CSS3 완벽파악
css3속성을 사용하여 실무에서 사용되는 버튼을 제작&홈페이지에 삽입하고, 모바일에서 출력되는 위치별 구성을 상황에 맞도록 배치하기위한 표준화작업을 강의합니다.

footer 정의, 출력값확인, li:nth-of-type(7) a, footer .address, 카피라이트, common 새파일 생성, section class="subTitle", 상단 상품이미지와 버튼, div class="list_btn", -webkit-gradient
19.1시간 7분 실무능력 향상을 위한 특별강의 ! 웹표준 기반의 모바일 레이아웃 만들기
모바일 웹사이트 제작에 웹표준과 HTML5를 활용하려는 웹 퍼블리셔들을 위한 실무강의입니다. HTML5및 CSS3를 적용시킨 모바일웹 제작 기법에 대해 자세히 알려드립니다.

productSaleTitle, 상품명&세일마크, 세일가 섹션정의, 미리계산기 디자인, 텍스트 컬러변경, select, 네비게이션 탭구현, nav a.on, 동일한 배경이미지, 출력값확인
20.26분 실무능력 향상을 위한 특별강의 ! 웹표준 기반의 모바일 레이아웃 만들기
모바일 웹사이트 제작에 웹표준과 HTML5를 활용하려는 웹 퍼블리셔들을 위한 실무강의입니다. HTML5및 CSS3를 적용시킨 모바일웹 제작 기법에 대해 자세히 알려드립니다.[2014년 2월 녹화]

알지오 모바일 내용, 목록 태그, ab_list 정의, link와 link a 로 정의, 중간메뉴 보기, 각 선택자의 css와 end css, CSS로 제작한 세개, 항상 떠있는 배너, 배너 이미지 따로
두번째 이야기
21.25분 모바일 홈페이지 기본부터 쉽게합시다~!!
이론이 아닌 실제 제작하면서 스마트폰으로 실시간 확인하는 강의 입니다. 사용된 스마트폰 운영체제는 아이폰과 안드로이드 에서 실시간 확인하며 첫시간이라 기본적인 내용이며 최종적인 완성작을 보여드립니다.

이런분들이 이용하세요, 스마트폰 및 pc용 자동이동, 기본 웹문서 선언, 바로가기 아이콘, CSS파일 기본설정, 완성작 보기, 모바일홈페이지 제작한 이유
22.25분 전체 레이아웃, 상단BG 로고 마무리
스마트폰 이동및 보안소스 등을 설명하고 기본 CSS선언 을 합니다. 사용하지 않았던 fieldset, legend 내용을 진행하고 스마트폰 가로 세로 에 알맞게 반응할 BG와 고정될 로고까지 작업합니다.

모바일용 이동소스, 툴숨김, vertical-align:top, ul, dl, ol, fieldset, legend, container, min-width:320px;max-width:100%, header, logobg, logobg img
23.25분 검색바 넣기
파비콘이 않되는 운영체제와, webkit엔진 CSS작업시 문제점 확인 입니다, 사파리가 5로 업그레이드 되면서 발생되는문제까지 알려드리고 대응할 방식까지 전부 선언합니다.

아이폰 파비콘 안드로이드 NO, body 에 많은적용, -webkit-text-size-adjust:none, 적용된 검색바 디자인기능, Search,, Search_h overflow:hidden;, Search_w, position:relative 필요한 이유, Search .in_w, Search .in, -webkit-appearance:none
24.18분 아이폰 업데이트 후 변경사항, 상단메뉴 넣기
아이폰4G와 3G 시절의 브라우저 차이 대략난감했던 경험담, 상단 메뉴를 넣으면서 BG가로 및 세로라인 과 구분 이미지 를 25%로 설정해서 보여주는 것 까지 합니다.

사파리버전업이후 변경사항, .Search in_ic, vertical-align:middle, top_m, top_m ul li, top_m li.noo, top_m li a, wrap, -webkit-border-radius: 15px
25.18분 메인 아이콘 두가지 유형
기본아이콘의 가로세로 변경시 동일한 여백과 내용으로 출력되고 아래에 두가 지 아이콘도 같은방식이지만 다르게 출력되는 걸 확인할수 있습니다.

가로세로 비율, 메뉴안내, Mine position:relative, Mine ul, Mine li display:inline-block, 여백주고 가운데정렬 중요, 메뉴별 클래스 디자인, 링크가 있다면 display:block, Mine2 아래아이콘 배치, Mine2 에 a가 있다면
26.18분 하단출력
하단에 출력되는 메뉴들과 카피라이트 가운데 정렬등의 배치를 의외의 간단한 작업으로 출력되는 걸 확인할수 있습니다.

footer, footer .menu, position:relative, footer span b, footer menu2, footer 내용 인쿠르드
27.19분 폰트 반드시em처리, 서브페이지 기본틀
상단에 최소한의 자리만 잡는이유를알려드리고 앱이정말 필요한 이유를 알려드리고 직접 상단작업을 마무리 합니다.

em으로 해야하는 이유, logobg_sub, logobg_sub img, header h2, header h1, header h3
28.17분 테이블 없이도 dl로 충분합니다.
회사소개의 dl처리로 인한 내용을 셋팅하는 부분을 강의하며 ceo사진과 동시에 박스안에 내용을 쉽게 넣는 부분까지 완벽히 강의합니다.

wrap_sub, sub_page_a, sub_page_a dl, sub_page_a dl dt, sub_page_a dl dd, sub_page_a dl.aw, aw dt dd p, sub_page_a p span h1
29.19분 로그인 코딩
배경bg로 하는것이 아닌 div로 이중테두리로 하며 스마트폰이나 타블릿 컴 모두에서 도 동일한 %로 나오도록 작업합니다.

login_bak1 ~ 2, login, id pw, inn
30.17분 로그인 반드시 입력할 내용, 학습정보 코딩
로그인창에서 보안로그인 및 반드시 알고 계실내용과 동시에 내 학습정보의 내용을 class코딩및 기존내용에서 몇가지를 추가하게 됩니다.

login span ~ b, sub_page_noa p span, sub_page_b~h1~h2~span
31.17분 메뉴리스트의 정의
게시판부터 어지간한 웹메뉴의 스마트폰출력 용으로 사용하실수 있도록 기본적인 내용부터 실무모두를 다루고 있습니다.

menu_listA, menu_listA ul li, menu_listA ul li a, menu_listA ul li .ic1
32.20분 테이블 셋팅 및 li 목록메뉴
웹표준에서 강의한것 처럼 justify 의 필요성을 알려드리고, 강의맵과 학과소개 리스트에내용을 점층적으로 선언합니다.

text-align justify, map_title_a, table_ex ~ pakTitle, table 선언, header h4 ~ a, menu_listB
33.21분 기존 테이블 게시판 LI 로 튜닝하기
테이블로 작성된 게시판 에 db를 건드리지 않고 ul만수정하기 위한 어려움, 하지만 실제 li테그로 연동해서 내용을 변경하는 것 까지 모두 보여드립니다.

기존게시판 에로사항, sub_page_c, menu_listC ~ li ~ a, title, sub_page_c as bs
34.21분 기존 테이블 게시판 LI 로 튜닝하기 2
게시판 리스트 가 종료되고 글보기 내용 및 목록리스트 1~5 박스형태 와 나머지 아이콘 을 배치합니다.

sub_page_c memo, sub_page_c ~ cs ~ img, bord_foota ~ b, bord_footb p img
35.17분 글쓰는곳, 전화, 홈페이지에 구글API 맵표시
게시판 기능 최종마무리 와 함께 안드로이드 에서는 따로 링크를 해줘야 전화연결되는 것 완성하고 가장핵심은 구글API맵 입니다. 스마트폰은 이동성 이기때문에 회사홈페이지 지도를 실시간으로 보여줄수 있으며 쉽게사용하도록 구글맵 사이트 삽입강의를 해드립니다.

글 입력란 수정하기, 스마트폰 전화링크, 구글API 맵
36.24분 일반, 갤러리, 웹진 게시판, 상품목록까지 li~ 완벽마스터
상품목록 도 li로 통일하고, 일반 이나 갤러리, 웹진형 게시판 도 쉽게 사용하세요~ 강의를 이용하신 분들은 바로 사용하도록 해당소스를 유형별로 강의합니다. 유형별 웹표준에서 정의를 완벽히 배울수 있는 내용입니다.

li_proj, li_proj h1, li_proj .asnew, li_proj .asnew li, li_proj .asnew li .spa, li_proj .asnew li .spa img, li_proj .asnew li .ac, li_proj .asnew li .spa .ac img
37.24분 일반, 갤러리, 웹진 게시판, 상품목록까지 li~ 완벽마스터 2 상황별 변수
상품목록 도 li로 통일하고, 일반 이나 갤러리, 웹진형 게시판 도 쉽게 사용하세요~ 강의를 이용하신 분들은 바로 사용하도록 해당소스를 유형별로 강의합니다. 유형별 웹표준에서 정의를 완벽히 배울수 있는 내용입니다.

li_proja .asnew li .lopl, li_proja .asnew li .ada, li_proja .asnew li .pd, li_proja .asnew li .price, li_proja .asnew li .ic1, li_proja li a
38.30분 SNS마케팅 실무
친구에게 알리기. 트위터부터 페이스북까지 모두 글을 남길 수 있게 하세요. 반드시 키값 적용으로 단축URL로 작성되게 해야 모든 브라우저에서 문제가 없습니다. QR코드 또한 상품별로 자동화해서 모바일과 PC용이 동일하게 나오게 하세요.
39.3분 QR 코드 및 앱의 중요성 캠코더 시연
QR 코드 및 앱의 중요성에 대해 캠코더 시연을 합니다.
40.33분 안드로이드 및 아이패드 관련 에뮬레이터 설치 및 이후방향
안드로이드는 이클립스를 설치하고 전문적으로 설치작업을 해야 합니다. 해당내용은 김철수(앱강의) 강사님이 직접 설치과정 및 실행강의를 해드리고 있습니다. 목적은 패드를 가지고있지 않더라도 원할한 디자인작업을 하기 위함이며, 모바일홈페이지와 어떤 분리작업이 필요한지 이후방향을 제시해드립니다.
41.10분 pc용 이동 필요성 및 소스
아이폰, 안드로이드 두대를 카메라로 녹화해서 구현실습합니다. iMAC와 태블릿의 접속시 발생되는 한계를 PC용으로 접속되게 전환해야하는 이유와 방법모두 알려드리고, 직접사용하실수 있도록 PC용 소스를 제공해드립니다. 사용된 기술은 jQuery UI / PHP

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

💬

알지오 학습·수강 도우미

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

상담 상태 확인 중