모바일 제작 [실무]

41회차 속성과정
전체 : 22시간 58분|회차당 평균 : 33분36초

이용기간 2개월

전문강사 : 알지오 R&D [IT] 2명

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

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

책갈피[00:00] 강의진행방식/[02:26] 작업시 유의사항/[03:51] 기본 숙지 사항/[05:46] 제공 소스/[11:25] ANSI를 UTF-8로 변경/[14:33] 모바일 기본사항/[20:02] body 선언/[29:40] 꿀팁/[35:11] overflow:hidden/[35:13] 꿀팁
02.39분 로고 & 검색바 & 메뉴 셋팅
로고와 검색바, 검색버튼, 메뉴버튼들의 위치를 설정하고, 세부적인 색상과 그림자를 셋팅하는 실습을 진행합니다.

책갈피[00:38] logoimg/[05:51] webkit-box-shadow/[11:35] 꿀팁/[16:27] white-space:nowrap/[21:12] 꿀팁/[26:19] top_navtab_c/[32:20] .top_navtab_c/[36:14] margin/[38:12] 꿀팁
03.50분 상속관계 & select button 세팅
select button을 만들고 border-radius태그를 사용한 세부적인 세팅 방법과 개체의 정렬에 대해 학습합니다.

책갈피[01:48] 셀렉트 만들기/[06:13] .lec_intitle/[09:39] 꿀팁/[16:23] .yes_lec_intitle select /[23:35] 꿀팁/[28:35] .header 직접적용/[35:58] .search_a/[40:24] 꿀팁/[46:02] .top_navtab_a/[48:53] select/[49:06] 꿀팁
04.49분 div에 tong 코딩
tong안에 menuline & newslist 을 만들어서 아웃라인을 잡아주고, 메뉴틀을 만들어서 요소들을 세팅하고 div로 마무리하는 내용을 학습합니다.

책갈피[03:15] div/[11:38] .min_menuline/[16:32] 꿀팁/[22:51] .min_menuline_abc_on/[27:28] section/[32:49] 꿀팁/[37:50] div id=“tong”/[42:09] div class/[44:45] section 설정값/[47:52] li class=“listone”/[48:31] a class=“listone_a”
05.35분 twitter baner & htitle 코딩
twitter baner & htitle를 세팅하면서 a링크 적용과, 객체의 정렬 및 텍스트의 세부적인 스타일을 설정하며 학습합니다.

책갈피[00:26] font-size/[05:23] .twitter_baner span/[10:30] .htitle/[10:39] 꿀팁/[16:13] .htitle_ul li img/[17:38] 꿀팁/[26:19] 꿀팁/[26:49] ul class=“htitle_ul”/[30:21] .htitle_ul li img/[33:50] 꿀팁
06.39분 ul과 li태그로 테이블화 작업 & 이미지 한장으로 여러개 표현하기.
ul과 li 태그만으로 table & sell처럼 보이게 출력하는 방법과 이미지 한장으로 좌표를 이용해 여러가지의 메뉴를 표현하는 방법에 대해서 심층적으로 파고들며 학습합니다.

책갈피[01:43] 꿀팁/[01:57] div로 notable세팅/[05:52] notable 정의/[11:22] 꿀팁/[11:23] display:table/[18:09] vertical-align:top/[23:26] 꿀팁/[24:47] .notable ul li a span/[34:27] div class=“notable”/[36:58] 꿀팁/[38:20] span 상속관계
07.40분 로그인창 세팅 & 코딩 (1)
로그인바 내부 테두리를 둥글게 만들어 주면서 이미지를 사용하지 않고 오직 html5 css3만을 적극 활용해 코딩하는 학습을 합니다.

책갈피[00:37] 꿀팁/[00:39] section 로그인폼/[06:07] width와 padding/[17:20] 로그인 바/[24:06] 꿀팁/[29:56] #id.bgon/[33:09] 상속 관계/[39:13] p class=“aone”
08.34분 로그인창 세팅 & 코딩 (2)
로그인바 내부 테두리를 둥글게 만들어 주면서 이미지를 사용하지 않고 오직 html5 css3만을 적극 활용해 코딩하는 학습을 합니다.

