웹퍼블리셔 [현장실습] 강의 기초 부터 실무 인강 알지오 강좌

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

웹퍼블리셔 [현장실습]

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

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

1:1 수강생 전용
GPT 및 최신 AI 기술을 활용한 맞춤형 답변 제공

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

수강료
510,000원
255,000원

"5개월" 혜택!

수강 전 자주 묻는 질문

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

본 강의는 교재 없이도 동영상 강의만을 통해 충분히 학습할 수 있도록 구성되어 있습니다. 제공되는 실습 자료를 활용해 따라 하면서 학습하시면, 초보자도 이해하고 따라올 수 있게 설계된 강의입니다.

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

저희 강의는 단순한 전문가 촬영본을 넘어섭니다. 전문 편집을 통해 필수 내용만을 선별하고, 불필요한 부분을 제거함으로써 학습 효율을 극대화합니다.

웹퍼블리셔 [현장실습] 인강 평생교육원 교육 안내
HTML과 CSS구현이 이미 가능한 경우 해당 강의가 알맞습니다.
웹디자이너라고도 할 수 있는 코딩된 페이지를 웹표준에 알맞게 작업하는 과정을 진행합니다.
웹접근성, 크로스브라우징, 시멘틱마크업 등의 원칙에 맞추어 코딩해야 하는 직업군입니다.
또는 이미 작업된 웹 페이지도 크롬의 속성툴을 이용하여 웹표준, 웹접근성이 가능하도록 하는 작업을 제작하면서 진행합니다.
모든 작업진행은 크롬의 검사 기능을 활용해서 점검하고 비교 설명합니다.

단기 습득!

2년 연속 IT교육 인강부분 1위 알지오 (근거자료)

2003년부터 운영해온 수많은 데이터베이스를 기반으로

단기 습득할 강의

로 제공합니다!
늦지 않았습니다. 알지오에서 지금부터 시작하세요!

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

웹표준 [입문 + 고급]