모바일UI 실무 [css3 Skill UP] - 총 18시간 1분 / 강의당평균 : 54분2초

모바일UI 실무 [css3 Skill UP]

전체 : 18시간 1분 / 강의당평균 : 54분2초

01 메인 페이지의 탭 메뉴

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

49분 

책갈피 : [00:00] 완성 사이트 살펴보기/[00:41] html 문서 살펴보기/[00:52] margin, padding/[02:01] body/[02:20] font-family/[03:44] font-size/[04:05] margin:0 auto/[05:03] 결과 확인/[05:48] tabs/[06:36] background:url/[07:40] height/[07:59] position:relative/[08:18] !important/[09:20] 결과 확인/[10:44] drugstore #shoppingBag/[11:05] width, height/[11:36] background-color/[11:49] 결과 확인/[12:07] display:inline-block/[14:20] position:absolute/[14:50] top, right/[15:39] 결과 확인/[16:10] a/[16:23] text-decoration:none/[17:22] color/[17:33] 결과 확인/[18:16] drugstore #shoppingBag span.itemsSpan/[18:38] font-size/[19:03] font-weight:bold/[19:24] color/[19:38] position: absolute/[20:00] 결과 확인/[20:48] top, left/[21:43] drugstore #shoppingBag span.amountSpan/[22:07] display:block/[22:28] font-size/[23:03] font-weight:bold/[23:15] color/[23:29] 결과 확인/[23:59] top, left/[25:07] position: absolute/[25:49] drugstore #shoppingBag .bagImage/[26:16] position:absolute/[26:21] top, right/[27:00] 결과 확인/[28:50] gnSearchBoxColumn/[29:14] padding:3px 0 3px/[30:22] width/[30:28] background-color/[30:40] 결과 확인/[31:01] gnSearchBox/[31:22] width, height/[31:55] color/[32:07] padding-left/[32:20] margin/[32:35] border:solid/[32:46] 결과 확인/[33:27] input/[34:07] font-size, height/[35:03] gnSearchFormBody/[35:24] float:none/[35:38] position:relative/[39:26] clear/[39:39] clear:both/[40:24] display:block/[40:48] 결과 확인/[41:34] gnSearchFormBody div/[41:58] float:none/[42:14] text-align:right/[42:38] gndsSearchBoxBackground div:last-child/[43:07] float:none/[43:27] position:relative/[43:53] 결과 확인/[44:27] gnGoButton/[44:42] vertical-align:middle/[45:49] margin/[46:01] btnGoSearch_1/[46:12] position:absolute/[46:37] top, right/[47:01] 결과 확인

02 메인 페이지의 nav 메뉴

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

56분 

책갈피 : [00:00] #nav/[00:38] width/[00:54] height:auto/[01:03] margin-bottom/[01:18] height/[01:30] overflow:hidden/[02:15] letter-spacing/[02:35] 결과 확인/[03:30] #nav a/[03:45] display:inline-block/[04:15] #nav a:first-child img/[04:30] display:none/[05:46] #nav a:first-child/[05:59] border-right:2px solid #fff/[06:13] width/[06:27] 결과 확인/[07:45] text-align:center/[08:03] height/[09:01] box-shadow:inset/[10:05] background-image1/[11:01] background-image2/[11:35] background-image3/[11:50] background-image4/[12:13] 결과 확인/[14:11] #nav a:first-child:after/[16:07] content:/[17:33] color/[17:56] font-family/[18:18] font-weight:bold/[18:37] font-size/[18:59] 결과 확인/[19:37] letter-spacing/[19:56] position:relative/[20:07] top/[20:22] 결과 확인/[20:56] #nav a:nth-child(2) img/[23:18] #nav a:nth-child(2)/[23:33] border-right/[23:55] width/[24:22] text-align:center/[25:02] height/[25:11] box-shadow:inset/[25:29] 결과 확인/[25:56] background-image/[27:45] 결과 확인/[28:32] #nav a:nth-child(2):after/[29:02] content:/[29:17] color/[29:55] font-family/[30:15] font-weight:bold/[30:30] font-size/[31:10] letter-spacing/[31:36] position:relative/[31:52] top/[32:07] 결과 확인/[33:00] #nav a:last-child img/[35:06] #nav a:last-child/[35:30] width/[35:43] text-align:center/[35:59] height/[36:05] box-shadow:inset/[36:52] background-image/[37:35] 결과 확인/[37:51] #nav a:last-child:after/[38:15] content:/[38:27] color/[38:45] font-family/[39:05] font-weight:bold/[39:21] 결과 확인/[39:45] font-size/[39:58] letter-spacing/[40:22] position:relative/[41:51] div.ds_home_banner/[42:13] div.ds_home_banner/[42:45] width, height/[43:45] background-size/[44:07] display:inline-block/[45:06] home_banner_wrap/[45:19] text-align:center/[46:34] ul.hMenu/[47:06] ul.hMenu a/[47:12] padding/[47:28] display:block/[47:43] 결과 확인/[48:27] text-transform:lowercase/[49:30] li/[49:52] background:url/[50:20] margin-bottom/[51:05] li > a/[51:22] color, padding/[52:00] background:url/[52:30] #mobileFooter/[53:07] text-align:center/[53:15] line-height/[53:22] margin, width/[53:36] padding-bottom/[53:43] signIN/[54:00] signIN a/[54:29] signIN a:last-child/[55:15] 결과 확인

03 로그인 페이지에서의 nav 메뉴

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

54분 

