웹퍼블리셔 [현장실습]

37회차 속성과정
전체 : 36시간 39분|회차당 평균 : 59분25초

이용기간 2개월

전문강사 : 알지오 R&D [IT]

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

01.1시간 5분 코딩실무까지 완벽 마스터 1
font, line-height, text-indent, text-align, white-space, vertical-align

책갈피[00:40] font-family/[05:14] generic-family/[10:15] 실습 cursive, fantasy, monospace/[16:07] oblique/[22:47] normal/[29:11] extra-expanded, ultra-expanded/[35:19] normal, length/[40:50] none, 수치/[45:33] 실습/[52:04] white-space/[56:36] 길이/[01:02:45] super/[01:04:40] bottom
02.1시간 6분 코딩실무까지 완벽 마스터 2
word-spacing, letter-spacing, text-decoration, text-transform, shadow, background

책갈피[00:06] word-spacing/[05:16] 길이/[10:06] 실습/[15:29] 실습/[21:26] 실습/[28:44] unicode-bidi/[34:19] text shadow/[40:39] 색상/[45:02] CSS2.1(RGB 숫자형)/[53:09] 명도차 계산법/[58:03] background repeat/[01:04:03] 이미지 좌표 사용하기
03.55분 코딩실무까지 완벽 마스터 3
link, background, display, visibility

책갈피[00:00] background position/[00:14] 백분율/[04:06] 실습/[10:39] a:link, a:visited, a:active, a:hover, a:focus/[15:58] background attachment/[18:26] 실습/[23:59] 실습/[30:05] inline/[35:31] 실습/[41:07] inline-table/[45:10] 실습/[50:39] 실습
04.1시간 3분 코딩실무까지 완벽 마스터 4
position, z-index, overflow, float

책갈피[00:28] position/[02:36] 예제실습/[07:48] 예제/[12:32] top, right, bottom, left/[16:26] number/[20:21] 자연 스택순서/[26:40] clip 주의사항/[34:44] visible/[40:09] visible 실습/[46:04] float/[51:42] 실습/[57:24] clear/[01:02:08] 예제
05.40분 코딩실무까지 완벽 마스터 5
min, max

책갈피[00:21] width/[03:39] 백분율/[07:52] auto, 백분율 실습/[11:48] inherit/[15:45] 백분율/[20:45] height /[25:12] 길이 실습/[31:15] inherit/[36:35] none, inherit/[39:43] R&D 팀소개
06.1시간 1분 코딩실무까지 완벽 마스터 6
margin, Padding

책갈피[00:02] margin-top/[05:52] 길이 실습/[10:09] auto/[15:33] 백분율 예제/[20:51] margin-left/[24:53] margin/[30:17] 백분율, auto 예제/[37:00] 길이/[43:04] 백분율/[48:57] 길이/[54:23] 길이/[01:00:10] tip
07.1시간 44분 코딩실무까지 완벽 마스터 7
Border

책갈피[00:08] Border-Top-Style/[05:02] dashed 실습/[10:11] inset/[15:01] solid 실습/[19:50] dotted, dashed 실습/[25:46] none, hidden, dotted, dashed, solid/[30:51] Border-Top-width/[35:21] thick/[40:03] thin/[45:44] 실습/[50:57] thin medium thick 길이 inherit/[55:04] 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

책갈피[00:05] List-Style-Type/[06:12] none 실습/[11:02] decimal 실습/[15:11] armenian 실습/[20:52] lower-latin 실습/[25:07] List-Style-image/[31:45] url 예제/[37:58] inside 예제/[43:01] List-Style-image/[51:06] 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

책갈피[00:06] Content/[07:26] counter/[13:55] counter 실습/[21:43] Counter-increment 실습/[25:53] Counter-Reset/[30:21] <초기값>/[35:34] Counter-Reset 예제2/[42:15] inherit/[44:10] Quotes 예제2
10.1시간 7분 코딩실무까지 완벽 마스터 10
Cursor, Outline

책갈피[00:02] Cursor/[06:15] default/[12:57] wait/[18:43] ne-resize/[23:02] crosshair, pointer, move 예제/[29:55] 실습/[35:44] Outline-style 예제/[44:13] invert 실습/[50:56] thick/[56:33] Outline-Width 예제2/[01:02:12] Outline 실습/[01:06:31] Outline 예제2
11.36분 코딩실무까지 완벽 마스터 11
Page, Orphans, Widows

