SASS(SCSS) 전체 : 5시간 40분|회차당 평균 : 1시간 53분19초

SASS(SCSS)

전체 : 5시간 40분|회차당 평균 : 1시간 53분19초

01 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

2시간 3분

책갈피 : [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'

02 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

2시간 0분

책갈피 : [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

03 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

1시간 37분

책갈피 : [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

샘플확인 : 알지오 검색후 -> 강의검색란 -> SASS(SCSS)

※ 다음 강의는 순차적으로 업데이트 진행중입니다.