SASS(SCSS) 전체 : 4시간 3분|강의당평균 : 2시간 1분30초

SASS(SCSS)

전체 : 4시간 3분|강의당평균 : 2시간 1분30초

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

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

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