책갈피[00:10] Page-Break-Before/[06:15] avoid/[11:02] auto/[15:56] right/[20:04] avoid/[22:38] @page/[29:25] <정수>/[35:09] auto 예제
12.47분 코딩실무까지 완벽 마스터 12
tab-size, line-break, word-break, hyphens, text

책갈피[00:58] text-space-collapse/[06:08] preserve/[12:16] tab-size 예제/[18:09] line-break 실습/[25:15] word-break 한글 예제/[30:46] text-align-last/[36:43] text-align-last 예제2/[41:38] inter-word/[46:24] distribute, kashida 예제
13.44분 코딩실무까지 완벽 마스터 13
hanging, writing-mode, background

책갈피[00:01] hanging-punctuation/[05:43] hanging-punctuation 팁/10:54] text-decoration-line 예제/[15:51] text-decoration-color 예제2/[23:14] text-underline-position 예제/[29:16] vertical-lr/[35:30] background-clip 예제/[42:54] background-origin 예제3
14.45분 코딩실무까지 완벽 마스터 14
background, border

책갈피[00:02] background-size/[05:09] 백분율-영역 비례/[10:32] 백분율 실습/[16:17] 백분율-두개의 값 입력/[22:58] 4개의 값 지정/[28:40] 다양한 예제/[32:55] <이미지> 예제/[39:27] 선의 좌표/[44:27] 예제
15.52분 코딩실무까지 완벽 마스터 15
border, box, overflow

책갈피[00:06] border-image-width/[06:35] 길이 예제/[12:40] number 예제/[18:46] border-image-repeat 예제/[24:35] slice/[30:38] y-방향값/[36:36] box-shadow 성격1/[42:43] overflow-x 사용 예/[47:01] no-display, no-content 예제/[51:11] no-display, no-content 예제
16.1시간 20분 코딩실무까지 완벽 마스터 16
text, @font-face

책갈피[00:33] CSS Property/[06:07] 속성을 지정해줄때 참고할 점/[12:19] d-circle 클래스 선언/[17:44] 대체 가능한 속성 설명/[27:57] 결과확인/[34:22] string 속성적용확인/[39:21] 예제/[47:46] blur, color값 적용/[53:56] 예제/[01:03:33] font-stretch/[01:09:07] 특정 폰트사용
17.57분 코딩실무까지 완벽 마스터 17
animation, @keyframes

책갈피[00:00] animation keyframes 속성/[06:46] 기본예제 결과 확인/[11:52] 브라우저별 코드 적용/[19:02] keyframes 선언/[24:52] 애니메이션 진행결과 확인/[31:26] 이동위치값 변경/[38:07] play 상태값 확인/[46:22] ease-out 효과 적용/[52:29] 애니메이션 방향속성/[57:04] 애니메이션의 적용시 속성 값 적용
18.60분 코딩실무까지 완벽 마스터 18
shadow

책갈피[00:00] box-shadow 속성/[06:45] 기본 클래스 선언/[15:48] 그림자 위치 지정/[23:22] 브라우저의 페이지 적용/[32:00] box-decoration-break/[39:59] 결과 값 적용 확인/[49:43] 기본 속성값 적용/[55:58] 결과 값 적용 확인/[59:52] 결과 확인 비교
19.53분 코딩실무까지 완벽 마스터 19
box, flexible

책갈피[00:00] box-direction/[06:30] 방향확인/[14:37] 속성 지정값 변경/[21:56] 옵션값적용 비교/[28:36] 기본 구성 코드 확인/[35:45] 예제 결과 이미지 확인/[41:00] 결과 확인/[46:30] 기본 속성 적용 스타일 추가/[49:30] 그룹 값 설정/[52:27] 결과확인
20.59분 코딩실무까지 완벽 마스터 20
multi-column, transform

책갈피[00:00] multi-column properties/[07:45] 다단적용 속성의 옵션값들/[11:46] 같은 영역안에서의 다단 효과/[18:18] 좌표값에서의 위치적용변화/[25:52] 브라우저적용 속성 확인/[29:36] scale/[36:20] 기본 옵션 설정 값 확인/[46:07] 여러개 값 지정시 속성 적용 방법/[50:07] 속성 결과값 확인/[57:37] transiton 속성
현업 퍼블리싱
21.29분 페이지 코딩 실습 Part 1
페이지를 구성하는 프레임들을 코딩하며 구성요소들을 실습합니다.

책갈피[00:00] 각 기기의 페이지 구성/[05:48] *의 의미/[10:45] css연동시 유의점/[15:04] message창 스타일/[21:05] TOP메뉴 스타일/[25:35] 검사속성
22.33분 페이지 코딩 실습 Part 2
W3C의 HTML5 CSS3의 표준 인증테스트, 검색에 노출되는 TIP, 상속관계 난이도

