IT전문교육 의 리더!

HOME>IT전문가>모바일>모바일UI 실무 [css2.1]

모바일UI 실무 [css2.1]

21회차 속성과정|전체 : 7시간 1분|회차당 평균 : 20분2초
430,000260,000
  • 이용기간 2개월|전문강사 : 채명수


Study Guides
가장 기본이 되는 모바일 웹페이지 제작기법입니다. 모바일 뷰어를 통해 손쉽게 제작이 가능하며, 급하게 모바일홈페이지를 제작하고 운영하려는 분들에게 추천하는 강의입니다.
 
  • 0125분 모바일 홈페이지 기본부터 쉽게합시다~!!이론이 아닌 실제 제작하면서 스마트폰으로 실시간 확인하는 강의 입니다. 사용된 스마트폰 운영체제는 아이폰과 안드로이드 에서 실시간 확인하며 첫시간이라 기본적인 내용이며 최종적인 완성작을 보여드립니다.

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

  • 0225분 전체 레이아웃, 상단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

  • 0325분 검색바 넣기파비콘이 않되는 운영체제와, 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

  • 0418분 아이폰 업데이트 후 변경사항, 상단메뉴 넣기아이폰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

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

    책갈피 : [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가 있다면

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

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

  • 0719분 폰트 반드시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

  • 0817분 테이블 없이도 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

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

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

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

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

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

    책갈피 : [00:00] menu_listA/[02:06] menu_listA ul li/[04:30] menu_listA ul li a/[07:21] menu_listA ul li .ic1

  • 1220분 테이블 셋팅 및 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

  • 1321분 기존 테이블 게시판 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

  • 1421분 기존 테이블 게시판 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

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

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

  • 1624분 일반, 갤러리, 웹진 게시판, 상품목록까지 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

  • 1724분 일반, 갤러리, 웹진 게시판, 상품목록까지 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

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





본 강의 수강생들의 추가구매가 가장 많은 학과.