책갈피 : [00:00] 로그인페이지 살펴보기/[01:10] margin, padding/[01:45] body/[02:00] font-family/[02:38] font-size/[02:49] margin/[03:13] 결과 확인/[03:46] #tabs/[04:00] position:relative/[05:00] background:url/[06:00] height/[06:27] a/[06:44] text-decoration:none/[06:59] color/[07:39] img/[08:13] max-width/[08:33] height:auto/[08:54] a img/[09:09] outline:none/[09:20] border:none/[10:24] drugstore #shoppingBag/[10:58] width, height/[11:35] background-color/[12:18] position:absolute/[12:46] display:inline-block/[13:22] drugstore #shoppingBag span.itemsSpan/[13:37] font-size, font-weight:bold/[14:33] position: absolute/[15:46] drugstore #shoppingBag span.amountSpan/[16:11] top, left/[16:48] drugstore #shoppingBag .bagImage/[17:41] position:absolute/[18:30] gnSearchBoxColumn/[19:03] padding, width/[19:18] gnSearchFormBody/[19:44] float, position/[19:48] input[type='text'/[20:11] font-size, height/[20:26] clear/[20:41] clear:both, display:block/[21:25] gnSearchBox/[22:11] padding-left/[22:56] border:solid/[23:00] webkit-appearance/[23:26] webkit-border-radius/[24:02] #btnGoSearch_1/[24:29] position:absolute/[24:33] gnGoButton/[24:56] vertical-align:middle/[25:22] gnSearchFormBody div/[25:47] float, text-align/[26:10] gndsSearchBoxBackground div:last-child/[27:15] nav a:first-child/[28:29] #nav/[28:33] margin-bottom/[28:52] overflow:hidden/[29:02] letter-spacing/[29:07] #nav a/[29:29] #nav a:first-child/[30:07] text-align:center/[31:00] box-shadow:inset/[32:52] background-image/[34:12] 결과 확인/[34:37] #nav a:first-child:after/[35:51] #nav a:nth-child(2):after/[36:30] #nav a:last-child:after/[37:37] #mobileHeader/[38:06] #mobileContent/[38:22] #mobileFooter/[40:13] #mobileContent table tbody tr td table tbody tr td span h1 font/[40:52] #mobileContent table tbody tr td table tbody tr td span b/[41:15] #mobileContent p/[41:37] 결과 확인/[43:21] login h1/[43:52] login > h1/[44:22] login .new-customers/[44:49] login p/[45:30] login a/[46:00] text-decoration:underline/[46:58] login .previous-customers/[47:35] login .previous-customers label.required/[48:15] input type/[49:34] login .previous-customers .row a/[50:20] login .previous-customers .row/[51:05] login .previous-customers

04 소개페이지의 table정렬

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

51분 

책갈피 : [00:01] 상품 소개 페이지 적용하기/[00:11] 탭 메뉴 작업 진행 여부/[00:54] 페이지 완성 화면 살펴보기/[01:56] div.tableCatItem/[02:23] width, height/[02:57] margin/[03:30] float/[04:09] div.tableCatItem .catImage/[04:30] div#showcase/[05:00] 결과 확인/[05:15] table.TblFPromo/[05:30] width, float/[05:59] height/[06:15] margin-left/[06:27] padding/[06:44] 결과 확인/[08:05] .oesLink .specialoffer/[08:18] font-weight, text-decoration/[08:37] color/[08:54] 결과 확인/[09:18] div#catTable/[10:01] table#TblFeaturedLbl/[10:09] clear, background/[10:43] 결과 확인/[11:20] #featuredImage/[11:45] width, overflow/[12:01] #GeneralItemsModHeader/[12:13] 결과 확인/[13:03] mobille css/[14:50] 기본 페이지 설명/[16:14] 완성 화면 확인/[17:29] 전체 적용 css 적용/[17:37] margin, font-size/[18:33] body/[18:52] background, color/[19:37] 결과 확인/[20:30] .un_header2, .un_header1/[20:48] #un_header a/[21:40] #iphonecontent/[22:18] min-height/[23:48] text-size-adjust/[25:26] a, a:visited, a:hover/[27:18] a,a:visited/[28:18] .un_width_large/[28:56] .un_floatL/[29:33] 결과 확인/[30:11] #un_logo img/[30:25] 결과 확인/[30:56] .un_image_blue, .un_image_orange/[31:48] 결과 확인/[32:37] #search/[35:57] #un_search/[36:34] input [type/[38:15] right/[38:50] .un_search_icon/[41:07] 결과 확인/[42:45] .un_floatR/[43:15] .un_clear/[43:37] .un_block/[44:00] .un_bold/[45:00] .un_underline/[45:51] body .iphone_list/[46:37] body .iphone_list div/[47:34] :before/[48:52] pointer-events/[50:53] 결과 확인

05 table로 지정된 페이지 하단 list메뉴와 footer메뉴

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

56분 

책갈피 : [00:00] body .iphone_list/[01:03] a:hover/[01:26] 결과 확인/[02:00] input type/[03:21] 결과확인/[03:53] input type=email/[05:00] 결과 확인/[05:41] footer_content/[06:30] footer_content b/[07:00] white-space/[08:09] un_footer_call a/[08:30] 완성 화면 비교하기/[09:05] list_item/[10:28] background/[11:56] 결과 확인/[12:46] @font-face/[14:11] un_floatR/[14:24] un_clear/[14:46] display/[15:00] bold/[15:28] text-decoration/[16:33] font-style/[16:48] font-size/[17:26] font-family/[17:56] text - color/[18:22] word-wrap/[19:36] padding/[20:25] width/[21:02] text-align/[21:37] border/[22:41] border-color/[23:32] un_border_color/[23:56] un_border_color_orange/[24:51] un_separator/[25:26] un_border_gray/[25:48] un_title/[26:30] 결과 확인/[28:33] un_primary_button/[29:22] input = un_primary_button/[30:41] 결과 확인/[31:37] my-class=un_primary_button/[33:07] 결과 확인/[34:07] 완성화면 비교하기/[34:37] un_store_locator_footer/[36:22] 결과 확인/[36:59] un_sign_in_footer/[38:04] 결과 확인/[38:37] un_phone_footer/[39:22] un_customer_footer/[39:52] un_contact_us_footer/[40:07] 결과 확인/[41:37] un_univ_menu_item/[42:30] un_univ_menu_item a/[43:15] 결과 확인/[43:37] menu_item_first a, menu_item_last a/[44:35] menu_item_last/[46:07] 결과 확인/[46:52] un_home_list a/[48:44] 결과 확인/[49:28] sign-up-email/[50:45] 결과 확인/[51:36] sign-up-button/[52:30] 결과확인

06 search box 영역으로 메뉴 만들기

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

56분 