책갈피[00:41] CSS 연동페이지 확인하기/[04:40] W3C 검사페이지 (인증테스트)/[09:24] 검색에 노출되는 TIP/[15:17] inline 설정과 Block설정/[19:19] m2line(구분선)/[23:52] munue 부분/[27:19] fourth 부분
23.26분 페이지 코딩 실습 Part 3
반응형이 아니어도 어떤 해상도에서도 일그러짐없이 유지, 한글폰트 css 깨짐까지 해결하는 제작스킬

책갈피[00:00] 인트로/[06:20] 반영된부분 주석처리 의미/[09:47] 한글폰트 깨짐 해결/[14:40] amain 항목/[20:24] bottom box 항목/[23:20] 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
실무에 활용도가 높은 메뉴&홈페이지 제작하면서 레이아웃 구성과 디자인 익히기

책갈피[00:00] 완성 홈페이지 살펴보기/[01:08] 전체적인 레이아웃/[05:13] header a/[10:44] nav 정의/[15:47] nav ul li a:hover/[24:22] article 정의/[29:14] #welcome .col-2/[36:32] #welcome ul li a:hover/[44:22] section h1/[50:22] 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
실무에 활용도가 높은 메뉴&홈페이지 제작하면서 레이아웃 구성과 디자인 익히기

책갈피[00:00] 완성 홈페이지 살펴보기/[02:13] 전체적인 레이아웃/[06:51] 현재 적용상황/[11:26] #globalheader #globalnav/[17:28] 메뉴 이미지 불러오기/[25:57] #g-search/[32:15] 동영상 이미지 삽입/[40:16] #main/[47:49] border solid/[54:11] #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코딩의 지존이 될 수 있는 고급기술을 알려드립니다.

책갈피[00:04] 웹표준 사이트 제작의 기본 단계/[01:15] 웹표준 사이트의 구성요소/[04:10] 웹표준의 주요점/[10:37] 플러그인 작동 방식/[17:56] computed style 보기/[23:37] 이미지 오퍼시티 해제/[28:03] main 클래스 보기/[34:07] 문서구조상으로 보기/[38:52] head 적용된 속성값 보기/[43:36] 폰트페이스 적용/[50:22] 마진, 패딩값 입력/[53:58] 아이콘 예로 style 적용
모든 브라우저
33.1시간 2분 제작한 그대로 문제없이 모든 브라우저에서 동일하게 출력
(css) 크롬, 사파리, 파이어폭스, IE 및 windows 버전별 동일, (image) 이미지 한장으로 모든 이미지 해결

책갈피[00:05] 모든 브라우저/[01:03] 이미지 한장으로 표현/[06:19] 본문 살펴보기/[12:11] 검색 버튼/[18:39] overflow: hidden/[22:37] list-style: none/[29:08] width, height/[32:02] 카테고리/[36:25] background: url/[42:54] 웹기획 이미지/[50:16] :first-child/[57:34] 이미지 스킨/[59:44] 수강신청, 샘플 버튼/[01:00:31] margin-left
34.1시간 10분 모든 브라우저 실무코딩
직접 css코딩 노하우 전달

책갈피[00:00] 기본 문서 살펴보기/[00:35] 모바일 홈페이지에서 사용하는 소스 코드/[06:46] .allpage/[10:07] float: left/[15:41] 포토샵으로 이미지 사이즈 정하기/[22:25] .menu .azmen6/[29:29] .shadowbox/[37:48] .leftnavigation li .front/[44:11] .lefthot li/[49:27] #main .subone p {line-height:180%;}/[54:51] color/[59:22] 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

책갈피[00:01] css 모듈/[00:10] ruby 설치/[01:28] sass 설치/[01:55] gem i sass/[05:40] alview.css 와 alview의 차이점/[12:53] Error 발생/[19:23] sass에 대한 변수 처리/[24:35] value값과 변수명 동일화/[32:36] WARNING on line 23 of all.sass/[42:47] .sra, .aas/[50:22] 출력스타일 정의/[57:43] .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

책갈피[00:11] 한글 글꼴/[01:25] 글꼴 세팅(정의)/[06:15] compass 폴더 확인/[19:51] images_dir = "img"/[25:13] @include prefixed-properties/[37:32] box-sizing(content-box)/[44:45] opacity 출력/[46:16] compass 테스트/[56:21] * 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