알지오 평생교육원 웹퍼블리셔 강좌입니다.
전문가들이 뽑은 꼭 배워야하는 실무활용 강의
그동안 찾던 웹퍼블리셔 강좌의 완전판 !
여러분의 마지막 강의가 되어드리겠습니다.
알지오에서는 PC와 스마트폰, 태블릿을 이용해서 언제,
어디서나 공부를 할 수 있습니다.
열심히 공부해서 웹퍼블리셔 강좌를 마스터해보세요.
<웹퍼블리셔 강좌 샘플동영상>
<웹퍼블리셔 강좌 리뷰>
웹퍼블리싱 강의는 제가 필요하던강의가 묶여져 있어서 너무 좋습니다..
웹표준이랑 모바일이 제가 하기 좀 힘들었고 필요한 강의였는데
강사님께서 정말 알기 쉽게 잘 설명해주시더라구요
제가 전문적으로 배우는 사람도 아니라서
다른 곳에서 알려주는것도 어려웠어요.
그런데 알지오 강의는 입문자가 수강해도 어려움 없이 이해할 수 있었어요.
과정에 따라서 설명해주시는데, 코딩을 하나도 모르던 제가 코딩을 스스로 하는것에 신기할 따름입니다.
코딩이 이렇게 재밌는건지 처음 알았어요^^
웹퍼블리셔 강좌 정보입니다. 추천 인터넷 강의 : 알지오
- 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.1시간 24분 Chapter 1
기기별, 버전별 확인, 상관관계
책갈피 : [00:04] 웹 페이지 기기별, 버전별 확인/[05:25] textarea,button 정의/[08:31] ul,ol,li 정의/[12:37] overflow visible 적용/[17:14] 높이값 정의/[21:24] footer 정의/[24:52] container after 주석처리 해제/[29:52] margin 0 auto,min-width 상관관계/[34:06] div element 추가/[40:27] centerfff로 지정 후 확인/[45:13] 버전별 출력 확인/[49:25] logo 삽입하기/[53:26] header h1/[57:49] logo 내 링크 삽입하기/[01:03:39] 변경 후 확인/[01:06:23] line-height 별도 정의/[01:10:20] 텍스트 정렬 가운데 설정/[01:14:37] 보더값,여백 생성/[01:21:04] 상속관계 확인/[01:21:25] menu line-heignt
- 22.1시간 25분 Chapter 2
menu, W3C CSS 검사
책갈피 : [00:00] div, span css 정의/[06:23] menu 수정/[10:35] menu 여백 및 위치 수정/[13:01] menu에 배경 삽입/[18:53] W3C CSS 검사 서비스/[22:27] * 처리/[25:10] em과 px의 차이/[31:06] top-menu 설정/[35:12] 메뉴 텍스트 색상 및 크기 설정/[39:23] hover, focus/[44:01] top-bina 설정/[49:51] z-index/[53:21] clear:both/[59:54] munue 설정/[1:04:46] h3 스타일 우선 순위/[1:08:30] margin-right/[1:12:36] 텍스트에 실선 설정/[1:17:17] position:relative/[1:20:48] 줄간격 설정
- 23.1시간 12분 Chapter 3
웹표준 검사
책갈피 : [00:00] 이중 css 적용받는 예/[03:45] footer 스타일 정의/[07:00] W3C CSS 검사 서비스/[13:37] position:absolute/[18:11] 해상도에 따른 넓이값 지정/[23:55] 메뉴 생성/[28:44] 서브 메뉴 생성/[32:44] display/[37:16] a:hover/[42:58] p태그 css 정의/[46:01] 본문 제목 코딩/[49:41] maintwo 스타일 정의/[52:04] bottbox 스타일 정의/[57:19] float:right/[59:43] 반응형웹/[01:01:04] 우측 내용 정의/[01:04:33] 하단 내용 정의/[01:10:19] 웹표준 검사
- 24.1시간 32분 Chapter 4
브라우저 표준사항, W3C CSS 검사
책갈피 : [00:10] 기본 css 정의/[01:42] header 및 logo 스타일 정의/[10:06] logo_a 스타일 정의/[12:34] 메뉴 위치 정의/[17:22] 본문 정의/[23:21] 검색바 스타일 정의/[27:19] 브라우저 표준사항/[30:02] 우측 box 내용 정의/[35:05] 본문 사이즈 확인/[40:20] clear:both/[42:41] footer 코딩/[45:45] W3C CSS 검사/[46:16] 인코딩/[49:13] logo 및 search 정의/[54:28] 좌측 메뉴 정의(ul, li)/[59:37] height, line-height/[01:04:17] margin/[01:11:58] 메인 내용 정의/[01:15:17] padding 및 줄간격 정의/[01:19:44] font-size:%/[01:23:05] 좌우 margin 정의/[01:27:24] 페이지 레이아웃/[01:29:18] position:relative
- 25.1시간 16분 Chapter 5
W3C CSS, 인접선택자
책갈피 : [00:42] inherit/[05:06] 메뉴 스타일 정의/[11:35] search 스타일 정의/[15:13] inputbox, 버튼 스타일 정의/[22:12] 로고 스타일 정의/[26:47] 좌측 내용 정의/[32:00] justify/[33:43] 하단 내용 정의/[36:49] W3C CSS 검사/[42:50] form에 대한 속성/[46:17] text-shadow/[48:29] legend, text-indent/[51:31] -webkit-linear-gradient/[56:56] max-width/[57:53] -webkit-gradient/[01:01:19] -webkit-box-shadow/[01:02:18] 인접선택자/[01:06:17] required/[01:11:42] letter-spacing/[01:14:36] ::-webkit-input-placeholder
- 26.1시간 5분 Chapter 6
트리구조 메뉴, child, duration
책갈피 : [00:19] 트리구조 메뉴 생성/[03:26] text-transform:uppercase/[05:12] li 정의/[09:10] strong 태그/[13:57] visibility:hidden/[17:46] background: transparent/[23:18] submenu 여백 수정/[28:57] list-style:none, font-size: %, vertical-align: baseline/[30:27] font: 13px/1.6/[32:27] -webkit-transition-duration/[35:51] display:inline-block/[37:20] first-child/[41:02] page-header 스타일 정의/[43:37] SNS 공유링크 생성/[48:55] address/[53:01] 툴팁 생성/[01:00:51] float 값에 따른 순서
- 27.1시간 21분 Chapter 7
책갈피 : [00:00] 메뉴 만들기/[04:21] display:inline-block/[07:35] 하위 메뉴 출력/[11:44] 하위 메뉴 border 및 여백 설정/[16:48] 검색창 및 cart 만들기/[17:49] -webkit-box-sizing/[21:30] 링크 스타일 설정/[25:05] 검색창 hover, focus 설정/[28:26] placeholder/[33:42] 검색창 오버했을 때 설정/[38:54] 메뉴 만들기/[43:32] -webkit-transition-duration, -webkit-transform/[48:58] body 스타일 설정/[53:15] header 스타일 설정/[54:35] navigation 스타일 설정/[58:28] navigation 배경색 gradient 적용/[01:02:03] content 스타일 설정/[01:08:34] footer 스타일 설정/[01:12:26] float/[01:14:15] 생성한 페이지 확인
- 28.1시간 20분 Chapter 8
책갈피 : [00:14] body 스타일 설정/[02:56] header 스타일 설정/[07:41] footer 스타일 설정/[12:39] 홈페이지 스타일 설정/[17:43] banner 스타일 설정/[22:50] 메뉴에 마우스 오버했을 때 스타일 설정/[24:48] content 스타일 설정/[27:09] extras 스타일 설정/[32:08] blogroll, social, footer 스타일 설정/[35:49] 메뉴, content 스타일 적용사항 확인/[40:15] section 스타일 적용사항 확인/[42:43] 레이아웃별, 위젯별 스타일 설정/[46:40] post 스타일 설정/[50:38] footer 스타일 설정/[55:32] content header 스타일 설정/[59:47] last menu 스타일 설정/[01:02:22] sidebar 스타일 설정/[01:08:34] input 스타일 설정/[01:11:20] 스타일 적용사항 확인
- 29.1시간 44분 Chapter 9
책갈피 : [00:00] 웹사이트 제작 예제1/[02:10] 기본적인 스타일 정의/[06:27] tagline 스타일 정의/[10:19] 메뉴 스타일 정의/[14:46] li 스타일 정의/[18:22] 첫번째 메뉴만 스타일 정의/[21:57] 서브메뉴 스타일 정의/[25:11] footer 메뉴 스타일 정의/[28:47] 메뉴 스타일 예제1/[33:22] li 스타일 정의/[36:43] 메뉴 스타일 예제2/[41:36] li 안에 ul이 있는 서브메뉴/[45:40] content 스타일 정의/[49:53] .clearfix:after/[53:39] 버튼 스타일 예제/[58:40] #in 스타일 정의/[01:02:36] 웹사이트 제작 예제2/[01:05:47] -webkit-transform:rotate/[01:10:45] main 스타일 정의/[01:14:56] 위치별 border-color 정의/[01:19:49] * 스타일 정의/[01:23:21] 구글 폰트 가져다 쓰기/[01:29:58] overflow-x: hidden/[01:34:33] 적용한 스타일 확인/[01:36:51] 웹사이트 제작 예제3/[01:40:48] content 및 menu 스타일 정의
- [실무자 초빙 강의] 실무역량 강화를 위한 웹표준 실전편
- 30.1시간 25분 잘 만들어진 웹사이트 제작 NO1
실무에 활용도가 높은 메뉴&홈페이지 제작하면서 레이아웃 구성과 디자인 익히기
책갈피 : [00:00] 완성 홈페이지 살펴보기/[01:08] 전체적인 레이아웃/[02:36] 상단 헤더/[03:15] header 정의/[03:28] div class="bar"/[03:35] title/[03:53] 리셋/[04:27] 여백 제거/넓이 지정/기본 스타일 정의/[05:13] header a/[05:31] header a:hover/[05:56] header div.bar/[06:58] text-shadow/[07:37] header div a/span/[07:50] 로고/[08:24] header a h1/[09:11] 결과 확인/[09:32] header a:hover h1/[10:27] 상단 메뉴/[10:44] nav 정의/[11:05] 결과 확인/[11:58] clear: both;/[12:57] nav ul li/[13:47] nav ul li a/[14:28] dispaly:block/[14:41] 결과 확인/[15:05] nav ul li a em/[15:47] nav ul li a:hover/[16:59] transition/[18:47] nav ul li a.nav-on/[19:50] footer 정의/[21:03] footer/[22:24] footer a/[23:13] footer .rt/footer .lt/[24:22] article 정의/[26:11] section 추가/[26:41] div class="col-1"/[27:01] div class="col-2"/[28:03] #welcome/[28:44] #welcome .col-1/[29:14] #welcome .col-2/[31:26] #welcome ul/[32:39] #welcome ul li/[35:15] #welcome ul.col-last li/[36:09] #welcome ul li a/[36:32] #welcome ul li a:hover/[37:15] section1/[39:05] article/[40:09] section h2/[41:52] text-shadow/[42:14] text transform: uppercase/[44:22] section h1/[44:54] section a/[45:58] section p/[46:45] section a:hover/[47:21] section h1 a:hover/[48:57] section a.btn/[50:22] section a.btn span/[52:44] section a.btn:hover/[55:47] section a.btn:hover span/[59:28] section abbr/[01:01:02] section2/[01:04:35] #recent-articles/[01:06:44] #recent-articles .article-1, #recent-articles .article-2/[01:09:22] #recent-articles .article-1/[01:10:14] #recent-articles .article-1 a img/[01:11:29] #recent-articles .article-1 h1,#recent-articles .article-1 p/[01:12:08] #recent-articles .article-2/[01:12:59] #recent-articles .article-2 h1,#recent-articles .article-2 p/[01:13:48] #recent-articles .article-2 a.btn/[01:14:17] #recent-articles em/[01:15:20] #recent-articles .article-2 em/[01:16:25] #recent-articles a img/[01:17:52] section3/[01:18:52] #personal-overview/[01:19:45] #personal-overview .overview-1/[01:20:41] #personal-overview .overview-1 a img/[01:20:53] #personal-overview .overview-2/[01:21:58] #personal-overview .overview-2 strong/[01:22:39] #personal-overview .overview-2 em/[01:23:30] #personal-overview .overview-2 ul/[01:24:33] #personal-overview .overview-2 ul.sq
- 31.1시간 25분 잘 만들어진 웹사이트 제작 NO2
실무에 활용도가 높은 메뉴&홈페이지 제작하면서 레이아웃 구성과 디자인 익히기
책갈피 : [00:00] 완성 홈페이지 살펴보기/[02:13] 전체적인 레이아웃/[03:28] main/[03:57] article/[04:24] aside/[05:13] footer/[05:53] 상단 nav/[06:51] 현재 적용상황/[07:31] #globalheader/[08:27] 현재 적용상황/[09:32] box-shadow/[10:53] z-index/[11:26] #globalheader #globalnav/[11:54] #globalheader #globalnav li/[12:21] #globalheader #globalnav li a/[14:24] background/[15:33] #globalheader #globalnav li a span/[17:28] 메뉴 이미지 불러오기/[18:08] hover/focus/[19:06] outline:none/[19:31] 버튼 3D 효과/[19:53] #globalheader #globalnav li a active/[20:56] #globalheader #globalnav li#an-apple a/[23:21] 검색창/[24:36] #globalsearch/[25:57] #g-search/[26:22] #sp-searchtext/[27:31] #sp-searchtext:focus/[28:50] #g-search label/[29:27] article 정의/[30:28] div 생성/[31:51] 이미지 삽입/[32:15] 동영상 이미지 삽입/[36:06] 현재 적용상황/[37:10] 기본사항/[39:32] #globalheader/[40:16] #main/[40:58] #billboard, .promos, #homefooter/[41:36] #billboard/[43:11] position:relative/[45:06] #billboard .videos/[47:14] display:block/[47:49] border solid/[48:53] content 생성/[50:20] opacity/[51:20] box-shadow:inset/[53:13] #billboard .videos-thumb i img/[54:11] #billboard .videos-thumb:hover i .play/[58:18] webkit-transition/[59:56] #billboard .videos-thumb .link/[01:00:45] 레이아웃 정리/[01:02:01] #billboard .hero-image/[01:02:46] #billboard .hero-image img/[01:03:16] overflow:hidden/[01:04:06] z-index/[01:05:01] aside 정의/[01:06:05] li 추가/[01:06:36] 현재 적용상황/[01:07:04] .promos ul/[01:07:41] .promos ul li/[01:09:24] .promos ul li.first-child/[01:11:10] .promos ul li.last-child/[01:12:12] border-radius/[01:15:05] .promos ul:after/[01:18:06] .promos ul li a
- CSS코드 분석
- 32.56분 CSS코드 분석 활용 방법
다른 웹사이트에 적용된 CSS코딩을 내 웹페이지에 그대로 적용할 수 있게 하는 방법 및 어떤 웹페이지도 분석해낼수 있는 CSS코딩의 지존이 될 수 있는 고급기술을 알려드립니다.
책갈피 : [00:04] 웹표준 사이트 제작의 기본 단계/[01:15] 웹표준 사이트의 구성요소/[04:10] 웹표준의 주요점/[04:30] 브라우저의 예/[05:30] 웹표준이 잘 적용되는 브라우저 순서/[08:35] 간단한 플러그인 사용/[08:56] 확장 프로그램 보기/[09:45] 플러그인 사용법/[10:37] 플러그인 작동 방식/[11:26] 자바스크립트를 이용하여 이동하기/[12:16] 플러그인 사용해 사이트 살펴보기/[13:22] 페이지 소스보기/[14:16] 요소검사/[15:05] css 부분 보기/[16:03] 속성 적용/[17:56] computed style 보기/[18:37] Resources 부분 보기/[19:03] Fonts/[19:25] Images/[20:11] 주소값을 이용해 이미지값 적용확인/[20:37] Stylesheets/[21:10] 홈페이지 주소 적용후 확인/[22:26] 이미지에 적용된 구성 확인/[23:37] 이미지 오퍼시티 해제/[25:15] 연습작업/[25:32] 새 문서에 소스 적용/[26:00] css 스타일 적용되는 부분 살펴보기/[27:07] class=top 보기/[28:03] main 클래스 보기/[29:22] 소스가져와서 css 파일로 만들기/[30:18] 결과 확인/[31:37] style 태그에 css 생성/[33:00] 이미지 주소 옮기기/[33:30] 이미지가 적용된 속성 확인/[34:07] 문서구조상으로 보기/[34:50] 결과 확인/[34:58] 링크를 통해 이미지 나타나게 하기/[35:34] top에 적용돼 있는 소스 보기/[36:21] 요소 검사/[38:52] head 적용된 속성값 보기/[40:07] body class/[42:20] nav class/[43:15] 웹 폰트 보기/[43:36] 폰트페이스 적용/[44:15] li, table 태그 전체속성/[44:50] img 값 설정 보기/[46:00] 결과 확인/[46:50] 적용돼 있는 속성 분류/[48:12] 변경된 부분 보기/[48:51] 적용 확인/[49:36] style 삭제/[50:22] 마진, 패딩값 입력/[51:15] article 입력/[51:42] 확인/[52:15] 로고 요소검사/[52:34] body 부분 적용/[53:58] 아이콘 예로 style 적용/[54:37] 확인
- 모든 브라우저
- 33.1시간 2분 제작한 그대로 문제없이 모든 브라우저에서 동일하게 출력
(css) 크롬, 사파리, 파이어폭스, IE 및 windows 버전별 동일, (image) 이미지 한장으로 모든 이미지 해결
책갈피 : [00:05] 모든 브라우저/[01:03] 이미지 한장으로 표현/[01:30] 브라우저별로 살펴보기/[04:20] 메뉴 살펴보기/[04:55] position: relative/[05:11] display: block/[05:15] width, height, line-height/[05:35] z-index/[05:49] body 기본사항/[06:19] 본문 살펴보기/[06:26] position: relative, z-index/[06:33] 가운데 정렬/[06:50] 로고 이미지/[07:25] float: left/[08:03] 이미지 사이즈 추가/[08:22] overflow: hidden/[09:06] 검색창/[09:34] float: left/[10:13] 검색 전체 틀/[10:28] position: relative/[10:48] input/[11:11] float: left/[11:39] background: transparent/[12:11] 검색 버튼/[12:41] position: absolute/[13:16] width, height/[13:45] background/[15:03] 이미지 좌표 지정/[15:59] 메뉴/[16:47] position: absolute/[17:21] width: auto/[17:35] ul, li/[18:12] text-align: center/[18:39] overflow: hidden/[19:01] 공백/[19:16] 전체 레이아웃 살펴보기/[19:51] background: url/[20:51] background-size/[20:56] box-shadow/[21:04] border-radius/[21:50] 왼쪽 메뉴/[22:37] list-style: none/[23:25] display: inline-block/[23:35] vertical-align: middle/[23:53] background: url/[25:38] cursor: pointer/[26:06] border-top, border-bottom/[26:48] padding-left/[27:02] background: url/[28:00] margin-left/[29:08] width, height/[29:33] 중간 메뉴/[30:02] float: left/[30:30] text-align: center/[30:42] table-layout: fixed/[31:07] display: table-column/[31:42] 제목/[32:02] 카테고리/[32:36] text-align: left, white-space: nowrap/[33:12] background: url/[34:17] :after/[34:54] 오른쪽 메뉴/[35:03] float: right, width/[36:25] background: url/[37:22] line-height/[38:38] vertical-align: middle/[39:10] 하단 메뉴/[39:25] clear: both/[41:04] font-size, line-height/[41:36] display: inline-block/[42:54] 웹기획 이미지/[43:27] position: absolute/[44:58] background: url/[45:22] display: block/[47:32] width/[48:41] position: relative/[48:46] line-height/[49:08] float: left/[50:00] background: url/[50:16] :first-child/[52:47] footer/[53:21] line-height/[54:06] float: left/[54:44] 강의소개 페이지/[54:52] 좌표로 아이콘 불러오기/[55:41] position: relative/[55:57] cursor: pointer/[56:45] li 값/[57:09] overflow: hidden/[57:34] 이미지 스킨/[58:22] float: right/[59:44] 수강신청, 샘플 버튼/[01:00:09] background: url/[01:00:31] margin-left
- 34.1시간 10분 모든 브라우저 실무코딩
직접 css코딩 노하우 전달
책갈피 : [00:00] 기본 문서 살펴보기/[00:35] 모바일 홈페이지에서 사용하는 소스 코드/[00:45] text-size-adjust: none/[03:07] background-color/[03:21] 메뉴와 메뉴 내부 내용/[03:42] #az-nav/[03:59] position: relative/[04:09] display: block/[04:14] margin/[04:20] width, height, line-height/[05:04] background-color, z-index/[05:18] 결과 확인/[06:46] .allpage/[06:52] overflow: hidden/[06:56] margin: 0 auto, width/[07:57] #az-nav .az-content/[08:00] position: relative, z-index/[08:26] #az-nav .logo/[08:36] overflow: hidden/[08:44] float: left, width/[09:57] #az_lec_Search/[10:07] float: left/[10:24] position: relative, left, top/[11:27] #az_lec_Search .search-inner/[11:36] position: relative, width, height/[11:41] border-bottom/[12:27] #az_lec_Search .input_text/[12:33] float: left, width, height/[12:41] line-height/[12:48] background: transparent, color, border:none/[12:59] 결과 확인/[13:18] #az_lec_Search .ic/[13:25] position: absolute, right, top/[14:28] width, height, background: url/[14:54] cursor: pointer/[15:41] 포토샵으로 이미지 사이즈 정하기/[16:40] .menu/[17:04] position: absolute, right, width: auto/[17:28] background-color/[17:40] .menu li/[17:57] float: left, height/[18:09] position: relative, text-align:center/[18:36] .menu li a/[18:51] color, overflow: hidden, display: block, padding/[19:08] font-weight:bold/[19:11] font-family: 'Malgun Gothic', sans-serif, font-size/[19:28] 결과 확인/[20:44] .menu li a:hover, a:focus/[20:48] color, text-decoration:none/[21:35] .menu li.countmu/[22:02] .menu .azmen5 a/[22:07] font-size, padding/[22:25] .menu .azmen6/[22:35] text-align, padding/[22:49] position: relative/[24:43] .menu .azmen6 .logout/[24:59] position: absolute, right, top/[25:15] line-height, background-color/[25:35] .menu .azmen6 .logout a/[26:01] color, font-size, font-weight:normal, padding/[26:13] letter-spacin, text-decoration:none/[27:13] .menu .azmen6 .logout a:hover/[27:18] color, outline/[27:57] .minstick/[28:03] overflow: hidden, margin: 0 auto/[28:18] width, height, z-index/[29:29] .shadowbox/[29:34] background: url/[29:52] background-size, box-shadow/[30:12] webkit-border-radius, border/[30:26] margin-bottom/[31:30] #left/[31:38] float: left, width/[32:21] .leftnavigation/[32:26] .leftnavigation h2/[32:33] text-align:center, color/[32:55] border-bottom/[32:58] padding, height, line-height/[33:08] font-size/[33:40] .leftnavigation .lefttitle/[33:42] border-bottom, padding, height/[34:12] .leftnavigation .lefttitle img/[34:23] text-align:center/[35:09] .leftnavigation ul/[35:19] soverflow: hidden, padding/[35:54] .leftnavigation li/[36:01] overflow:hidden/[36:31] position:relative, height, line-height/[36:56] padding-left/[37:48] .leftnavigation li .front/[37:51] display: inline-block/[37:57] width, height/[38:04] vertical-align: middle, margin-right/[38:14] background: url/[39:13] :before/[40:12] .leftnavigation li a/[40:15] color, letter-spacing, text-decoration:none/[40:26] cursor: pointer/[40:53] .leftnavigation li:hover/[41:02] background-color/[42:40] .lefthot/[42:52] border-top, border-bottom, padding/[43:26] .lefthot div/[43:56] .lefthot ul/[43:58] overflow: hidden, padding/[44:11] .lefthot li/[44:17] position:relative, height, line-height/[44:44] .lefthot li .frontboard/[44:52] background: url/[45:11] .lefthot li a/[45:17] color, font-size/[45:47] .lefthot .appmed/[45:53] margin-left, background: url/[46:33] .lefthot .appmed a/[46:38] display: block, padding-left, width, height/[47:06] .lefthot .loloa {padding-top:10px;}/[47:28] #main/[47:30] float: right, width, padding/[48:02] #main .subone/[48:22] float: left, color, width, min-height/[48:46] #main .subone h3 {margin: 10px 0;}/[49:10] #main .subone .bott50 {line-height:150%;margin-bottom: 50px;}/[49:27] #main .subone p {line-height:180%;}/[50:34] .linkblue/[50:43] overflow: hidden, cursor: pointer, color/[51:01] .linkblue span/[52:45] #az-footer/[52:57] clear: both/[53:00] position: relative, margin-top, width/[53:33] #az-footer .fbody {position: relative;}/[53:57] #az-footer .add/[54:01] margin, width, line-height, font-size, display:inline-block/[54:29] font-size, line-height/[54:51] color/[55:12] margin, color/[55:41] display: block, height, line-height/[55:52] color/[56:26] position: relative, float:left, width/[56:42] display:inline-block, width/[58:12] display: inline-block, width, height, vertical-align: middle, background: url, cursor: pointer/[58:49] position: absolute, top, right/[59:22] display: inline-block, width, height/[59:47] display: block, width, height/[01:00:13] position: relative, float:left, width/[01:01:08] display:inline-block, width/[01:02:26] position: relative, float:left, width/[01:03:02] display:inline-block, width/[01:04:06] position: relative/[01:04:18] border-bottom, border-top/[01:04:51] float:left, padding, background:url/[01:05:33] :first-child/[01:05:37] background:none/[01:06:34] color, font-size/[01:07:12] position: absolute/[01:08:06] float:left, width, height/[01:08:26] display: inline-block, background: url/[01:09:52] position: relative, float:left, width
- 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/[02:28] gem update/[03:22] watch alview.scss:alview.css/[04:05] Ctrl + C (y or n)/[04:51] 두번째 view 작성/[05:03] watch app/sass:public/alview/[05:40] alview.css 와 alview의 차이점/[06:01] SCSS(Sassy CSS)/[06:30] sass → css 컴파일/[06:41] sass al1.sass al1.css/[07:26] body/[07:59] $font-stack (변수정의)/[08:16] Arial, Dotum,sans-serif/[09:39] font-size: 15px/[09:54] sass al1.sass al1.css/[10:25] cmd 열기 (Shift + 명령창 열기)/[11:11] al1.css.map, al1.css/[12:09] sourceMappingURL=al1.css.map/[12:53] Error 발생/[14:37] // (주석처리)/[15:20] margin, padding/[16:26] 스타일시트 정의/[16:34] 브라우저별 정의/[16:40] 텍스트 컬러, 폰트 정의/[17:03] 줄맞춤, 재실행/[17:49] $ (변수정의)/[19:23] sass에 대한 변수 처리/[19:39] $margin1 (ID생성)/[21:01] font: $fontad (변수명 생성)/[22:15] font-family: $fontad/[22:54] .fontad(클래스), #fontad(ID)/[24:35] value값과 변수명 동일화/[24:57] $magin-top-1/[25:16] $margin-bottom-1/[25:39] $top, $bottom/[26:36] break-all/[27:51] $color666 : #666/[28:30] $size15/[29:15] background-color/[30:43] font-family: $font-stack/[32:36] WARNING on line 23 of all.sass/[33:52] Error 설명/[35:32] .aboabo ul/[35:50] display: block/[37:00] =border-radius($radius3)/[38:01] .linde1/[38:12] +border-radius(3px)/[41:00] .sra/[41:50] 명령처리/[42:47] .sra, .aas/[43:17] @extend/[43:36] .sra, .aas, .bbd, .ccd, .ccdsa/[44:35] .main/[45:27] width (백분율 계산)/[46:56] /*주석문구*//[48:03] 문자셋 (UTF-8)/[49:27] Error 발생/[50:22] 출력스타일 정의/[50:34] style compressed/[51:34] style nested/[51:43] sass al1.sass al1.css/[52:16] style compact/[52:50] style expanded/[54:23] '한글'/[54:36] float: 'left'/[55:27] sans-serif/[55:55] url('경로')/[57:43] .abvfr/[58:12] $size: $value * 1px/[59:18] round($size)/[01:00:09] background-color: rgb/[01:00:54] #b6b5db/[01:01:59] color값에 대한 변수정의/[01:03:08] $color-redap: rgba()/[01:05:21] opacity/[01:06:15] transparentize/[01:06:57] 필터값 따로 적용/[01:07:28] start, end 필터값/[01:07:52] enabled='false'/[01:08:12] $fil-yellow, $fil-red/[01:08:42] startColorstr, endColorstr/[01:09:12] cursor: n + -resize/[01:09:40] cursor: nw + -resize/[01:10:45] content: "알지오 2003"/[01:12:23] $class: accr/[01:12:37] $left: background/[01:12:47] $Black: #000/[01:13:52] $line-height, $font-size/[01:14:25] sass와 scss의 차이점/[01:14:56] scss로 변환/[01:15:07] scss al2.scss al2.css/[01:15:13] al2.css.map/[01:15:50] scss map/[01:16:12] UTF-8/[01:16:52] agga: aggb: aggc:/[01:17:23] transition/[01:17:33] map-values/[01:20:27] $font:/[01:21:05] $afoo:/[01:21:41] 반복문/[01:21:55] @each/[01:22:54] $key/[01:23:20] font-family: map-get/[01:24:03] background-color: $value/[01:24:48] Error 발생/[01:25:48] UTF-8 정의/[01:27:33] 클래스 변환/[01:29:22] sourceMappingURL=al2.css.map/[01:30:10] 중첩기능/[01:30:37] $amapp:/[01:30:49] k: v, ka: vv/[01:30:57] content: map-get($amapp, k)/[01:32:10] @if map-has-key/[01:33:03] content: yes or no/[01:35:23] map-merge()/[01:35:53] $acolor:, $bcolor:/[01:36:09] 병합/[01:36:16] 변수생성($aaa)/[01:36:45] content: map-get($aaa, ba)/[01:37:13] ba: #FFCC00/[01:37:25] Error 발생/[01:38:36] 주석처리/[01:39:48] 아이디 생성/[01:39:54] @each $name, $value in $aoao/[01:40:53] content: $value/[01:41:51] $alzioall/[01:42:47] @each $aname $coloral in $alzioall/[01:43:21] $b-color: nth($coloral,1)/[01:46:25] $coloral/[01:46:49] 클래스 생성(.div)/[01:46:57] $:hover/[01:47:14] padding/[01:47:53] .alzio/[01:48:28] $border3: 3px solid #000/[01:48:51] 클래스명(.alzio) 확장/[01:49:18] .one/[01:49:37] color: #fff/[01:49:53] .two/[01:50:01] @extend.sra/[01:50:31] @extend.one/[01:51:37] .alzio .one, .alzio .two/[01:52:39] @media/[01:53:36] 중첩/[01:53:54] @media (min-width: 300px)/[01:55:54] .sass-cache/[01:56:31] @import 'al2im.scss'/[01:58:05] .alzio .it/[01:58:13] padding/[01:59:57] $red:, $white:, $black:/[02:00:50] @import 'al2im'/[02:03:30] 경로/[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
책갈피 : [00:14] npm install sass-mq --save/[00:28] cmd 열기/[00:53] node_modules 폴더 내 sass-mq/[01:22] _mq.scss 복사/[01:44] @charset/[02:30] @import 'al2im.scss'/[02:50] @import 'mq'/[03:06] @include mq/[04:11] ($from: mobile, $until: tablet)/[04:58] @include mq($from: tablet)/[05:10] padding: 15px 0 0 0;/[05:29] media 쿼리 (두 가지)/[06:28] min-width, max-width/[07:24] mq-px2em/[09:08] @import 'mq'/[09:24] 주석처리/[10:48] @media ()/[11:16] $alzioaii/[11:29] min-device-pixel-ratio/[11:42] min-resolution/[12:07] @media 정의/[13:30] @extend/[14:15] @extend .alzio;/[14:28] .alzio, .it/[15:03] .숫자 = Error/[16:38] .it, .s2003/[17:07] rgba/[17:18] @extend .alzio;/[18:24] @extend .it;/[19:03] .it .alzio/[19:13] 사용자 변수/[19:27] %alzio/[19:36] color: #000; (Black)/[19:59] &:before/[20:35] .a2003/[20:39] @extend %alzio;/[21:29] .a2100/[22:30] .a2003, .a2100/[22:35] .a2003:before, .a2100:before/[23:24] .it 추가/[23:52] padding: 50px;/[24:48] %alzioon/[25:33] color: #FFFF00;/[26:32] @mixin/[27:01] $width: 750px/[27:42] @include alzio();/[28:35] width: 100px/[29:16] 변수 정의/[29:24] @mixin size()/[29:37] $width, $height: $width/[30:17] @include size(30%, 20px)/[31:16] @mixin fix/[31:32] webkit moz ms o/[31:59] @if $vexser/[32:19] $vendor in $vexser/[33:35] @include fix()/[34:43] transform, rotate(15deg)/[36:14] @each $ao, $value in $proper/[36:36] @if $vexser/[36:51] @each $vendor in $vexser/[38:27] .alzioT/[39:28] column-gap/[40:11] $al-call (변수정의)/[40:44] $alkkk/[41:05] map-get/[41:59] @include al-call(b1)/[42:50] @content/[42:59] max-width: 60px/[43:20] @warn (경고문)/[43:54] $width: 100%/[44:14] aa: $width/3/[44:53] 에러 발생/[45:21] cc: "1px9px/3px"/[46:41] @for $abc from 1 through 5/[47:58] width: 3em * $abc/[50:11] 1through 5/[51:01] @each $alzio in a1,a2,a3,a4,a5/[51:57] background-image 경로/[53:03] @charset "UTF-8"/[53:50] @each $alzio (ID 분산)/[55:29] 클래스 생성(a1,a2,a3)/[57:38] @each $alzio, $size in ()/[59:02] @while (지시어)/[59:35] @while $ial > 0/[01:00:05] value값 셋팅/[01:02:27] class개수, value값 증가수 정의/[01:03:02] @mixin fontal/[01:03:57] @include fontal/[01:04:45] color: #555;/[01:06:35] border값 분산 처리/[01:06:49] @mixin albord($color, $width)/[01:07:16] color, width, style/[01:07:49] style: groove;/[01:08:13] 변수 생성 ($style)/[01:09:46] @include albord()/[01:11:13] @mixin altran($transi)/[01:11:32] transition: $transi/[01:11:54] @include altran(vwetrv);/[01:12:52] 에러 발생/[01:13:09] 확장/[01:13:55] @mixin acolor($a1, $a2, $a3)/[01:15:36] @include acolor($aavalu...)/[01:16:49] 재생산/[01:17:14] $bcolor/[01:17:31] @include acolor(bcolor...)/[01:17:51] 에러 발생/[01:18:01] (bcolor...)→($bcolor...)/[01:18:38] @mixin auu/[01:19:06] @include auu/[01:21:22] @content/[01:22:46] 변수 사칙연산/[01:23:15] @function abc()/[01:23:39] @return $ww + $hh;/[01:24:08] font-size: abc()/[01:27:16] 미디어 프린터 영역/[01:27:34] @media print/[01:28:01] @at-root (without: media)/[01:29:17] gem install compass/[01:30:23] compass create alziosass/[01:31:20] alziosass 폴더 생성/[01:32:00] config.rb (확장자)/[01:33:15] syntax 옵션/[01:34:09] cmd 실행/[01:34:17] compass compile sass/ie.scss/[01:35:13] 주석문구 추가/[01:35:45] alzioNEW 반영/[01:38:26] preferred_syntax = :sass/[01:40:30] write css/ie.css/[01:41:25] .sass-cache/[01:42:27] 모듈 설치/[01:43:19] bower_components/[01:43:53] lib 폴더(compass,animation)/[01:44:14] gem install bourbon/[01:44:32] http://bourbon.io//[01:46:20] 웹사이트 제작/[01:46:52] compass create /[01:46:54] alzioyess --syntax scss/[01:48:15] css_dir = "css"/[01:49:51] write css/screen.css/[01:51:15] compass compile/[01:52:10] ANSI → UTF-8/[01:52:37] meta charset="UTF-8"/[01:53:25] html lang="ko"/[01:53:56] 스타일시트 속성/[01:55:25] @charset "UTF-8"/[01:55:41] overflow-y:scroll;/[01:56:10] font size, font-family 정의/[01:58:26] 출력스타일/[01:59:44] css파일이 갱신되었을 경우/[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] 글꼴 세팅(정의)/[01:46] font-family/[02:19] compass compile/[02:27] Nanum Gothic 반영/[02:48] font-face/[03:55] 소문자o, 띄어쓰기x/[04:31] font-family: 'Hanna'/[06:15] compass 폴더 확인/[07:55] compass.scss/[08:11] compass compile/[08:43] compass.html/[08:52] Padding Box, Border Box/[10:01] background-clip/[10:16] compass/css3/[11:15] text-shadow/[11:59] darken(blue, 50%) 2px 2px/[12:14] black 2px 2px/[13:06] text-shadow.scss/[14:07] @import "css3/background-clip";/[14:54] error 발생/[16:34] 알파값/[17:45] compass compile/[19:14] error 발생/[19:51] images_dir = "img"/[20:50] @import "compass/css3"/[22:48] padding-box,border-box,content-box/[23:44] background-origin/[24:43] @include background-size/[25:13] @include prefixed-properties/[26:32] background-repeat: no-repeat/[27:00] border-radius.scss/[29:05] border-radius-top-left/[29:30] border-radius-combo/[30:44] compass 테스트/[31:54] box-shadow.scss/[32:13] !default / !inherit/[33:04] box-shadow-default/[33:11] @include single-box-shadow/[33:23] box-shadow-custom/[33:37] box-shadow-custom-multiple/[35:03] #555 !default/[37:08] box-sizing.scss/[37:32] box-sizing(content-box)/[37:46] box-sizing(border-box)/[38:45] columns.scss/[39:08] @include column-rule/[39:51] $width $style $color/[41:06] 1px, sold, blue/[41:34] display: inline-block/[42:09] inline-block.scss/[43:30] *vertical-align: middle/[43:38] *vertical-align: auto/[43:49] *vertical-align: $ie-alignment/[44:45] opacity 출력/[46:16] compass 테스트/[47:03] @mixin transparent/[47:51] @include opaque;/[49:36] Opacity=0/[50:11] text-shadow/[52:02] @include single-text-shadow/[53:28] color,h-offset,v-offset,blur/[55:09] @include transition-property(width)/[56:21] * also accepts "all" or "none"/[57:02] @include transition--duration/[58:59] transition-timing-function(ease-in)/[01:00:39] input/[01:01:10] user-interface.scss/[01:01:47] ms, webkit, moz/[01:02:21] placeholder/[01:03:22] input, textarea/[01:03:55] input[type="text"]/[01:05:10] "compass/css3/user-interface"/[01:06:02] @import "compass/reset"/[01:06:42] line-height/[01:07:00] @include global-reset/[01:07:10] @import "reset/utilities"/[01:08:29] write css/compass.css/[01:08:58] write css/screen.css/[01:10:26] 수정대상=원본파일/[01:12:25] reset-box-model/[01:12:39] reset-font/[01:13:14] overflow scroll로 변경하기/[01:13:27] reset-body/[01:14:33] reset-list-style/[01:14:43] li 추가/[01:15:36] reset-image-anchor-border/[01:16:40] @include reset-html5;/[01:16:49] @include link-a;/[01:18:35] img, fieldset, iframe/[01:19:25] @include body-a;/[01:20:23] error 발생/[01:20:35] compass compile/[01:21:32] @charset "UTF-8";/[01:22:39] @include border-outline-a;/[01:23:17] @mixin border-outline-a/[01:24:17] border-solid-color-radius-a/[01:25:17] reset-html5/[01:25:56] display: block;/[01:27:21] @include global-reset;/[01:27:49] nested-reset/[01:28:20] layout/[01:29:12] _sticky-footer.scss/[01:29:59] footer-height/[01:30:08] #root,#root_footer,#footer/[01:32:59] #lay,#lay_footer,#footer/[01:33:59] #a1 정의/[01:34:37] color 추가/[01:34:56] a1→alzio/[01:35:02] header 내용 추가/[01:35:41] 결과값 확인/[01:36:52] compass compile
'추천강의' 카테고리의 다른 글
| 파이널컷프로 교육 추천 (0) | 2018.02.19 |
|---|---|
| 델파이 추천 강좌 (0) | 2018.02.19 |
| 드림위버 교육 강의 (0) | 2018.02.13 |
| 인벤터 추천 강의 (0) | 2018.02.13 |
| ORACLE 강좌 교육 (0) | 2018.02.13 |