HOME>디지털 실무>앱 개발 | 모바일홈페이지>모바일 홈페이지 제작
ONLINE CLASS

모바일 홈페이지 제작

?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?
A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

◆
기업이 선택한 신뢰 강의

검증된 커리큘럼과 전문 강사진으로 높은 만족도를 제공합니다.

자세히 보기  >
♥
수강료 일부는 사회환원에 사용됩니다.

작은 나눔이 더 나은 내일을 만듭니다.

자세히 보기  >
REAL REVIEW

수강생 리얼후기!

실제 수강생의 학습 경험을 확인해 보세요.

수강후기를 불러오는 중입니다.

모바일 홈페이지 제작 모바일 홈페이지 제작

  • 모바일 홈페이지 제작

  • 강의구성
  • (20강) 전체 : 18시간 1분|평균 : 54분2초
  • 이용기간/강사
  • 2개월
    알지오 R&D [IT]
  • 증빙가능
  • 수료증, 수강증, 학습진도
  • 수강료
  • 510,000원할인255,000원
  • 알지오 패키지
    • "5개월" 혜택!
?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q 초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?
A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

수강료 일부는 사회환원에 사용됩니다.

작은 나눔이 더 나은 내일을 만듭니다.

자세히 보기 >
  • 01.49분 메인 페이지의 탭 메뉴
    기본 메인 페이지에 대한 탭속성과 검색바 속성에 대해서 학습하고, 탭메뉴를 활성화하는 방법에 대해서 실습해봅니다.
    완성 사이트 살펴보기/html 문서 살펴보기/margin, padding/font-family, font-size/background:url/position:relative/width, height, background-color/display:inline-block/position:absolute/text-decoration:none/font-size, font-weight:bold/position: absolute/display:block/font-size, font-weight:bold/position: absolute/gnSearchBoxColumn/padding/width, background-color/width, height/padding, margin, border/input/font-size, height/float, position/clear, clear:both/text-align:right/vertical-align:middle/margin/position:absolute
  • 02.56분 메인 페이지의 nav 메뉴
    gradient 속성을 이용한 배경이미지가 어떻게 적용되는지 학습해보고 nav메뉴가 dispaly:none 속성과 overflow:hidden속성 적용에 따라 차이의 모습을 학습합니다.
    width, height/overflow:hidden/letter-spacing/display:inline-block/border-right/text-align:center/box-shadow:inset/content:/font-family, font-weight, font-size/letter-spacing. position/border-right/text-align:center/box-shadow:inset/background-image/font-family, font-weight, font-size/letter-spacing, position/text-align, height/box-shadow:inset, background-image/font-family, font-weight/letter-spacing/position:relative/background-size/text-align:center/padding, display:block/text-transform:lowercase/background:url/text-align, line-height/signIN
  • 03.54분 로그인 페이지에서의 nav 메뉴
    로그인 페이지의 기본폼에서 nav 메뉴는 어떻게 적용되는지 학습하고 SearchBox에 대한 속성 지정방법에 대해서 실습을 진행합니다.
    로그인페이지 살펴보기/margin, padding/font-family, font-size/position:relative/background:url/text-decoration:none/max-width, height:auto/outline, border/background-color/position:absolute/padding, width/clear:both, display:block/webkit-appearance, webkit-border-radius/vertical-align:middle/margin-bottom/overflow:hidden, letter-spacing/box-shadow:inset/background-image/text-decoration:underline/input type
  • 04.51분 소개페이지의 table정렬
    소개페이지의 이미지정렬할때의 CSS속성에대해서 학습해보고 모바일에서 적용되는 footer메뉴 속성에 대해서 실습을 진행합니다.
    상품 소개 페이지 적용하기/페이지 완성 화면 살펴보기/width, height/margin, padding/font-weight, text-decoration/clear, background/width, overflow/mobille css/margin, font-size/min-height/text-size-adjust/a, a:visited, a:hover/input/:before/pointer-events
  • 05.56분 table로 지정된 페이지 하단 list메뉴와 footer메뉴
    하단에 생성되는 footer메뉴에 대한 이미지 지정과 list메뉴에 대한 정렬 속성을 적용시켜보고 실습을 진행합니다.
    a:hover/input type=email/footer_content/white-space/list_item/background/display/text-decoration/font-style, font-size, font-family/word-wrap/text-align/border-color/완성화면 비교하기/sign-up-email/sign-up-button
  • 06.56분 search box 영역으로 메뉴 만들기
    table cell로 정의된 페이지에 search box 영역을 만들고 input type을 활용한 메뉴 만들기
    webkit-text-size-adjust:none/font-family/margin, padding, position/overflow:hidden/box-shadow/border, display:table/section/display:table-cell/vertical-align:middle/white-space:nowrap/a:active, a:visited, a:link/text-decoration:none/webkit-tap-highlight-color:rgba/background-image, background-position/srchCl, .myBCl/text-align:center/cursor:pointer/background-position/display:table/vertical-align:middle/margin-right/background-color:transparent/line-height/font-size
  • 07.52분 table cell 이용한 search icon 영역만들기
    tablecell을 지정해서 icon영역 지정하고 content영역의 속성을 적용시켜봅니다.
    padding/background-color, background gradient/border/vertical-align:middle/display:inline-block/text-align:center/z-index/box-shadow/hidden/background:transparent/background-size, background-position/padding/line-height/overflow:hidden, white-space:nowrap/list-style:none/word-wrap:break-word/font-weight/background-image
  • 08.54분 footer 메뉴 영역설정과 image배치작업
    footer section을나누고 section마다 영역을 지정한 속성을 각각 넣어보는 작업을 진행합니다.
    footer메뉴와 하단메뉴 설명/display:inline-block/arrowSprite/background-position/morewrap/text-align:center/font-family/position:absolute/display:block/border-bottom:none/background-size/visibility:hidden/로그인 페이지 살펴보기/적용되는 속성 묶어서 지정하기
  • 09.58분 sign in 페이지작업하기
    page작업에 필요한 속성외에도 전체적인 속성을 지정해주는 css속성 적용방법에 대해서도 적용하여 확인해봅니다.
    로그인페이지 살펴보기/vertical-align:middle/white-space:nowrap/font-weight:bold/word-wrap:break-word/footlist/display:block/line-height/line-height, visit_count/font-size/text-decoration:underline/text-overflow:ellipsis/input type/appearance/primary/text-shadow/box-shadow
  • 10.50분 기본 구성된 page의 css적용
    기본page의 구성을 살펴보고 css속성 적용의 방법에 대해서 실습합니다.
    하단메뉴 적용하기/display:block/border-radius/text-align:center, vertical-align:middle/background-color/이미지로 구성된 메뉴 살펴보기/text-size-adjust:none/background-attachment/border:none,outline:none/bannerContainer/menu/text-align:center, position:relative/footer/text-transform:uppercase/cursor:pointer/font-size/section/errormessage
  • 11.59분 list로 구성된 page작업
    list로구성된 메뉴항목을 table cell로 나누어 각 속성을 지정하는 작업을 진행합니다.
    리스트로 구성된 메뉴작업 살펴보기/완성화면 비교하기/text-size-adjust/list-style-image/color: inherit/text-decoration/ul, li/repeat-x scroll/display: block/text-shadow/clear: left/overflow: hidden/background-color/repeat-x scroll/clear: none/border-radius
  • 12.1시간 4분 list로 작성된 table 정렬
    section영역을 나누어서 작성된 page영역을 정렬해서 속성을 지정해보는 작업을 해봅니다.
    리스트메뉴 구성 살펴보기/font-weight/clear: left/font-weight/title-wrapper/vertical-align: middle/text-shadow/next-link/current-page/background: transparent/search-field/clear: right/display: block/small, medium, large/font-weight/display: block/완성된 페이지 작업 확인
  • 13.49분 list 메뉴의 정렬과 배경지정
    list로 작성된 메뉴들을 정렬하고 배경적용에대한 속성지정에 대해서 작업과 결과를 확인해봅니다.
    기본 메인페이지 살펴보기/linear-gradient/text-decoration: none/padding/text-indent/list-style: none/display: block/overflow: hidden/clearfix:after/text-transform: uppercase/text-rendering: optimizeLegibility/display: inline-block/float: none/subheading/nav-section a
  • 14.50분 메인 페이지에 적용하는 list 목록 만들기
    list로작성된 메뉴를 가지고 메인 페이지에서 적용하는 속성 지정에 대해서 알아보고 그 결과를 확인해봅니다.
    display: none/background:none/text-shadow:none/clear: both/float: none/white-space: normal/margin-bottom/background-size/position: static/mobile-view 속성 적용하기/arrow/background/notched-left:before/box-sizing:border-box
  • 15.56분 main & canvas 클래스를 이용한 페이지 구성
    main & canvas을 가지고 메인 페이지구성에 대해서 알아보고 Heder 상위메뉴만들기
    페이지구성 살펴 보기/-webkit-text-size-adjust/overflow-x: hidden/clear: both/background/filter/overflow: hidden/float: right/box-sizing: border-box/white-space: nowrap/cursor: pointer/box-sizing: border-box/padding-top/background-position/clear: both/background: url/padding/line-height/cursor: pointer
  • 16.53분 listSection과 listItem을 가지고 페이지만들기
    listItem을 가지고 메인 페이지구성에 대해서 알아보고 thumbList에 대한 정렬을 이용해 mainContainer 구성하기
    리스트로 구성된 메뉴작업 살펴보기/box-sizing: border-box/float: left/copyright/페이지구성 살펴 보기/a:hover/header/background/overflow: hidden/text-indent/position: absolute/nav/list-style-type/background/overflow: hidden
  • 17.55분 Section content에 대한 메뉴 리스트 구성하기
    Section content에대한 영역을 가지고 페이지를 구성하는 작업을 진행합니다.
    메뉴작업 살펴보기/section/box-sizing: border-box/line-height/float: left/font-size/margin, padding/width: auto/font-weight: bold/text-transform: uppercase/border-radius/탭메뉴 비교하기/footer/text-transform: uppercase/width
  • 18.54분 content영역에 로그인 페이지 구성하기
    loginForm,textfield 를 이용해 로그인페이지를 구성하고 footer메뉴의 아이콘 이미지 구성에 대해 알아봅니다.
    완성 사이트 살펴보기/text-decoration: underline/position: relative/background: transparent/border/text-align: center/section/box-sizing: border-box/font-weight: bold/text-transform: uppercase/footer/display: block/text-transform:none/clear:left/clear:both/padding/메세지 박스/vertical-align:middle
  • 19.53분 searchForm을 이용한 페이지의 search영역구성
    inputSearchBox이용해 리스트를 구성하고 Search영역을 만들어봅니다.
    background/video/box-sizing: border-box/font-weight: bold/z-index/float: left/background gradient/margin/list-style-type: none/font-size/margin: 0 auto/text-decoration: none/overflow:hidden/display:block
  • 20.52분 크기를 조절한 list 목록의 페이지구성
    메뉴리스트를 구성하고 리스트의 구성 및 배치방법과 각각의 Item 배치에 대해서 실습을 진행합니다.
    완성 페이지 살펴보기/opacity/메뉴 배경설정/로고 배경설정/list-style: none/box-sizing: border-box/text-shadow/overflow: hidden/text-shadow/vertical-align:middle/overflow: hidden/font-weight: bold/white-space: nowrap/clear:both/display:inline-block/position:absolute

강의목록 다운로드                        1:1 강의 질문&답변