모바일UI 실무 [css2.1] -총 7시간 1분 / 강의당평균 : 20분2초

모바일UI 실무 [css2.1]

전체 : 7시간 1분 / 강의당평균 : 20분2초

01 모바일 홈페이지 기본부터 쉽게합시다~!!

이론이 아닌 실제 제작하면서 스마트폰으로 실시간 확인하는 강의 입니다. 사용된 스마트폰 운영체제는 아이폰과 안드로이드 에서 실시간 확인하며 첫시간이라 기본적인 내용이며 최종적인 완성작을 보여드립니다.

25분

책갈피 : [00:00] 이런분들이 이용하세요 / [04:02] 스마트폰 및 pc용 자동이동 / [07:33] 기본 웹문서 선언 / [10:49] 바로가기 아이콘 / [14:53] CSS파일 기본설정 / [18:26] 완성작 보기 / [23:14] 모바일홈페이지 제작한 이유

02 전체 레이아웃, 상단BG 로고 마무리

스마트폰 이동및 보안소스 등을 설명하고 기본 CSS선언 을 합니다. 사용하지 않았던 fieldset, legend 내용을 진행하고 스마트폰 가로 세로 에 알맞게 반응할 BG와 고정될 로고까지 작업합니다.

25분

책갈피 : [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

03 검색바 넣기

파비콘이 않되는 운영체제와, webkit엔진 CSS작업시 문제점 확인 입니다, 사파리가 5로 업그레이드 되면서 발생되는문제까지 알려드리고 대응할 방식까지 전부 선언합니다.

25분

책갈피 : [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

04 아이폰 업데이트 후 변경사항, 상단메뉴 넣기

아이폰4G와 3G 시절의 브라우저 차이 대략난감했던 경험담, 상단 메뉴를 넣으면서 BG가로 및 세로라인 과 구분 이미지 를 25%로 설정해서 보여주는 것 까지 합니다.

18분

책갈피 : [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

05 메인 아이콘 두가지 유형

기본아이콘의 가로세로 변경시 동일한 여백과 내용으로 출력되고 아래에 두가 지 아이콘도 같은방식이지만 다르게 출력되는 걸 확인할수 있습니다.

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가 있다면

06 하단출력

하단에 출력되는 메뉴들과 카피라이트 가운데 정렬등의 배치를 의외의 간단한 작업으로 출력되는 걸 확인할수 있습니다.

18분

책갈피 : [01:02] footer / [03:18] footer .menu / [05:50] position:relative / [10:42] footer span b / [13:55] footer menu2 / [15:35] footer 내용 인쿠르드

07 폰트 반드시em처리, 서브페이지 기본틀

상단에 최소한의 자리만 잡는이유를알려드리고 앱이정말 필요한 이유를 알려드리고 직접 상단작업을 마무리 합니다.

19분

책갈피 : [00:00] em으로 해야하는 이유 / [09:03] logobg_sub / [10:25] logobg_sub img / [13:06] header h2 / [14:43] header h1 / [15:45] header h3

08 테이블 없이도 dl로 충분합니다.

회사소개의 dl처리로 인한 내용을 셋팅하는 부분을 강의하며 ceo사진과 동시에 박스안에 내용을 쉽게 넣는 부분까지 완벽히 강의합니다.

17분

책갈피 : [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

09 로그인 코딩

배경bg로 하는것이 아닌 div로 이중테두리로 하며 스마트폰이나 타블릿 컴 모두에서 도 동일한 %로 나오도록 작업합니다.

19분

책갈피 : [00:00] login_bak1 ~ 2 / [07:39] login / [10:25] id pw / [14:50] inn

10 로그인 반드시 입력할 내용, 학습정보 코딩

로그인창에서 보안로그인 및 반드시 알고 계실내용과 동시에 내 학습정보의 내용을 class코딩및 기존내용에서 몇가지를 추가하게 됩니다.

17분

책갈피 : [00:00] login span ~ b / [03:00] sub_page_noa p span / [10:17] sub_page_b~h1~h2~span

11 메뉴리스트의 정의

게시판부터 어지간한 웹메뉴의 스마트폰출력 용으로 사용하실수 있도록 기본적인 내용부터 실무모두를 다루고 있습니다.

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

12 테이블 셋팅 및 li 목록메뉴

웹표준에서 강의한것 처럼 justify 의 필요성을 알려드리고, 강의맵과 학과소개 리스트에내용을 점층적으로 선언합니다.

20분

책갈피 : [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

13 기존 테이블 게시판 LI 로 튜닝하기

테이블로 작성된 게시판 에 db를 건드리지 않고 ul만수정하기 위한 어려움, 하지만 실제 li테그로 연동해서 내용을 변경하는 것 까지 모두 보여드립니다.

21분

책갈피 : [00:00] 기존게시판 에로사항 / [03:41] sub_page_c / [09:44] menu_listC ~ li ~ a / [12:56] title / [17:35] sub_page_c as bs

14 기존 테이블 게시판 LI 로 튜닝하기 2

게시판 리스트 가 종료되고 글보기 내용 및 목록리스트 1~5 박스형태 와 나머지 아이콘 을 배치합니다.

21분

책갈피 : [00:00] sub_page_c memo / [02:17] sub_page_c ~ cs ~ img / [11:28] bord_foota ~ b / [15:09] bord_footb p img

15 글쓰는곳, 전화, 홈페이지에 구글API 맵표시

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

17분

책갈피 : [00:00] 글 입력란 수정하기 / [05:27] 스마트폰 전화링크 / [07:40] 구글API 맵

16 일반, 갤러리, 웹진 게시판, 상품목록까지 li~ 완벽마스터

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

24분

책갈피 : [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

17 일반, 갤러리, 웹진 게시판, 상품목록까지 li~ 완벽마스터 2 상황별 변수

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

24분

책갈피 : [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

18  SNS마케팅 실무

친구에게 알리기. 트위터부터 페이스북까지 모두 글을 남길 수 있게 하세요. 반드시 키값 적용으로 단축URL로 작성되게 해야 모든 브라우저에서 문제가 없습니다. QR코드 또한 상품별로 자동화해서 모바일과 PC용이 동일하게 나오게 하세요.

30분

19  QR 코드 및 앱의 중요성 캠코더 시연

QR 코드 및 앱의 중요성에 대해 캠코더 시연을 합니다.

3분

20  안드로이드 및 아이패드 관련 에뮬레이터 설치 및 이후방향

안드로이드는 이클립스를 설치하고 전문적으로 설치작업을 해야 합니다. 해당내용은 김철수(앱강의) 강사님이 직접 설치과정 및 실행강의를 해드리고 있습니다. 목적은 패드를 가지고있지 않더라도 원할한 디자인작업을 하기 위함이며, 모바일홈페이지와 어떤 분리작업이 필요한지 이후방향을 제시해드립니다.

33분

21  pc용 이동 필요성 및 소스

아이폰, 안드로이드 두대를 카메라로 녹화해서 구현실습합니다. iMAC와 태블릿의 접속시 발생되는 한계를 PC용으로 접속되게 전환해야하는 이유와 방법모두 알려드리고, 직접사용하실수 있도록 PC용 소스를 제공해드립니다. 사용된 기술은 jQuery UI / PHP

샘플확인 : 알지오 검색후 -> 강의검색란 -> 모바일 웹페이지 제작 [css2.1]