책갈피 : [00:00] 살펴보기/[01:30] webkit-text-size-adjust:none/[03:23] body/[03:59] font-family/[04:30] margin, padding/[04:55] position:relative/[05:59] 결과 확인/[06:30] mwHdr/[07:15] overflow:hidden/[07:30] padding/[08:07] box-shadow/[09:31] #tbdHdr/[10:07] border:none/[10:28] display:table/[11:54] section/[12:26] display:block/[12:33] border-collapse:separate/[13:37] 결과 확인/[14:11] cl/[14:45] display:table-cell/[15:13] vertical-align:middle/[15:39] lgoCl/[15:48] text-align/[16:30] lgoCl a/[16:56] white-space:nowrap/[17:32] 결과 확인/[18:18] cl>a/[19:11] a:active, a:visited, a:link/[19:45] text-decoration:none/[20:29] headerLogo/[21:00] img/[21:32] 결과 확인/[21:55] homeicon/[22:26] margin-top/[23:15] webkit-tap-highlight-color:rgba/[25:11] cl span.hdSpt/[25:41] display:inline-block/[26:06] background-image/[26:22] background-position/[27:22] margin-right/[27:59] 결과 확인/[28:25] srchCl, .myBCl/[29:22] text-align:center/[29:51] 결과 확인/[30:44] tglSrchAncr/[30:56] cursor:pointer/[31:30] height/[32:00] display:block/[32:13] srchCl span.hdSpt/[32:22] background-position/[33:22] myBCl span.hdSpt/[33:37] background-position/[35:14] 결과 확인/[36:37] #srchFrm/[36:43] display:table/[37:28] moz-box-sizing:border-box/[39:34] #srchFrm>span/[40:15] position:relative/[41:00] vertical-align:middle/[41:45] 결과 확인/[42:07] header>form>span/[42:30] display:inline-block/[43:45] #srchDv/[44:07] margin-right/[44:21] gtx/[45:00] position:absolute/[46:22] z-index/[46:52] background-color:transparent/[47:30] gtxi/[48:42] line-height/[49:37] inputDiv/[50:15] border-radius/[50:58] padding-right/[51:29] #kw/[52:15] font-size/[55:45] 결과 확인

07 table cell 이용한 search icon 영역만들기

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

52분 

책갈피 : [00:00] 살펴보기/[00:43] #searchBtn/[01:15] padding/[01:30] background-color/[02:07] background gradient/[02:38] border-radius/[03:30] border solid/[03:38] display:table-cell/[04:00] vertical-align:middle/[04:30] 결과 확인/[05:15] input/[06:00] padding/[08:05] inputIconLink/[08:43] display:inline-block/[09:11] text-align:center/[09:39] #autoDiv/[10:11] position:absolute/[10:56] z-index/[11:31] inputIconStyle/[12:33] background:none repeat scroll/[12:56] 결과 확인/[13:43] afl/[13:58] display:none/[15:07] position:absolute/[15:33] box-shadow/[16:22] border/[17:18] 결과 확인/[17:48] hidden/[18:21] hidden, #msgId.hidden/[18:51] hidden/[19:21] ghAC_title/[20:00] border-bottom dotted/[20:14] position:relative/[20:47] background:transparent/[21:21] ghAC_titletxt/[22:48] background-image/[23:03] #searchBtn/[23:30] btnWdth/[24:32] srchBtnLg/[25:26] display:block/[26:07] background-size/[26:25] background-position/[26:51] 결과 확인/[27:07] srchBtnLg/[27:41] display:block/[28:48] 결과 확인/[29:41] rdtxt/[30:29] rdbg/[30:52] msg/[31:36] popCat/[32:00] padding/[32:27] background-image/[32:51] 결과 확인/[33:44] secHeaderPop/[34:07] line-height/[34:45] border:none/[35:00] 결과 확인/[35:44] section>header/[36:37] h2.h2off, h3.h2off/[37:13] font-size/[37:36] overflow:hidden/[37:52] white-space:nowrap/[38:22] text-overflow:ellipsis/[40:52] color/[41:12] ul/[41:22] list-style:none/[41:30] ul.edge/[42:04] 결과 확인/[42:52] popCat ul.edge>li:first-child/[43:15] border-top/[43:27] ul.edge>li/[44:07] padding/[44:15] word-wrap:break-word/[44:42] 결과 확인/[45:27] inl/[46:07] ul.edge li a/[46:52] font-weight:normal/[47:27] font-weight:normal/[48:45] ul.edge>li:last-child/[49:37] secHeaderBro, .secHeaderDeals, .savedSrchs/[50:30] background-image/[51:24] 결과 확인

08 footer 메뉴 영역설정과 image배치작업

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

54분 

책갈피 : [00:01] footer메뉴 와 하단메뉴 설명/[00:18] 완성화면 비교/[00:54] logoSpan/[01:07] display:inline-block/[01:19] background-image/[01:40] position:absolute/[02:50] background-size/[03:15] 결과 확인/[03:51] arrowSprite/[04:15] display:inline-block/[04:54] background-size/[05:15] position:relative/[06:12] 결과 확인/[06:29] brsCat/[06:46] background-position/[07:00] 결과 확인/[07:15] blright/[07:15] background-position/[07:30] 결과 확인/[07:46] hp_dd/[08:01] 결과 확인/[08:33] morewrap/[08:46] float:right/[09:24] 결과 확인/[09:52] footer/[10:22] display:block/[11:11] text-align:center/[11:16] 결과 확인/[11:56] footerLvl1Section/[13:48] #footerLvl1Section, #footerDownloadSection, div.copy/[13:52] display:block/[14:13] 결과 확인/[15:28] div.copy/[17:11] font-family/[17:48] 결과 확인/[18:37] 완성 화면 비교/[19:07] footerLvl1Section .footerLvl1Entries/[19:51] footerL1Logo/[21:15] position:absolute/[22:10] 결과 확인/[22:51] footerL1Logo.lvl1_1/[23:15] background-position/[24:03] 결과 확인/[24:26] footerL1Logo.lvl1_2/[24:33] background-position/[24:48] 결과 확인/[25:15] footerL1Logo.lvl1_3_2/[25:18] background-position/[26:11] 결과 확인/[26:18] footerL1Logo.lvl1_4/[27:02] 결과 확인/[27:37] footerLvl1Section .footerLvl1Entries a/[28:07] display:block/[29:11] position:relative/[29:18] 결과 확인/[30:26] footerLvl1Section .footerLvl1Entries:last-child a/[30:48] border-bottom:none/[30:59] footerLvl2Section/[32:22] 결과 확인/[32:57] footerLvl2Section a, #footerLvl2Section span/[34:22] footerLvl2Section>a/[35:00] 결과 확인/[35:22] appLogo/[36:00] background-size/[37:34] 결과 확인/[38:07] appLogo.android/[38:22] background-position/[39:27] 결과 확인/[40:15] footerLvl3Section/[41:21] 결과 확인/[41:30] mwver/[41:44] visibility:hidden/[41:51] display:none/[42:04] visit_count/[42:14] display:none/[42:37] 결과 확인/[44:30] 로그인 페이지 살펴보기/[44:44] 완성 화면 비교/[46:45] html/[47:15] 결과 확인/[47:42] body/[48:52] 결과 확인/[49:37] mw-hdr/[51:00] 결과 확인/[51:45] 적용되는 속성 묶어서 지정하기/[52:57] tbdHdr/[53:31] 결과 확인

