scss (13) 썸네일형 리스트형 [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 49회차 미션 패스트캠프 프론트엔드 인강 49일차 지난시간에 이어 Sass(SCSS)의 @each와 list, map그리고 map-keys(), map-values()를 배워보았다. @each @each는 List와 Map데이터를 반복할 때 사용한다. for in 문과 유사하다 @each $변수 in 데이터{ //반복사용 } List는 자바스크립트 배열, Map은 자바스크립트 객체와 유사함 //List Data $fruits:(apple, orange, banana, mango); .fruits{ @each $fruit in $fruits{ li.#{$fruit}{ background:url("/image/#{$fruit}.png" } } } $fruits:apple, orange, banana, mango; .fru.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 48회차 미션 패스트캠프 프론트엔드 인강 48일차 지난시간에 이어 Sass(SCSS)의 if문활용법과 반복문 for에대해서 알아보았다. @mixin positionCenter($w, $h, $p:absolute){ if( width:$w; height:$h; position:$p; top:0; left:0; right:0; margin:auto; } .box1{ @include postionCenter(10px,20px); } .box2{ @include positionCenter(50,50,fixed); } .box2에서 인수에 px값을 넣지않아서 width:50이라고만 뜬다, 이경우 if함수를 이용할수있다. *unitness sass에서 제공하는 내장함수 단위(unit)가있는지없는지 체크하는 width:if(uni.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 47회차 미션 패스트캠프 프론트엔드 인강 47일차 Sass(SCSS)의 if문과 @if(지시어)에 대하여 알아보았다. 조건과 반복(Control Directives / Expressions) if(함수) 조건의 값(true, false)에 따라 두개의 표현식 중 하나만 반환 조건부 삼항 연산자(Conditional ternary operator)와 비슷. 조건의 값이 true이면 표현식1을, 조건의 값이 false이면 표현식2를 실행. if(조건, 표현식1, 표현식2) 예시 $width: 555px; div{ width:if($width > 300px, $width, null); } 만약 $width > 300px 이냐? 맞으면 $width, 즉 555px. 그렇지않으면 null이되어서 출력이되지않는다. @if(지시어.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 46회차 미션 패스트캠프 프론트앤드 인강 46일차 Sass(SCSS)의 함수(functions)과 함수를 사용할때 주의점에 대해 배워보았다. 함수(functions) 자신의 함수를 정의하여 사용할 수 있다. 함수와 Mixins은 거의 유사하지만 반환되는 내용이 다르다. Mixin은 위에서 살펴본대로 지정한 스타일(style)을 반환하는 반면, 함수는 보통 연산된(Computed) 특정 값을 @return 지시어를 통해 반환한다. //mixin @mixin 믹스인이름($매개변수){ 스타일; } //functions @function 함수이름($매개변수){ @return 값; } @function columns($number, $columns, $width){ @return $width * ($number/$columns.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 45회차 미션 패스트캠프 프론트앤드 인강 45일차 Sass(SCSS)의 @content와 extend과 extend부작용에 대해 배워보았다. @content 선언된 Mixin에 @content이 포함되어있다면 해당부분에 스타일 블록을 전달할 수 있다. 이 방식을 사용해 기존 Mixin이 가지고있는 기능에 선택자나 속성등을 추가할 수 있다. @mixin 믹스인이름(){ 스타일; @content; } @include 믹스인이름(){ //스타일블록 스타일 } @mixin icon($url){ &::after{ content:$url; @content; } } .box{ @include icon("image/icon.png"){ display:block; position:absolute; width:100px; height:.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 44회차 미션 패스트캠프 프론트앤드 인강 44일차 Sass(SCSS) 지난시간에 이어 인수의 기본값 설정과 키워드인수를 알아보았다. 인수의 기본값 설정 인수(argument)는 기본값(default value)을 가질 수있다. @include 포함 단계에서 별도의 인수가 전달되지 않으면 기본값이 사용된다. @mixin 믹스인이름($매개변수 : 기본값){ 스타일; } @mixin dash-line($width:1px, $color:black){ border: $width dashed $color } .box1{@include dash-line;} .box2{@include dash-line(4px);} 키워드 인수(Keyword Arguments) @mixin 믹스인이름($매개변수A: 기본값, $매개변수B:기본값){ 스.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 43회차 미션 패스트캠프 프론트앤드 인강 43일차 Sass(SCSS) 의 Mixins 사용법과 인수에 대해 알아보았다. 재활용(Mixins) Sass Mixins는 스타일 시트 전체에서 재사용 할 CSS 선언 그룹을 정의하는 아주 훌륭한 기능이다. 약간의 Mixin(믹스인)으로 다양한 스타일을 만들 수있다. 우선, Mixin은 두가지만 기억하면된다. 선언하기(@mixin)와 포함하기(@include)이다. 만들어서(선언), 사용(포함)하면 된다. @mixin size($w, $h){ width:$w; height:$h; } .box1{ @include size(100px,200px); } .box2{ @include size(100px,200px); } .box3{ @include size(100px,200px); }.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 42회차 미션 패스트캠프 프론트앤드 인강 42일차 Sass(SCSS) 의 연산의 종류를 알아보았다. 숫자 연산 상대적 단위연산 일반적으론 절댓값을 나타내는 px단위로 연산을 하지만 상대적단위(%,em,vw등)의 연산의 경우 CSS calc()로 연산한다. width:50% - 20px; //단위모순에러(imcompatoble units error) width:calc(50% - 20px)//연산가능 나누기 연산의 주의사항 css는 속성값의 숫자를 분리하는 방법으로 /를 허용하기때문에 /가 나누기 연산으로 사용되지 않을 수 있다. 예를들어, font:16px / 22px serif;같은 경우 font-size:16px와 line-height:22px의 속성값 분리를 위해서 /를 사용한다. 나누기 연산자만 연산되지않고 그.. 이전 1 2 다음
