모바일 제작 [실무] 강의 기초 부터 실무 인강 알지오 평생교육원 추천강의

기초부터 차근차근 실무까지.
마지막 학습 보장!

모바일 제작 [실무]

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

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

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

수강료
510,000원
255,000원

"5개월" 혜택!

수강 전 자주 묻는 질문

교재 없이? 초보자도 가능 한가요?

본 강의는 교재 없이도 동영상 강의만을 통해 충분히 학습할 수 있도록 구성되어 있습니다. 제공되는 실습 자료를 활용해 따라 하면서 학습하시면, 초보자도 이해하고 따라올 수 있게 설계된 강의입니다.

알지오의 강의특징은 무엇인가요?

저희 강의는 단순한 전문가 촬영본을 넘어섭니다. 전문 편집을 통해 필수 내용만을 선별하고, 불필요한 부분을 제거함으로써 학습 효율을 극대화합니다.

프로그램은 어떻게 구하나요?

알지오 는 원격평생교육원 으로, 프로그램에 대한 정보는 알수 없습니다.

모바일 제작 인강 평생교육원 교육 안내
코드를 수정하고 모든기기(태블릿pc/스마트폰)에서 적용되는 결과값을 실시간으로 보여드립니다. 모바일 페이지는 CSS3를 기반으로 운영되고 있기 때문에 반드시 CSS3의 내용을 알아야만 완벽하게 코딩할 수 있습니다. 또한 실무자 초빙 강의를 통해 현재 운영되는 다른 모바일 제작기법을 배워봅니다.

단기 습득!

2년 연속 IT교육 인강부분 1위 알지오 (근거자료)

2003년부터 운영해온 수많은 데이터베이스를 기반으로

단기 습득할 강의

로 제공합니다!
늦지 않았습니다. 알지오에서 지금부터 시작하세요!

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

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

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

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

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

productSaleTitle/상품명&세일마크/세일가 섹션정의/미리계산기 디자인/텍스트 컬러변경/select/네비게이션 탭구현/nav a.on/[01:02:43] 동일한 배경이미지//[01:06:46] 출력값확인
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 강의 질문&답변