HOME>디지털 실무>HTML CSS | 반응형홈페이지>웹퍼블리셔 [현장실습]
ONLINE CLASS

웹퍼블리셔 [현장실습]

?

수강 전 꼭 확인하세요

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

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

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

◆
기업이 선택한 신뢰 강의

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

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

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

자세히 보기  >
REAL REVIEW

수강생 리얼후기!

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

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

웹퍼블리셔 [현장실습] 웹퍼블리셔 [현장실습]

  • 웹퍼블리셔 [현장실습]

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

수강 전 꼭 확인하세요

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

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

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

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

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

자세히 보기 >
  • 01.1시간 5분 코딩실무까지 완벽 마스터 1
    font, line-height, text-indent, text-align, white-space, vertical-align
    font-family/generic-family/실습 cursive, fantasy, monospace/oblique/normal/extra-expanded, ultra-expanded/normal, length/none, 수치/실습/white-space/길이/[01:02:45] super/[01:04:40] bottom
  • 02.1시간 6분 코딩실무까지 완벽 마스터 2
    word-spacing, letter-spacing, text-decoration, text-transform, shadow, background
    word-spacing/길이/실습/실습/실습/unicode-bidi/text shadow/색상/CSS2.1(RGB 숫자형)/명도차 계산법/background repeat/[01:04:03] 이미지 좌표 사용하기
  • 03.55분 코딩실무까지 완벽 마스터 3
    link, background, display, visibility
    background position/백분율/실습/a:link, a:visited, a:active, a:hover, a:focus/background attachment/실습/실습/inline/실습/inline-table/실습/실습
  • 04.1시간 3분 코딩실무까지 완벽 마스터 4
    position, z-index, overflow, float
    position/예제실습/예제/top, right, bottom, left/number/자연 스택순서/clip 주의사항/visible/visible 실습/float/실습/clear/[01:02:08] 예제
  • 05.40분 코딩실무까지 완벽 마스터 5
    min, max
    width/백분율/auto, 백분율 실습/inherit/백분율/height /길이 실습/inherit/none, inherit/R&D 팀소개
  • 06.1시간 1분 코딩실무까지 완벽 마스터 6
    margin, Padding
    margin-top/길이 실습/auto/백분율 예제/margin-left/margin/백분율, auto 예제/길이/백분율/길이/길이/[01:00:10] tip
  • 07.1시간 44분 코딩실무까지 완벽 마스터 7
    Border
    Border-Top-Style/dashed 실습/inset/solid 실습/dotted, dashed 실습/none, hidden, dotted, dashed, solid/Border-Top-width/thick/thin/실습/thin medium thick 길이 inherit/Border-Top-color/[01:01:47] transparent/[01:05:43] 예제/[01:10:49] color 예제/[01:15:00] color/[01:19:48] 예제/[01:26:27] Border-color/[01:32:53] Border-Bottom/[01:36:37] Border-Right 예제/[01:42:21] 이미지 예제
  • 08.1시간 34분 코딩실무까지 완벽 마스터 8
    List-Style-Type, Table-layout, Border-Collapse, Border-spacing, Empty-cells, Caption-side
    List-Style-Type/none 실습/decimal 실습/armenian 실습/lower-latin 실습/List-Style-image/url 예제/inside 예제/List-Style-image/fixed/[01:00:26] Border-Collapse 실습/[01:09:00] Border-spacing/[01:17:31] show/[01:25:12] top/[01:29:11] 예제
  • 09.45분 코딩실무까지 완벽 마스터 9
    Counter, Quotes
    Content/counter/counter 실습/Counter-increment 실습/Counter-Reset/<초기값>/Counter-Reset 예제2/inherit/Quotes 예제2
  • 10.1시간 7분 코딩실무까지 완벽 마스터 10
    Cursor, Outline
    Cursor/default/wait/ne-resize/crosshair, pointer, move 예제/실습/Outline-style 예제/invert 실습/thick/Outline-Width 예제2/[01:02:12] Outline 실습/[01:06:31] Outline 예제2
  • 11.36분 코딩실무까지 완벽 마스터 11
    Page, Orphans, Widows
    Page-Break-Before/avoid/auto/right/avoid/@page/<정수>/auto 예제
  • 12.47분 코딩실무까지 완벽 마스터 12
    tab-size, line-break, word-break, hyphens, text
    text-space-collapse/preserve/tab-size 예제/line-break 실습/word-break 한글 예제/text-align-last/text-align-last 예제2/inter-word/distribute, kashida 예제
  • 13.44분 코딩실무까지 완벽 마스터 13
    hanging, writing-mode, background
    hanging-punctuation/hanging-punctuation 팁/10:54] text-decoration-line 예제/text-decoration-color 예제2/text-underline-position 예제/vertical-lr/background-clip 예제/background-origin 예제3
  • 14.45분 코딩실무까지 완벽 마스터 14
    background, border
    background-size/백분율-영역 비례/백분율 실습/백분율-두개의 값 입력/4개의 값 지정/다양한 예제/<이미지> 예제/선의 좌표/예제
  • 15.52분 코딩실무까지 완벽 마스터 15
    border, box, overflow
    border-image-width/길이 예제/number 예제/border-image-repeat 예제/slice/y-방향값/box-shadow 성격1/overflow-x 사용 예/no-display, no-content 예제/no-display, no-content 예제
  • 16.1시간 20분 코딩실무까지 완벽 마스터 16
    text, @font-face
    CSS Property/속성을 지정해줄때 참고할 점/d-circle 클래스 선언/대체 가능한 속성 설명/결과확인/string 속성적용확인/예제/blur, color값 적용/예제/[01:03:33] font-stretch/[01:09:07] 특정 폰트사용
  • 17.57분 코딩실무까지 완벽 마스터 17
    animation, @keyframes
    animation keyframes 속성/기본예제 결과 확인/브라우저별 코드 적용/keyframes 선언/애니메이션 진행결과 확인/이동위치값 변경/play 상태값 확인/ease-out 효과 적용/애니메이션 방향속성/애니메이션의 적용시 속성 값 적용
  • 18.60분 코딩실무까지 완벽 마스터 18
    shadow
    box-shadow 속성/기본 클래스 선언/그림자 위치 지정/브라우저의 페이지 적용/box-decoration-break/결과 값 적용 확인/기본 속성값 적용/결과 값 적용 확인/결과 확인 비교
  • 19.53분 코딩실무까지 완벽 마스터 19
    box, flexible
    box-direction/방향확인/속성 지정값 변경/옵션값적용 비교/기본 구성 코드 확인/예제 결과 이미지 확인/결과 확인/기본 속성 적용 스타일 추가/그룹 값 설정/결과확인
  • 20.59분 코딩실무까지 완벽 마스터 20
    multi-column, transform
    multi-column properties/다단적용 속성의 옵션값들/같은 영역안에서의 다단 효과/좌표값에서의 위치적용변화/브라우저적용 속성 확인/scale/기본 옵션 설정 값 확인/여러개 값 지정시 속성 적용 방법/속성 결과값 확인/transiton 속성
  • 현업 퍼블리싱
  • 21.29분 페이지 코딩 실습 Part 1
    페이지를 구성하는 프레임들을 코딩하며 구성요소들을 실습합니다.
    각 기기의 페이지 구성/*의 의미/css연동시 유의점/message창 스타일/TOP메뉴 스타일/검사속성
  • 22.33분 페이지 코딩 실습 Part 2
    W3C의 HTML5 CSS3의 표준 인증테스트, 검색에 노출되는 TIP, 상속관계 난이도
    CSS 연동페이지 확인하기/W3C 검사페이지 (인증테스트)/검색에 노출되는 TIP/inline 설정과 Block설정/m2line(구분선)/munue 부분/fourth 부분
  • 23.26분 페이지 코딩 실습 Part 3
    반응형이 아니어도 어떤 해상도에서도 일그러짐없이 유지, 한글폰트 css 깨짐까지 해결하는 제작스킬
    인트로/반영된부분 주석처리 의미/한글폰트 깨짐 해결/amain 항목/bottom box 항목/footer 항목
  • 24.42분 페이지 코딩 실습 Part 4
    또다른 2개의 페이지를 실습하면서 상속관계와 계층, 레이아웃이 점령할 영역의 기준에 대해서 구체적으로 실습합니다.
  • 25.42분 페이지 코딩 실습 Part 5
    진정한 퍼블리셔의 방식으로 가로 3단 페이지 실습과 폼 관련 요소들과 가상클래스의 컨텐츠 제작스킬을 알려드립니다.
  • 26.33분 페이지 코딩 실습 Part 6
    메뉴실습 2가지 CSS만으로도 마우스 오버와 포커스에 하부메뉴 출력, 마우스 종류별 트랜지션 효과, 툴팁
  • 27.38분 페이지 코딩 실습 Part 7
    종류별 슬라이딩 메뉴 인풋과 일반 메뉴를 로딩과 동시에 애니메니션 효과, 이미지 색상 및 알파값으로 나오게 합니다.
  • 28.28분 페이지 코딩 실습 Part 8
    마우스오버 시계방향 및 로딩 후 회전과 속도, 일반 서브 페이지 제작 1, 2
  • 29.37분 페이지 코딩 실습 Part 9 (완결!)
    여러 페이지 실습과 종류별 애니메이션 메뉴와 입체버튼 제작으로 전문적인 코딩을 할 수 있게 합니다.
  • [실무자 초빙 강의] 실무역량 강화를 위한 웹표준 실전편
  • 30.1시간 25분 잘 만들어진 웹사이트 제작 NO1
    실무에 활용도가 높은 메뉴&홈페이지 제작하면서 레이아웃 구성과 디자인 익히기
    완성 홈페이지 살펴보기/전체적인 레이아웃/header a/nav 정의/nav ul li a:hover/article 정의/#welcome .col-2/#welcome ul li a:hover/section h1/section a.btn span/[01:01:02] section2/[01:09:22] #recent-articles .article-1/[01:13:48] #recent-articles .article-2 a.btn/[01:19:45] #personal-overview .overview-1/[01:23:30] #personal-overview .overview-2 ul
  • 31.1시간 25분 잘 만들어진 웹사이트 제작 NO2
    실무에 활용도가 높은 메뉴&홈페이지 제작하면서 레이아웃 구성과 디자인 익히기
    완성 홈페이지 살펴보기/전체적인 레이아웃/현재 적용상황/#globalheader #globalnav/메뉴 이미지 불러오기/#g-search/동영상 이미지 삽입/#main/border solid/#billboard .videos-thumb:hover i .play/[01:00:45] 레이아웃 정리/[01:05:01] aside 정의/[01:11:10] .promos ul li.last-child/[01:18:06] .promos ul li a
  • CSS코드 분석
  • 32.56분 CSS코드 분석 활용 방법
    다른 웹사이트에 적용된 CSS코딩을 내 웹페이지에 그대로 적용할 수 있게 하는 방법 및 어떤 웹페이지도 분석해낼수 있는 CSS코딩의 지존이 될 수 있는 고급기술을 알려드립니다.
    웹표준 사이트 제작의 기본 단계/웹표준 사이트의 구성요소/웹표준의 주요점/플러그인 작동 방식/computed style 보기/이미지 오퍼시티 해제/main 클래스 보기/문서구조상으로 보기/head 적용된 속성값 보기/폰트페이스 적용/마진, 패딩값 입력/아이콘 예로 style 적용
  • 모든 브라우저
  • 33.1시간 2분 제작한 그대로 문제없이 모든 브라우저에서 동일하게 출력
    (css) 크롬, 사파리, 파이어폭스, IE 및 windows 버전별 동일, (image) 이미지 한장으로 모든 이미지 해결
    모든 브라우저/이미지 한장으로 표현/본문 살펴보기/검색 버튼/overflow: hidden/list-style: none/width, height/카테고리/background: url/웹기획 이미지/:first-child/이미지 스킨/수강신청, 샘플 버튼/[01:00:31] margin-left
  • 34.1시간 10분 모든 브라우저 실무코딩
    직접 css코딩 노하우 전달
    기본 문서 살펴보기/모바일 홈페이지에서 사용하는 소스 코드/.allpage/float: left/포토샵으로 이미지 사이즈 정하기/.menu .azmen6/.shadowbox/.leftnavigation li .front/.lefthot li/#main .subone p {line-height:180%;}/color/display: inline-block, width, height//[01:03:02] display:inline-block, width/[01:08:26] display: inline-block, background: url
  • SASS(SCSS)
  • 35.2시간 3분 chapter 1
    ruby sass 설치, gem update, watch app, sass:public, SCSS 컴파일, 변수, cmd 열기, Mapping, 주석처리 - 줄맞춤, 재실행, 변수정의, ID생성, $magin-top-1, WARNING on line of Error 설명, border-radius($radius3) - @extend, 백분율 계산, (UTF-8), 출력스타일 정의, compressed nested compact expanded - 한글출력 처리, $value * 1px, cursor: n + -resize, scss의 차이 변환, map-values, @each, map-get, sourceMappingURL - @if map-has-key, map-merge, Error 발생, @each, nth, $:hover, @extend.sra, @media, @impor
    css 모듈/ruby 설치/sass 설치/gem i sass/alview.css 와 alview의 차이점/Error 발생/sass에 대한 변수 처리/value값과 변수명 동일화/WARNING on line 23 of all.sass/.sra, .aas/출력스타일 정의/.abvfr/[01:01:59] color값에 대한 변수정의/[01:07:28] start, end 필터값/[01:12:23] $class: accr/[01:20:27] $font:/[01:30:10] 중첩기능/[01:38:36] 주석처리/[01:46:49] 클래스 생성(.div)/[01:48:51] 클래스명(.alzio) 확장/[01:53:54] @media (min-width: 300px)/[01:58:13] padding/[02:03:39] @import 'abcde/al2im'
  • 36.2시간 0분 chapter 2
    sass-mq --save, _mq.scss, @import, @include mq, $from, media 쿼리, min-width, max-width, min-device-pixel-ratio, min-resolution, @extend, @mixin, webkit moz ms o, @each , @if, column-gap, @content, @warn, @for, @while, @function, @return, @media print, @at-root, gem install compass, compass create alziosass, config.rb, syntax 옵션, compass compile, sass-cache, bower_components, gem install bourbon
    /[01:35:13] 주석문구 추가/[01:43:53] lib 폴더(compass,animation)/[01:46:54] alzioyess --syntax scss/[01:52:10] ANSI → UTF-8/[01:53:56] 스타일시트 속성/[01:56:10] font size, font-family 정의/[02:00:16] import
  • 37.1시간 37분 chapter 3
    글꼴 세팅(정의), font-face, Padding Box, Border Box, content-box, text-shadow, border-radius, box-shadow, box-sizing, display: inline-block, vertical-align, user-interface, placeholde, global-reset, reset-box-model, overflow scroll, reset-list-style, reset-image-anchor-border, reset-html5, @charset, reset-html5, nested-reset, layout, #root,#root_footer,#footer
    한글 글꼴/글꼴 세팅(정의)/compass 폴더 확인/images_dir = "img"/@include prefixed-properties/box-sizing(content-box)/opacity 출력/compass 테스트/* also accepts "all" or "none"/[01:03:22] input, textarea/[01:10:26] 수정대상=원본파일/[01:19:25] @include body-a;/[01:27:49] nested-reset/[01:36:52] compass compile

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