09 sign in 페이지작업하기

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

58분 

책갈피 : [00:00] 로그인페이지 살펴보기/[01:03] display:table-cell/[01:40] vertical-align:middle/[02:15] cl.lgoCl/[02:44] width:auto/[02:53] 결과 확인/[03:29] headerLogo/[03:46] 결과 확인/[04:30] cl.lnkCl/[05:00] white-space:nowrap/[05:15] 결과 확인/[06:15] lnkCl>.grey>a/[06:42] cl.lnkCl>.grey>a/[07:00] cl.lnkCl>.link_blue>a/[07:15] font-weight:bold/[07:30] 결과 확인/[08:43] word-wrap:break-word/[09:09] mw-msg.hidden/[09:26] 결과 확인/[10:03] footlist/[10:33] display:block/[10:48] position:relative/[11:03] 완성 화면 비교하기/[11:22] text-align:left/[11:56] 결과 확인/[12:48] footlist .im/[13:18] no-repeat/[14:11] position:absolute/[14:52] 결과 확인/[15:35] footlist a/[16:18] display:block/[17:11] 결과 확인/[17:52] fsec .footlist a/[18:36] padding/[18:55] 결과 확인/[19:11] fpipe/[19:32] 결과 확인/[19:48] line-height/[20:26] 결과 확인/[20:55] f3sec/[21:36] 결과 확인/[22:03] f3sec a/[22:40] fcopy/[23:56] line-height/[24:33] visit_count/[24:55] 결과 확인/[25:26] background-position/[29:29] font-size/[31:21] a,a:link/[31:40] text-decoration:none/[31:51] a:visited/[32:15] a:focus,a:hover/[32:37] text-decoration:underline/[32:50] 결과 확인/[33:35] navTitle/[33:58] text-align:center/[34:36] overflow:hidden/[35:00] word-wrap:break-word/[35:29] text-overflow:ellipsis/[37:19] 결과 확인/[38:52] txt/[40:00] txt>label/[40:36] 결과 확인/[41:13] ino/[41:45] inoChk/[42:52] input type/[44:06] 결과 확인/[45:20] rememberMeChkBx/[46:19] background-position/[47:22] border-width/[47:51] appearance/[48:07] 결과 확인/[48:50] rememberMeChkBx:checked/[49:22] 결과 확인/[50:34] primary,a.primary/[52:00] text-shadow/[53:19] 결과 확인/[54:15] background/[56:44] box-shadow/[57:21] 결과 확인

10 기본 구성된 page의 css적용

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

50분 

책갈피 : [00:00] 하단메뉴 적용하기/[00:39] cancelBtn/[01:18] display:block/[01:57] background/[02:58] border-radius/[04:30] font-weight/[04:57] text-align:center/[05:15] vertical-align:middle/[05:40] 결과 확인/[06:30] frgtLinks/[07:46] regLink/[08:07] brdBtm/[08:31] 결과 확인/[09:01] 완성 화면 비교하기/[09:30] mw-signin/[09:45] background-color/[10:11] mw-signin section/[10:28] 결과 확인/[11:31] 완성 화면 비교하기/[11:54] 이미지로 구성된 메뉴 살펴보기/[12:37] 완성 화면 비교하기/[13:33] html/[14:43] text-size-adjust:none/[15:24] body/[17:29] background-attachment/[18:06] background-repeat/[18:40] 결과 확인/[20:11] border:none,outline:none/[21:14] pageHolder/[21:56] mobileHeader/[23:37] 결과 확인/[24:41] bannerContainer/[26:06] bannerContainer2/[26:48] bannerContainer3/[27:29] logoCSNMobile/[28:03] menu/[29:22] 결과 화면 비교하기/[29:41] margin/[30:03] 결과 확인/[30:36] fullSite/[31:15] text-align:center/[31:21] position:relative/[32:00] 결과 확인/[32:37] footer/[33:37] 결과 확인/[34:20] a:link.footerLinks/[34:45] text-transform:uppercase/[36:15] a:visited.footerLinks/[37:21] a:hover.footerLinks/[38:07] 결과 확인/[39:34] newsHolder/[40:19] cursor:pointer/[40:27] bstart/[42:29] h1/[43:36] font-size/[44:22] section/[44:44] display:block/[45:07] border-collapse:separate/[45:22] a:active,a:visited,a:link/[45:52] errormessage/[46:49] items/[48:30] mobileTables/[49:37] showcase img

11 list로 구성된 page작업

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

59분 

책갈피 : [00:00] 리스트로 구성된 메뉴작업 살펴보기/[01:25] 완성화면 비교하기/[02:46] html/[02:59] height/[03:38] body/[05:30] min-width/[05:58] text-size-adjust/[06:10] 결과 확인/[07:15] body ul/[08:15] body>ul>li/[08:48] list-style-image/[09:01] list-style-position/[10:18] 결과 확인/[11:16] body>ul>li>a/[11:31] color: inherit/[12:24] 결과 확인/[13:26] body>p/[14:11] a/[14:46] text-decoration/[14:54] 결과 확인/[15:26] form,input/[16:47] font-size/[17:14] 결과 확인/[18:03] ul,li/[18:37] 결과 확인/[18:52] h3/[20:22] 결과 확인/[21:15] #header/[22:56] repeat-x scroll/[24:07] 결과 확인/[24:52] #header a/[25:18] display: block/[25:52] #header h1/[26:48] text-align/[27:26] text-shadow/[28:21] overflow: hidden/[28:29] 결과 확인/[29:22] 완성화면 비교하기/[30:07] #l-top/[31:18] float: left/[31:37] clear: left/[31:56] #r-top/[33:34] #c-top/[34:19] overflow: hidden/[34:52] 결과 확인/[35:49] #l-top a/[36:30] #l-top a.logo/[37:35] a.logo img/[38:22] #r-top a/[39:37] 결과 확인/[40:52] #bottom-banner,#top-banner/[41:30] background-color/[41:52] #bottom-banner span,#top-banner span/[42:19] display: block/[42:37] #bottom-banner img,#top-banner img/[43:05] 결과 확인/[43:45] tabs/[44:30] repeat-x scroll/[45:19] text-align: center/[45:52] 결과 확인/[46:35] tabs>ul/[47:35] tabs>ul>li/[47:59] display: inline/[48:37] tabs>ul>li>a/[48:57] float: left;/[49:22] clear: none/[50:30] text-shadow/[52:34] 결과 확인/[52:45] 완성화면 비교하기/[53:29] tabs>ul>li>a:first-child/[55:15] tabs>ul>li>a.last/[55:57] float: right/[56:27] tabs>ul>li>a.selected/[57:45] border-radius/[58:12] 결과 확인