책갈피[00:30] .atwo 로그인버튼/[05:30] css3 버튼/[09:32] 꿀팁/[16:29] margin/[21:38] 이미지 같은 버튼 디자인/[26:25] 꿀팁/[30:46] 로그인유지 상속관계/[34:00] “foota”상속관계
09.42분 로그인버튼 코딩과 여러 목록을 유형별로 만들기 (1)
로그인 버튼을 이미지같이 디자인하는 코딩방법과 여러 목록을 유형별로 만들어 디테일 하게 디자인하는 방법에 대해 학습합니다. (휴대기기 가로로 눕혀 볼 수 있도록 코딩하기)

책갈피[02:32] .login_comc/[06:06] .buttonup_a a/[11:05] 꿀팁/[16:59] buttonup_a/[24:14] .mum_list/[31:15] .mum_list .category .tic/[32:37] 꿀팁/[38:37] .mum_list .momtxt strong/[40:22] 꿀팁
10.41분 여러 목록을 유형별로 만들기 (2)
유형별로 만들어진 목록의 카테고리와 텍스트를 디테일하게 디자인하는 방법에 대해 학습합니다.

책갈피[00:27] price .num/[05:27] price .prodc/[09:32] period, buy/[12:59] li 상속관계/[17:54] momtxt strong 상속관계/[25:16] .mum_list/[32:42] onec/[37:33] class="alist" 상속관계/[39:30] 꿀팁
11.26분 여러 목록을 유형별로 만들기 (3)
유형별 목록의 카테고리에 이미지를 넣지 않고 css3만을 사용해서 볼록하게 디자인하는 방법과 디테일한 텍스트 디자인에 대해 학습합니다.

책갈피[00:56] 목록유형 NO3/[05:28] mum_listsam li/[10:19] display:block/[14:19] Helvetica/[20:24] li 상속관계/[23:17] 꿀팁
12.34분 페이지목록숫자 블록처리
div를 하나로 만들어서 a가 있다면과 span 있다면 span/span이 있다면 으로 이루어지는 css상속관계에 대해 학습합니다.

책갈피[01:21] span/[05:06] pagess a, .pagess em/[09:30] a, em 여백주기/[12:41] 꿀팁/[18:53] pagess em/[21:27] pagess a.lr_ic/[25:54] pagess a.next span span/[29:26] 꿀팁/[32:24] em 상속관계/[33:08] 꿀팁
13.53분 페이지기본제작 및 SNS블록, 웹툰출력방법
CSS3의 gradient와 radius 장점을 백번 활용해서 완벽한 버튼을 제작하는 방법에 대해 학습합니다.

책갈피[04:01] mainwrap/[06:50] wrap_title .subjec/[12:00] subjec .cp/[15:00] 꿀팁/[19:59] sns 블록 제작/[23:13] text-align:center/[26:09] gradient (linear)/[30:15] twitter 버튼/[38:29] 꿀팁/[45:16] h1 상속관계/[50:30] 꿀팁/[51:48] snsbgic 상속관계/[52:18] 꿀팁
14.32분 실용적인 페이지하단
최종적인 페이지 마무리와 기존의 간단한 모바일하단 보다는 실용성있고, 디자인적인 하단 부분을 제작하고. 가로 세로 여백을 동일하게 주는 방법에 대해 학습합니다.

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

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

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

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

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

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

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

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

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

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

책갈피[00:00] 사파리버전업이후 변경사항/[00:49] .Search in_ic/[02:27] vertical-align:middle/[06:44] top_m/[08:03] top_m ul li/[12:18] top_m li.noo/[12:55] top_m li a/[14:54] wrap/[17:18] -webkit-border-radius: 15px
25.18분 메인 아이콘 두가지 유형
기본아이콘의 가로세로 변경시 동일한 여백과 내용으로 출력되고 아래에 두가 지 아이콘도 같은방식이지만 다르게 출력되는 걸 확인할수 있습니다.

