알지오 평생교육원

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

모바일UI 실무 [css3 Skill Up]

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

이용기간 2개월

전문강사 : 김성민

420,000255,000



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

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

    책갈피 : [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.54분 로그인 페이지에서의 nav 메뉴

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

    책갈피 : [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.51분 소개페이지의 table정렬

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

    책갈피 : [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.56분 table로 지정된 페이지 하단 list메뉴와 footer메뉴

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

    책갈피 : [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.56분 search box 영역으로 메뉴 만들기

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

    책갈피 : [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.52분 table cell 이용한 search icon 영역만들기

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

    책갈피 : [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.54분 footer 메뉴 영역설정과 image배치작업

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

    책갈피 : [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.58분 sign in 페이지작업하기

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

    책갈피 : [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.50분 기본 구성된 page의 css적용

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

    책갈피 : [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.59분 list로 구성된 page작업

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

    책갈피 : [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.1시간 4분 list로 작성된 table 정렬

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

    책갈피 : [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.49분 list 메뉴의 정렬과 배경지정

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

    책갈피 : [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.50분 메인 페이지에 적용하는 list 목록 만들기

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

    책갈피 : [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.56분 main & canvas 클래스를 이용한 페이지 구성

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

    책갈피 : [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.53분 listSection과 listItem을 가지고 페이지만들기

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

    책갈피 : [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.55분 Section content에 대한 메뉴 리스트 구성하기

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

    책갈피 : [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.54분 content영역에 로그인 페이지 구성하기

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

    책갈피 : [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.53분 searchForm을 이용한 페이지의 search영역구성

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

    책갈피 : [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.52분 크기를 조절한 list 목록의 페이지구성

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

    책갈피 : [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] 결과 확인