12 list로 작성된 table 정렬

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

1시간 4분 

책갈피 : [00:00] 리스트메뉴 구성 살펴보기/[00:48] news-list li/[01:18] padding/[01:48] news-list li a/[02:14] 완성화면 비교하기/[02:46] 결과 확인/[03:35] news-list p.category-title/[04:00] font-weight/[05:00] 결과 확인/[05:30] news-list li img/[05:46] border: none/[06:28] clear: left/[07:00] 결과 확인/[07:42] news-list li h2/[08:09] font-weight/[09:18] 결과 확인/[10:20] news-list li p/[11:52] max-height/[12:20] 결과 확인/[12:41] title-wrapper/[13:00] 결과 확인/[13:26] clear/[13:46] 결과 확인/[14:05] 완성화면 비교하기/[15:09] pagination/[15:39] vertical-align: middle/[17:07] 결과 확인/[17:40] pagination a/[18:37] display: block/[19:30] font-weight/[21:07] text-shadow/[22:18] 결과 확인/[23:03] first-link-disabled/[24:15] 결과 확인/[24:41] prev-link-disabled/[25:29] 결과 확인/[25:48] next-link/[26:18] 결과 확인/[26:41] pagination a.last-link/[27:11] float: right/[27:26] 결과 확인/[27:41] 완성화면 비교하기/[28:18] current-page/[29:15] 결과 확인/[30:11] #bottom-navi/[30:56] 결과 확인/[31:29] #bottom-navi li:first-child/[32:00] #bottom-navi li/[33:07] 결과 확인/[33:52] #bottom-navi li a/[35:20] background: transparent/[35:45] tap-highlight-color/[36:07] 결과 확인/[37:04] search-block/[38:12] 결과 확인/[38:45] background/[39:22] 결과 확인/[40:00] search-field/[41:20] clear: left/[42:20] go-button/[43:12] clear: right/[43:28] 결과 확인/[43:52] #footer-navi/[44:22] #footer-navi li/[45:07] 결과 확인/[45:43] #footer-navi li a/[46:58] tap-highlight-color/[47:22] 결과 확인/[48:30] #font-block/[49:15] display: block/[49:22] 결과 확인/[49:59] #font-block h3/[50:20] clear: none/[51:30] #font-block a/[52:30] 결과 확인/[53:13] small/[53:22] medium/[53:36] large/[53:43] 결과 확인/[54:45] a.grey-button/[55:07] display: inline/[55:30] 결과 확인/[56:15] a.grey-button span/[58:05] font-weight/[58:37] 결과 확인/[59:06] a.grey-button-disabled/[59:30] display: inline/[59:52] a.grey-button-disabled span/[60:35] display: block/[61:30] 결과 확인/[61:52] #footer/[62:42] #footer p/[62:53] 결과 확인/[63:22] 완성된 페이지 작업 확인

13 list 메뉴의 정렬과 배경지정

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

49분 

책갈피 : [00:00] 기본 메인페이지 살펴보기/[00:23] 완성화면 비교하기/[00:50] body/[01:48] 결과 확인/[02:15] background/[03:15] -o-linear-gradient/[03:59] background-attachment: fixed/[04:26] background-repeat: repeat-x;/[04:30] 결과 확인/[05:15] display: block/[06:00] text-decoration: none/[06:14] a:hover/[06:30] 결과 확인/[07:00] ol, ul, h1, h2, h3, h4, h5, h6/[07:45] 결과 확인/[08:13] 완성화면 비교하기/[08:46] div#container/[09:37] padding/[09:45] 결과 확인/[10:13] header#masthead/[11:11] box-sizing: border-box/[11:35] 결과 확인/[12:07] header#masthead h1/[12:45] text-indent/[13:13] 결과 확인/[13:37] header#masthead h1 a/[14:31] 결과 확인/[15:03] mobile-view #primary/[15:35] 결과 확인/[16:15] mobile-view #primary > ul/[16:40] #primary/[17:18] #primary > ul/[17:33] list-style: none/[18:07] position: relativ/[18:18] 결과 확인/[18:48] #primary > ul > li/[19:22] 결과 확인/[19:45] #primary > ul > li > a/[19:59] text-decoration: none/[20:44] display: block/[21:06] box-sizing: border-box/[21:48] -webkit-font-smoothing: antialiased/[21:56] 결과 확인/[22:41] #content/[23:07] overflow: hidden/[23:21] 결과 확인/[23:37] mobile-view #content/[23:52] 결과 확인/[24:25] clearfix:after/[24:44] content/[25:07] visibility: hidden/[25:11] 결과 확인/[25:36] 목록적용속성 하나로 적용하기/[26:22] archive-brief article.in-column/[26:48] 결과 확인/[27:11] article.in-column/[27:52] 결과 확인/[28:30] h2/[29:03] 결과 확인/[29:26] latest-stories h2/[29:37] text-transform: uppercase/[30:11] 결과 확인/[30:48] 목록적용속성 하나로 적용하기/[31:33] heading/[31:45] -webkit-font-smoothing: antialiased/[31:52] text-rendering: optimizeLegibility/[32:37] 결과 확인/[33:07] body.dark article.in-column a:visited/[33:57] article.in-column a:visited/[34:13] 결과 확인/[34:37] 목록적용속성 하나로 적용하기/[34:49] 결과 확인/[35:22] p.excerpt,#recommendations .lower-deck/[35:45] 결과 확인/[36:30] article.in-column .byline/[37:15] article.in-column .byline span.author,article.in-column .byline a/[37:52] 결과 확인/[38:12] 목록적용속성 하나로 적용하기/[38:45] article .comments-hotness/[39:34] 결과 확인/[39:52] body.dark article.in-column a:visited h1/[40:07] body.dark a.feature-container h1 {/[40:22] 결과 확인/[40:52] nav .comment-count/[41:45] display: inline-block/[42:37] footer#page-footer/[43:45] mobile-view #footer-nav .nav-section/[44:50] float: none/[45:15] #footer-nav .nav-section ul.conde-nast-sites/[45:45] subheading/[46:37] 결과 확인/[47:07] #footer-nav .nav-section ul/[47:37] footer#page-footer a/[47:58] nav-section a/[48:21] 결과 확인/[48:37] mobile-view #footer-nav #full-site a/[48:53] 결과 확인

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

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

