알지오 평생교육원

로그인|회원가입|고객센터
HOME>IT전문가>모바일 / 앱>모바일UI 실무 [css3 Skill Up]

모바일UI 실무 [css3 Skill Up]

모바일UI 실무 [css3 Skill Up]
20회차 속성과정
전체 : 18시간 1분|회차당 평균 : 54분2초

이용기간 2개월

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

420,000255,000



모바일UI 실무 [css3 Skill Up] 사용법 강좌
모바일 웹페이지제작을 수강한 이용자들의 활용을 돕기위해 실제 사이트에서 제작되는 css3코딩을 분석하여 실제로 운영되는 모바일 사이트를 모델로 사이트를 제작합니다. 실질적으로 css3 코딩이 사이트상에서 구성되는것을 볼수 있습니다. 웹제작의 이해와 모바일 사이트제작을 원리를 이해할수 있으며 더 활용적인 실습과 실제적인 모바일 웹페이지구현을 하고싶은 분들이 이용하면 좋습니다.
  • 01.49분 메인 페이지의 탭 메뉴

    기본 메인 페이지에 대한 탭속성과 검색바 속성에 대해서 학습하고, 탭메뉴를 활성화하는 방법에 대해서 실습해봅니다.

    책갈피 : [00:00] 완성 사이트 살펴보기/[00:41] html 문서 살펴보기/[00:52] margin, padding/[02:20] font-family, font-size/[06:36] background:url/[07:59] position:relative/[11:05] width, height, background-color/[12:07] display:inline-block/[14:20] position:absolute/[16:23] text-decoration:none/[18:38] font-size, font-weight:bold/[19:38] position: absolute/[22:07] display:block/[22:28] font-size, font-weight:bold/[25:07] position: absolute/[28:50] gnSearchBoxColumn/[29:14] padding/[30:22] width, background-color/[31:22] width, height/[32:07] padding, margin, border/[33:27] input/[34:07] font-size, height/[35:24] float, position/[39:26] clear, clear:both/[42:14] text-align:right/[44:42] vertical-align:middle/[45:49] margin/[46:12] position:absolute

  • 02.56분 메인 페이지의 nav 메뉴

    gradient 속성을 이용한 배경이미지가 어떻게 적용되는지 학습해보고 nav메뉴가 dispaly:none 속성과 overflow:hidden속성 적용에 따라 차이의 모습을 학습합니다.

    책갈피 : [00:38] width, height/[01:30] overflow:hidden/[02:15] letter-spacing/[03:45] display:inline-block/[05:59] border-right/[07:45] text-align:center/[09:01] box-shadow:inset/[16:07] content:/[17:56] font-family, font-weight, font-size/[19:37] letter-spacing. position/[23:33] border-right/[24:22] text-align:center/[25:11] box-shadow:inset/[25:56] background-image/[29:55] font-family, font-weight, font-size/[31:10] letter-spacing, position/[35:43] text-align, height/[36:05] box-shadow:inset, background-image/[38:45] font-family, font-weight/[39:58] letter-spacing/[40:22] position:relative/[43:45] background-size/[45:19] text-align:center/[47:12] padding, display:block/[48:27] text-transform:lowercase/[49:52] background:url/[53:07] text-align, line-height/[53:43] signIN

  • 03.54분 로그인 페이지에서의 nav 메뉴

    로그인 페이지의 기본폼에서 nav 메뉴는 어떻게 적용되는지 학습하고 SearchBox에 대한 속성 지정방법에 대해서 실습을 진행합니다.

    책갈피 : [00:00] 로그인페이지 살펴보기/[01:10] margin, padding/[02:00] font-family, font-size/[04:00] position:relative/[05:00] background:url/[06:44] text-decoration:none/[08:13] max-width, height:auto/[09:09] outline, border/[11:35] background-color/[12:18] position:absolute/[19:03] padding, width/[20:41] clear:both, display:block/[23:00] webkit-appearance, webkit-border-radius/[24:56] vertical-align:middle/[28:33] margin-bottom/[28:52] overflow:hidden, letter-spacing/[31:00] box-shadow:inset/[32:52] background-image/[46:00] text-decoration:underline/[48:15] input type

  • 04.51분 소개페이지의 table정렬

    소개페이지의 이미지정렬할때의 CSS속성에대해서 학습해보고 모바일에서 적용되는 footer메뉴 속성에 대해서 실습을 진행합니다.

    책갈피 : [00:01] 상품 소개 페이지 적용하기/[00:54] 페이지 완성 화면 살펴보기/[02:23] width, height/[06:15] margin, padding/[08:18] font-weight, text-decoration/[10:09] clear, background/[11:45] width, overflow/[13:03] mobille css/[17:37] margin, font-size/[22:18] min-height/[23:48] text-size-adjust/[25:26] a, a:visited, a:hover/[36:34] input/[47:34] :before/[48:52] pointer-events

  • 05.56분 table로 지정된 페이지 하단 list메뉴와 footer메뉴

    하단에 생성되는 footer메뉴에 대한 이미지 지정과 list메뉴에 대한 정렬 속성을 적용시켜보고 실습을 진행합니다.

    책갈피 : [01:03] a:hover/[03:53] input type=email/[05:41] footer_content/[07:00] white-space/[09:05] list_item/[10:28] background/[14:46] display/[15:28] text-decoration/[16:33] font-style, font-size, font-family/[18:22] word-wrap/[21:02] text-align/[22:41] border-color/[34:07] 완성화면 비교하기/[49:28] sign-up-email/[51:36] sign-up-button

  • 06.56분 search box 영역으로 메뉴 만들기

    table cell로 정의된 페이지에 search box 영역을 만들고 input type을 활용한 메뉴 만들기

    책갈피 : [01:30] webkit-text-size-adjust:none/[03:59] font-family/[04:30] margin, padding, position/[07:15] overflow:hidden/[08:07] box-shadow/[10:07] border, display:table/[11:54] section/[14:45] display:table-cell/[15:13] vertical-align:middle/[16:56] white-space:nowrap/[19:11] a:active, a:visited, a:link/[19:45] text-decoration:none/[23:15] webkit-tap-highlight-color:rgba/[26:06] background-image, background-position/[28:25] srchCl, .myBCl/[29:22] text-align:center/[30:56] cursor:pointer/[32:22] background-position/[36:43] display:table/[41:00] vertical-align:middle/[44:07] margin-right/[46:52] background-color:transparent/[48:42] line-height/[52:15] font-size

  • 07.52분 table cell 이용한 search icon 영역만들기

    tablecell을 지정해서 icon영역 지정하고 content영역의 속성을 적용시켜봅니다.

    책갈피 : [01:15] padding/[01:30] background-color, background gradient/[02:38] border/[04:00] vertical-align:middle/[08:43] display:inline-block/[09:11] text-align:center/[10:56] z-index/[15:33] box-shadow/[17:48] hidden/[20:47] background:transparent/[26:07] background-size, background-position/[32:00] padding/[34:07] line-height/[37:36] overflow:hidden, white-space:nowrap/[41:22] list-style:none/[44:15] word-wrap:break-word/[46:52] font-weight/[50:30] background-image

  • 08.54분 footer 메뉴 영역설정과 image배치작업

    footer section을나누고 section마다 영역을 지정한 속성을 각각 넣어보는 작업을 진행합니다.

    책갈피 : [00:01] footer메뉴와 하단메뉴 설명/[01:07] display:inline-block/[03:51] arrowSprite/[06:46] background-position/[08:33] morewrap/[11:11] text-align:center/[17:11] font-family/[21:15] position:absolute/[28:07] display:block/[30:48] border-bottom:none/[36:00] background-size/[41:44] visibility:hidden/[44:30] 로그인 페이지 살펴보기/[51:45] 적용되는 속성 묶어서 지정하기

  • 09.58분 sign in 페이지작업하기

    page작업에 필요한 속성외에도 전체적인 속성을 지정해주는 css속성 적용방법에 대해서도 적용하여 확인해봅니다.

    책갈피 : [00:00] 로그인페이지 살펴보기/[01:40] vertical-align:middle/[05:00] white-space:nowrap/[07:15] font-weight:bold/[08:43] word-wrap:break-word/[10:03] footlist/[16:18] display:block/[19:48] line-height/[23:56] line-height, visit_count/[29:29] font-size/[32:37] text-decoration:underline/[35:29] text-overflow:ellipsis/[42:52] input type/[47:51] appearance/[50:34] primary/[52:00] text-shadow/[56:44] box-shadow

  • 10.50분 기본 구성된 page의 css적용

    기본page의 구성을 살펴보고 css속성 적용의 방법에 대해서 실습합니다.

    책갈피 : [00:00] 하단메뉴 적용하기/[01:18] display:block/[02:58] border-radius/[04:57] text-align:center, vertical-align:middle/[09:45] background-color/[11:54] 이미지로 구성된 메뉴 살펴보기/[14:43] text-size-adjust:none/[17:29] background-attachment/[20:11] border:none,outline:none/[24:41] bannerContainer/[28:03] menu/[31:15] text-align:center, position:relative/[32:37] footer/[34:45] text-transform:uppercase/[40:19] cursor:pointer/[43:36] font-size/[44:22] section/[45:52] errormessage

  • 11.59분 list로 구성된 page작업

    list로구성된 메뉴항목을 table cell로 나누어 각 속성을 지정하는 작업을 진행합니다.

    책갈피 : [00:00] 리스트로 구성된 메뉴작업 살펴보기/[01:25] 완성화면 비교하기/[05:58] text-size-adjust/[08:48] list-style-image/[11:31] color: inherit/[14:46] text-decoration/[18:03] ul, li/[22:56] repeat-x scroll/[25:18] display: block/[27:26] text-shadow/[31:37] clear: left/[34:19] overflow: hidden/[41:30] background-color/[44:30] repeat-x scroll/[49:22] clear: none/[57:45] border-radius

  • 12.1시간 4분 list로 작성된 table 정렬

    section영역을 나누어서 작성된 page영역을 정렬해서 속성을 지정해보는 작업을 해봅니다.

    책갈피 : [00:00] 리스트메뉴 구성 살펴보기/[04:00] font-weight/[06:28] clear: left/[08:09] font-weight/[12:41] title-wrapper/[15:39] vertical-align: middle/[21:07] text-shadow/[25:48] next-link/[28:18] current-page/[35:20] background: transparent/[40:00] search-field/[43:12] clear: right/[49:15] display: block/[53:13] small, medium, large/[58:05] font-weight/[60:35] display: block/[63:22] 완성된 페이지 작업 확인

  • 13.49분 list 메뉴의 정렬과 배경지정

    list로 작성된 메뉴들을 정렬하고 배경적용에대한 속성지정에 대해서 작업과 결과를 확인해봅니다.

    책갈피 : [00:00] 기본 메인페이지 살펴보기/[03:15] linear-gradient/[06:00] text-decoration: none/[09:37] padding/[12:45] text-indent/[17:33] list-style: none/[20:44] display: block/[23:07] overflow: hidden/[24:25] clearfix:after/[29:37] text-transform: uppercase/[31:52] text-rendering: optimizeLegibility/[41:45] display: inline-block/[44:50] float: none/[45:45] subheading/[47:58] nav-section a

  • 14.50분 메인 페이지에 적용하는 list 목록 만들기

    list로작성된 메뉴를 가지고 메인 페이지에서 적용하는 속성 지정에 대해서 알아보고 그 결과를 확인해봅니다.

    책갈피 : [00:36] display: none/[05:39] background:none/[06:29] text-shadow:none/[12:31] clear: both/[13:58] float: none/[22:37] white-space: normal/[31:03] margin-bottom/[33:30] background-size/[34:37] position: static/[36:37] mobile-view 속성 적용하기/[38:59] arrow/[42:30] background/[43:59] notched-left:before/[48:15] box-sizing:border-box

  • 15.56분 main & canvas 클래스를 이용한 페이지 구성

    main & canvas을 가지고 메인 페이지구성에 대해서 알아보고 Heder 상위메뉴만들기

    책갈피 : [00:00] 페이지구성 살펴 보기/[02:20] -webkit-text-size-adjust/[04:15] overflow-x: hidden/[07:58] clear: both/[09:24] background/[10:45] filter/[12:03] overflow: hidden/[15:01] float: right/[21:40] box-sizing: border-box/[24:07] white-space: nowrap/[27:14] cursor: pointer/[29:07] box-sizing: border-box/[34:22] padding-top/[36:19] background-position/[38:15] clear: both/[41:59] background: url/[49:22] padding/[51:30] line-height/[54:37] cursor: pointer

  • 16.53분 listSection과 listItem을 가지고 페이지만들기

    listItem을 가지고 메인 페이지구성에 대해서 알아보고 thumbList에 대한 정렬을 이용해 mainContainer 구성하기

    책갈피 : [00:00] 리스트로 구성된 메뉴작업 살펴보기/[00:53] box-sizing: border-box/[03:07] float: left/[05:00] copyright/[08:43] 페이지구성 살펴 보기/[13:15] a:hover/[16:07] header/[20:52] background/[24:33] overflow: hidden/[29:41] text-indent/[31:44] position: absolute/[34:30] nav/[39:07] list-style-type/[41:37] background/[46:06] overflow: hidden

  • 17.55분 Section content에 대한 메뉴 리스트 구성하기

    Section content에대한 영역을 가지고 페이지를 구성하는 작업을 진행합니다.

    책갈피 : [00:00] 메뉴작업 살펴보기/[00:26] section/[06:46] box-sizing: border-box/[12:43] line-height/[15:31] float: left/[19:59] font-size/[23:55] margin, padding/[27:37] width: auto/[30:44] font-weight: bold/[35:30] text-transform: uppercase/[38:00] border-radius/[43:43] 탭메뉴 비교하기/[45:37] footer/[52:21] text-transform: uppercase/[54:21] width

  • 18.54분 content영역에 로그인 페이지 구성하기

    loginForm,textfield 를 이용해 로그인페이지를 구성하고 footer메뉴의 아이콘 이미지 구성에 대해 알아봅니다.

    책갈피 : [00:00] 완성 사이트 살펴보기/[02:45] text-decoration: underline/[04:40] position: relative/[08:05] background: transparent/[12:24] border/[14:07] text-align: center/[16:46] section/[17:45] box-sizing: border-box/[19:21] font-weight: bold/[21:52] text-transform: uppercase/[25:55] footer/[28:40] display: block/[30:31] text-transform:none/[33:11] clear:left/[38:24] clear:both/[40:45] padding/[46:58] 메세지 박스/[50:09] vertical-align:middle

  • 19.53분 searchForm을 이용한 페이지의 search영역구성

    inputSearchBox이용해 리스트를 구성하고 Search영역을 만들어봅니다.

    책갈피 : [02:05] background/[04:26] video/[07:44] box-sizing: border-box/[12:28] font-weight: bold/[13:52] z-index/[16:48] float: left/[20:12] background gradient/[24:43] margin/[30:13] list-style-type: none/[32:39] font-size/[37:13] margin: 0 auto/[40:30] text-decoration: none/[45:15] overflow:hidden/[51:28] display:block

  • 20.52분 크기를 조절한 list 목록의 페이지구성

    메뉴리스트를 구성하고 리스트의 구성 및 배치방법과 각각의 Item 배치에 대해서 실습을 진행합니다.

    책갈피 : [00:00] 완성 페이지 살펴보기/[02:06] opacity/[05:52] 메뉴 배경설정/[07:54] 로고 배경설정/[10:07] list-style: none/[13:04] box-sizing: border-box/[19:21] text-shadow/[21:10] overflow: hidden/[26:20] text-shadow/[31:36] vertical-align:middle/[36:36] overflow: hidden/[40:57] font-weight: bold/[41:44] white-space: nowrap/[46:18] clear:both/[48:23] display:inline-block/[49:21] position:absolute





주소 : 경기 의정부시 시민로122번길 41-46, 2F
회사명 : 알지오|대표 : 채명수|개인정보관리자 : 임희정|사업자등록번호 : 217-90-17793|통신판매 제2008-0312호
SSL발급자 Equifax Secure Global eBusiness CA-1|Copyright since 2003ⓒalzio.co.,Ltd all rights reserved. SNS

* 중소기업진흥공단 신기술밴처지원

* 서울기술보증 제 20031501호