책갈피[00:00] 가로세로 비율/[01:07] 메뉴안내/[02:08] Mine position:relative/[03:25] Mine ul /[05:02] Mine li display:inline-block/[06:55] 여백주고 가운데정렬 중요/[09:48] 메뉴별 클래스 디자인/[11:11] 링크가 있다면 display:block/[14:20] Mine2 아래아이콘 배치/[15:30] Mine2 에 a가 있다면
26.18분 하단출력
하단에 출력되는 메뉴들과 카피라이트 가운데 정렬등의 배치를 의외의 간단한 작업으로 출력되는 걸 확인할수 있습니다.

책갈피[01:02] footer/[03:18] footer .menu/[05:50] position:relative/[10:42] footer span b/[13:55] footer menu2/[15:35] footer 내용 인쿠르드
27.19분 폰트 반드시em처리, 서브페이지 기본틀
상단에 최소한의 자리만 잡는이유를알려드리고 앱이정말 필요한 이유를 알려드리고 직접 상단작업을 마무리 합니다.

책갈피[00:00] em으로 해야하는 이유/[09:03] logobg_sub/[10:25] logobg_sub img/[13:06] header h2/[14:43] header h1/[15:45] header h3
28.17분 테이블 없이도 dl로 충분합니다.
회사소개의 dl처리로 인한 내용을 셋팅하는 부분을 강의하며 ceo사진과 동시에 박스안에 내용을 쉽게 넣는 부분까지 완벽히 강의합니다.

책갈피[00:00] wrap_sub/[01:50] sub_page_a/[03:49] sub_page_a dl/[04:06] sub_page_a dl dt/[05:25] sub_page_a dl dd/[06:00] sub_page_a dl.aw/[08:06] aw dt dd p/[13:23] sub_page_a p span h1
29.19분 로그인 코딩
배경bg로 하는것이 아닌 div로 이중테두리로 하며 스마트폰이나 타블릿 컴 모두에서 도 동일한 %로 나오도록 작업합니다.

책갈피[00:00] login_bak1 ~ 2/[07:39] login/[10:25] id pw/[14:50] inn
30.17분 로그인 반드시 입력할 내용, 학습정보 코딩
로그인창에서 보안로그인 및 반드시 알고 계실내용과 동시에 내 학습정보의 내용을 class코딩및 기존내용에서 몇가지를 추가하게 됩니다.

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

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

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

책갈피[00:00] 기존게시판 에로사항/[03:41] sub_page_c/[09:44] menu_listC ~ li ~ a/[12:56] title/[17:35] sub_page_c as bs
34.21분 기존 테이블 게시판 LI 로 튜닝하기 2
게시판 리스트 가 종료되고 글보기 내용 및 목록리스트 1~5 박스형태 와 나머지 아이콘 을 배치합니다.

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

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

책갈피[02:11] li_proj/[06:08] li_proj h1/[09:44] li_proj .asnew/[12:48] li_proj .asnew li/[16:52] li_proj .asnew li .spa/[19:05] li_proj .asnew li .spa img/[20:19] li_proj .asnew li .ac/[22:01] li_proj .asnew li .spa .ac img
37.24분 일반, 갤러리, 웹진 게시판, 상품목록까지 li~ 완벽마스터 2 상황별 변수
상품목록 도 li로 통일하고, 일반 이나 갤러리, 웹진형 게시판 도 쉽게 사용하세요~ 강의를 이용하신 분들은 바로 사용하도록 해당소스를 유형별로 강의합니다. 유형별 웹표준에서 정의를 완벽히 배울수 있는 내용입니다.

책갈피[00:00] li_proja .asnew li .lopl/[03:30] li_proja .asnew li .ada/[06:07] li_proja .asnew li .pd/[07:07] li_proja .asnew li .price/[08:20] li_proja .asnew li .ic1/[10:20] 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