50분 

책갈피 : [00:00] login-body/[00:36] display: none/[00:47] 결과 확인/[01:30] mobile-view #copyright-terms/[02:19] div#copyright-terms/[02:52] 결과 확인/[03:35] article.in-column .archive-listing/[04:55] main-feature-alt/[05:15] main-feature-alt a.feature-container/[05:39] background:none/[06:13] main-feature-alt h1/[06:29] text-shadow:none/[06:54] main-feature-alt footer/[07:15] main-feature-alt .feature-meta/[07:45] main-feature-alt .comments-hotness/[08:09] main-feature-alt p.excerpt/[08:37] 결과 확인/[09:09] main-feature-alt p.byline, .main-feature-alt p.byline a/[09:54] mobile-view .gallery-image-description/[10:33] mobile-view #comments > li/[11:07] mobile-view #comments > li div.body/[11:20] 결과 확인/[11:41] mobile-view .article-content/[12:31] clear: both/[12:39] mobile-view .main-feature/[13:13] mobile-view #ad-top/[13:58] float: none/[14:24] 결과 확인/[15:00] mobile-view .article-author/[15:16] mobile-view #archive-head/[15:52] mobile-view div#container/[16:18] 결과 확인/[16:55] mobile-view header#masthead/[17:26] mobile-view #footer-nav .nav-section/[19:03] mobile-view #copyright-terms/[19:52] mobile-view #footer-nav #full-site a/[20:26] mobile-view #primary/[21:11] mobile-view.is_premier #primary/[21:41] mobile-view #content/[21:56] mobile-view article.main-feature .comments-hotness/[22:22] mobile-view .main-feature p.excerpt/[22:37] white-space: normal/[23:00] mobile-view .main-feature h1/[23:32] mobile-view .feature-container/[23:59] mobile-view #primary > ul/[24:26] mobile-view .feature-sash/[24:41] mobile-view .feature-contents/[24:56] mobile-view .feature-meta/[25:26] mobile-view figure.image/[26:26] mobile-view p > img/[27:22] 결과 확인/[28:07] mobile-view article.standalone/[28:56] mobile-view article.standalone h1/[29:26] mobile-view .comment .hidden-icon/[30:32] mobile-view header#masthead h1/[31:03] margin-bottom/[31:22] mobile-view header#masthead h1 a/[32:29] mobile-view header#masthead.premier h1/[33:15] mobile-view header#masthead.premier h1 a/[33:30] background-size/[34:05] mobile-view #primary, .mobile-view.is_premier #primary/[34:37] position: static/[34:50] mobile-view nav.post-links/[35:21] mobile-view .post-links .older/[35:37] mobile-view .post-links .newer/[36:04] mobile-view .column-1/[36:21] mobile-view .column-2/[36:37] mobile-view 속성 적용하기/[37:21] 결과 확인/[37:37] post-links .olde/[38:37] #content .subheading/[38:59] arrow/[39:22] 결과 확인/[39:37] body.dark/[40:04] 결과 확인/[40:22] @font-face/[41:07] 결과 확인/[41:52] feature-sash/[42:30] background/[43:05] body.dark h2.feature-sash/[43:43] 결과 확인/[43:59] notched-left:before/[45:12] 결과 확인/[45:35] feature-container/[46:07] body.archive .archive-feature/[46:50] archive-feature article.main-feature/[47:12] li.archive-feature .main-feature-alt/[47:30] feature-meta/[48:15] box-sizing:border-box/[48:51] z-index/[48:59] 결과 확인

15 main & canvas 클래스를 이용한 페이지 구성

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

56분 

책갈피 : [00:00] 페이지구성 살펴 보기/[00:43] 완성화면 비교하기/[01:51] html/[02:20] -webkit-text-size-adjust/[02:59] body, body.normal/[04:15] overflow-x: hidden/[04:56] 결과 확인/[05:40] a, a:visited, a:hover, a:link/[06:30] a, img/[06:58] #main/[07:24] #canvas/[07:58] clear: both/[08:11] 결과 확인/[08:31] #partnerbannerblock/[09:24] background/[10:24] -o-linear-gradient/[10:45] filter/[11:01] 결과 확인/[11:16] #partnerbannerblock .banner/[12:03] overflow: hidden/[12:54] 결과 확인/[13:33] #partnerbannerblock .banner a/[14:03] 결과 확인/[14:35] #partnerbannerblock .miniweather/[15:01] float: right/[15:43] 결과 확인/[16:51] line-height/[17:00] 결과 확인/[17:33] #miniweatherData/[18:25] 결과 확인/[18:56] miniweathertemp/[19:22] 결과 확인/[19:33] miniweathercity/[20:30] #dock/[21:40] box-sizing: border-box/[22:18] 결과 확인/[22:56] #dock .button/[24:07] white-space: nowrap/[25:11] 결과 확인/[25:56] background/[27:14] cursor: pointer/[27:56] 결과 확인/[28:18] #dockTopNews/[29:07] box-sizing: border-box/[29:33] 결과 확인/[30:07] #dockSearch/[30:44] border-right/[31:30] 결과 확인/[32:07] #dockCategories/[33:07] 결과 확인/[33:21] 완성화면 비교하기/[33:52] #dockMore/[34:22] padding-top/[35:21] 결과 확인/[35:51] settingsIcon/[36:19] background-position/[37:22] 결과 확인/[37:52] iconList, .thumbList/[38:15] clear: both/[39:07] 결과 확인/[39:34] #topNewsNews/[40:00] listSection.nounderline/[40:52] 결과 확인/[41:19] listSection/[41:59] background: url/[43:22] border-style/[44:07] min-height/[44:52] cursor: pointer/[46:45] 결과 확인/[47:29] #topNewsNews .listItem/[48:22] div.thumbList .listItem/[48:45] #topNewsNews .listItemText/[49:22] padding/[50:00] 결과 확인/[50:37] listItemText/[51:30] line-height/[52:29] overflow: hidden/[52:52] box-sizing: border-box/[53:22] 결과 확인/[53:49] listItem/[54:37] cursor: pointer/[55:28] 결과 확인

