모바일 홈페이지 제작

강좌구성
(20강) 전체 : 18시간 1분|평균 : 54분2초

수강기간
2개월

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

모바일 홈페이지 제작 인강 평생교육원 교육 안내
모바일 웹페이지제작을 수강한 이용자들의 활용을 돕기위해 실제 사이트에서 제작되는 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