모바일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]