16 listSection과 listItem을 가지고 페이지만들기

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

53분 

책갈피 : [00:00] 리스트로 구성된 메뉴작업 살펴보기/[00:19] listItemText-mod/[00:53] box-sizing: border-box/[01:15] 결과 확인/[01:26] info.line/[01:49] clear: none/[02:20] 결과 확인/[02:38] listThumb/[03:07] float: left/[03:38] box-shadow/[04:13] 결과 확인/[04:42] #footer/[05:00] copyright/[05:44] line-height/[05:56] 결과 확인/[06:25] linksOfInterest/[07:23] linksOfInterest a, .linksOfInterest a:visited, .linksOfInterest a:hover/[07:39] pipe/[08:03] 결과 확인/[08:43] 페이지구성 살펴 보기/[09:31] 완성화면 비교하기/[10:37] body/[11:46] -webkit-text-size-adjust/[12:11] 결과 확인/[12:28] a/[13:15] a:hover/[14:03] 결과 확인/[14:26] clickable/[15:11] p/[16:07] header/[17:00] width/[17:52] position: relative/[18:21] 결과 확인/[19:15] header hgroup/[20:52] background/[21:15] 결과 확인/[22:07] header a#search/[23:30] width/[24:33] overflow: hidden/[25:26] 결과 확인/[26:15] header hgroup h1/[27:22] background/[28:10] 결과 확인/[29:00] header hgroup h1 a/[29:41] text-indent/[30:15] 결과 확인/[30:51] header hgroup h2/[31:44] position: absolute/[32:45] border-left/[33:13] header hgroup h2 a/[33:29] 결과 확인/[34:30] nav/[36:07] 결과 확인/[36:45] nav ul/[37:29] height/[38:00] 결과 확인/[38:22] nav ul li/[39:07] list-style-type/[39:52] text-align/[40:52] box-sizing: border-box/[41:37] background/[42:35] 결과 확인/[43:07] 완성화면 비교하기/[43:49] nav ul li.on/[44:29] 결과 확인/[45:27] nav ul li a/[46:06] overflow: hidden/[46:49] box-sizing: border-box/[47:52] 결과 확인/[48:30] nav ul li.on a/[48:43] 결과 확인/[49:15] nav ul li a/[49:42] 결과 확인/[50:06] nav ul li#h-home a/[50:43] nav ul li#h-news a/[51:15] nav ul li#h-markets a/[51:37] nav ul li#h-stocks a/[51:52] nav ul li#h-media a/[52:29] nav ul li#h-home.on a/[52:43] 결과 확인

17 Section content에 대한 메뉴 리스트 구성하기

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

55분 

책갈피 : [00:00] 메뉴작업 살펴보기/[00:26] section/[01:32] position: relative/[01:53] #dynamicHeaders section, section.relTopics/[02:34] section.ad/[02:50] ad/[03:49] section.ad.inner/[04:46] section.ad img/[05:24] section header/[06:46] box-sizing: border-box/[07:00] 결과 확인/[07:55] section header h1/[09:33] text-transform: uppercase/[10:07] 결과 확인/[10:56] section h1 a/[12:43] line-height/[13:31] 결과 확인/[14:11] section p/[14:43] 결과 확인/[15:05] section ul/[15:31] float: left/[16:17] 결과 확인/[16:33] section ul li/[17:36] min-height/[18:02] 결과 확인/[18:59] section ul li a/[19:59] font-size/[20:55] 결과 확인/[21:52] section header h1 a/[22:26] font-weight: bold/[23:30] section h1/[23:55] margin,padding/[24:29] 결과 확인/[25:03] section header.addable/[25:48] -webkit-gradient/[26:25] 속성지우고 적용하기/[27:03] section header.addable h1/[27:37] width: auto/[28:33] border: none/[29:11] line-height/[29:22] 결과 확인/[30:18] section header.addable h1 a/[30:44] font-weight: bold/[31:22] 결과 확인/[32:42] section div.btn/[33:15] box-sizing: border-box/[33:49] 결과 확인/[34:15] section div.btn a/[35:30] text-transform: uppercase/[36:15] background/[36:50] 결과 확인/[38:00] border-radius/[38:50] background/[39:15] box-sizing: border-box/[39:37] 결과 확인/[40:07] section div.btn.left/[41:49] section div.btn.right/[42:45] section div.btn.left a/[43:43] 탭메뉴 비교하기/[44:21] section div.btn.on a/[45:05] section div.btn.off a/[45:37] footer/[46:57] border-top/[47:43] 결과 확인/[48:20] footer p/[49:00] 결과 확인/[49:50] footer p#links/[50:07] footer a/[50:21] 결과 확인/[50:57] footer div#editions/[51:43] 결과 확인/[51:58] footer div#editions label/[52:21] text-transform: uppercase/[53:07] 결과 확인/[53:30] footer div#editions select/[53:45] display: block/[54:21] width/[54:35] 결과 확인/[55:00] 완성된 페이지 작업 확인

18 content영역에 로그인 페이지 구성하기

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

54분 

