강의자료 제공과 학습진도 관리는 어떻게 되나요?

모든 강좌에 강의자료를 제공하며, 수강생 대시보드에서 학습진도 확인이 가능합니다. 강사답변/질문답변 기능으로 질의응답도 지원합니다.

평생교육이용권은 무엇이며 사용처는 어디인가요?

평생교육이용권은 다양한 온라인/오프라인 교육 과정을 이용할 수 있는 패스이며, 알지오평생교육원 포함 제휴 사용처에서 적용됩니다. 상세 사용처는 공지 페이지를 참고하세요.

추천 인강과 IT강의 로드맵이 있나요?

기초→전문→실습 순으로 구성된 로드맵을 제공하여 IT 비전공자도 체계적으로 학습할 수 있습니다.

웹퍼블리셔 [현장실습] 강의 기초 부터 실무 인강 알지오 평생교육원 추천강의

기초부터 차근차근 실무까지.
마지막 학습 보장!

웹퍼블리셔 [현장실습]

강의구성
(37강) 전체 : 36시간 39분|평균 : 59분25초

이용기간 / 강사
2개월 / 알지오 R&D [IT]

증빙가능
수료증, 수강증, 학습진도

수강료
510,000원
255,000원

"5개월" 혜택!

수강 전 자주 묻는 질문

교재 없이? 초보자도 가능 한가요?

교재 없이도 동영상과 실습 자료만으로 학습할 수 있으며, 초보자도 이해하고 따라올 수 있도록 설계된 강의입니다.

알지오의 강의특징은 무엇인가요?

알지오 강의는 단순 촬영본이 아니라, 전문 편집으로 핵심만 담아 학습 효율을 높인 강의입니다.

프로그램은 어떻게 구하나요?

알지오 는 원격평생교육원 으로, 프로그램에 대한 정보는 알수 없습니다.

강의목록

수강생 리얼후기!

연관학과

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 강의 질문&답변

웹표준 [입문 + 고급]