책갈피 : [00:00] 완성 사이트 살펴보기/[02:00] body/[02:22] a/[02:45] text-decoration: underline/[02:54] cursor: pointer/[03:10] 결과 확인/[04:03] header/[04:40] position: relative/[05:07] 결과 확인/[05:41] header a#search/[06:22] width, height/[07:07] background: url/[07:29] header hgroup h1/[07:55] position: absolute/[08:05] background: transparent/[08:12] overflow: hidden/[08:20] 결과 확인/[08:49] header hgroup h1 a/[09:14] header hgroup h2/[09:34] font-size/[09:55] 결과 확인/[10:20] header hgroup h2 a/[10:51] nav/[11:07] padding/[11:28] nav ul/[11:46] nav ul li/[12:24] border-left, border-right/[12:33] background/[12:43] 결과 확인/[13:37] nav ul li a/[13:52] float: left/[14:07] text-align: center/[14:36] background: url/[15:22] 상단메뉴/[16:46] section/[17:11] section header/[17:39] margin, padding/[17:45] box-sizing: border-box/[17:59] 결과 확인/[18:20] section header h1/[18:39] font-weight: bold/[19:01] section header h1 a/[19:21] font-weight: bold/[19:42] 결과 확인/[20:18] section header.addable/[20:37] section header.addable h1/[20:54] width: auto/[21:15] border: none/[21:23] section header.addable h1 a/[21:52] text-transform: uppercase/[22:00] 결과 확인/[22:26] section div.btn/[22:53] section div.btn a/[24:02] section div.btn.on a/[24:45] section div.btn.off a/[25:55] footer/[26:11] box-sizing: border-box/[26:21] 결과 확인/[26:37] footer p/[26:59] footer p#links/[27:14] footer a/[27:31] 결과 확인/[27:55] footer div#editions/[28:19] footer div#editions label/[28:40] display: block/[28:48] text-transform: uppercase/[29:15] footer div#editions select/[29:33] width/[30:06] section header h1 span/[30:31] text-transform:none/[30:50] #loginForm, .columnCenter .gridPanel.grid6 p,.column1 .label.error, #forgotPasswordForm p/[31:42] font-family/[32:53] #loginForm .label/[33:11] clear:left/[33:45] font-weight:bold/[34:08] 결과 확인/[34:40] #forgotPasswordForm .label/[35:25] font-size/[36:11] #loginForm .textfield, #forgotPasswordForm .textfield/[37:21] #loginForm .errorLabels .label, #loginForm .errorLabels .textfield/[38:12] forgotPsw,.linebreak,.checkbox,.forgotPsw,.submit,#footerContent/[38:24] clear:both/[38:58] checkbox,.forgotPsw,.submit/[39:17] padding/[39:59] forgotPsw a/[40:36] float:left/[40:45] padding-top/[41:15] padding-left/[41:23] 결과 확인/[43:29] nav ul li#h-stocks.on a/[43:46] background-position/[44:31] #content h1/[44:56] float: left/[45:39] margin-bottom/[46:18] border-bottom/[46:35] text-transform: uppercase/[46:58] 메세지 박스/[47:31] 결과 확인/[47:47] searchForm/[48:20] position:relative/[50:09] vertical-align:middle/[50:35] float:right/[51:19] 결과 확인/[51:49] input/[52:10] inputSearchBox/[52:43] margin-left

19 searchForm을 이용한 페이지의 search영역구성

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

53분 

책갈피 : [00:00] 완성 페이지 살펴보기/[01:09] nav ul li.on/[02:05] background/[03:00] nav ul li.on a/[03:33] nav ul li#h-media.on a/[03:51] background-position/[03:52] 결과 확인/[04:26] video/[04:39] float: left/[05:19] video h1/[05:58] padding/[06:19] margin-bottom/[06:58] border-bottom/[07:26] text-transform: uppercase/[07:44] box-sizing: border-box/[08:16] 결과 확인/[08:55] video ul li/[09:44] position: relative/[10:56] video ul li a/[11:05] height: auto/[11:37] width: auto/[12:28] font-weight: bold/[13:10] video .photo img/[13:52] z-index/[14:39] video ul li .time/[15:10] display: block/[15:47] 결과 확인/[16:32] section div.btn/[16:48] float: left/[17:06] box-sizing: border-box/[17:35] section div.btn a/[18:09] text-transform: uppercase/[19:42] border-radius/[20:12] background gradient/[21:04] section div.btn.left/[21:47] padding, margin/[22:21] section div.btn.left a/[23:05] border-right: none !important/[23:30] section div.btn.right a/[24:00] 결과 확인/[24:43] margin/[25:31] border solid/[26:23] width/[28:11] float: left/[29:22] section ul/[30:05] section ul li/[30:13] list-style-type: none/[30:34] min-height/[30:49] border-bottom/[31:39] section ul li a/[32:39] font-size/[33:03] box-sizing: border-box/[33:16] 결과 확인/[33:52] 완성 페이지 살펴보기/[34:56] webkit-text-size-adjust:none/[35:42] webkit-touch-callout: none/[36:19] webkit-tap-highlight-color: rgba/[37:13] margin: 0 auto/[37:22] min-height/[38:39] font-size/[39:01] line-height:normal/[40:30] text-decoration: none/[41:11] float: right/[42:02] float: none/[42:44] border/[44:04] 결과 확인/[45:08] height/[45:15] overflow:hidden/[46:32] background:gradient/[48:36] list-style:none/[48:47] list-style-image:none/[49:58] border-right/[51:28] display:block/[52:22] text-shadow/[52:33] text-align:center/[52:48] font-weight:normal

20 크기를 조절한 list 목록의 페이지구성

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

52분 

책갈피 : [00:00] 완성 페이지 살펴보기/[00:25] #or_headerNew .tabs li.first/[00:33] border-left:0/[00:59] border-right:0/[01:27] float:left/[02:01] width/[02:06] opacity/[02:44] filter:alpha/[03:07] 결과 확인/[03:49] border:0/[04:17] margin/[05:26] background:url/[06:08] 결과 확인/[05:52] 메뉴 배경설정 1/[06:08] 메뉴 배경설정 2/[06:51] 메뉴 배경설정 3/[07:16] 메뉴 배경설정 4/[07:38] 결과 확인/[07:54] 로고 배경설정/[09:18] margin, padding/[10:07] list-style: none/[10:28] list-style-image: none/[10:57] text-decoration: none/[11:25] border-bottom/[12:08] 완성 페이지 확인/[13:04] box-sizing: border-box/[14:02] overflow: hidden/[14:40] float: left/[15:26] border-right/[16:47] border-top/[18:59] font-size/[19:21] text-shadow/[19:59] background:gradient/[20:29] 결과 확인/[21:10] overflow: hidden/[22:54] margin, padding/[23:34] height, width/[24:44] margin, padding/[25:07] font-style: normal/[26:20] text-shadow/[27:56] background-color/[28:30] display: table/[29:38] float: left/[30:00] text-align: center/[30:33] 결과 확인/[31:36] vertical-align:middle/[32:55] text-align: center/[34:08] box-shadow/[35:04] display: block/[36:36] overflow: hidden/[38:12] height, width/[38:52] border/[40:00] 결과 확인/[40:57] font-weight: bold/[41:44] white-space: nowrap/[43:33] padding-right/[45:34] overflow:hidden/[46:18] clear:both/[47:03] background-image:url/[48:23] display:inline-block/[49:21] position:absolute/[50:42] 결과 확인

샘플확인 : 알지오 검색후 -> 강의검색란 -> 모바일UI 실무 [css3 Skill UP]