[TIL] 1125 LikeLion🦁 FES 19

이춘구·2021년 11월 25일

멋쟁이 사자처럼 프론트엔드 스쿨

목록 보기

18/18

SASS

SASS에서 JS와 마찬가지로 조건문, 반복문, 함수를 사용할 수 있다. 앞에 @를 붙인다는 것만 빼면 비슷하게 동작한다.

조건문

원하는 조건을 설정하고 조건을 만족하는 경우에만 스타일을 부여할 때 사용한다.

@if

아래는 $circle의 값이 참이면 border-radius 값을 $size의 절반만큼 줘서 원이 되게 하는 조건문이다.

SCSS

@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

.square-av {
  @include avatar(100px, $circle: false);
}
.circle-av {
  @include avatar(100px, $circle: true);
}

CSS로 컴파일 후

.square-av {
  width: 100px;
  height: 100px;
}

.circle-av {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

@else

@else는 @if의 뒤에 나오며 @if에 걸었던 조건이 false일 경우 실행될 구문을 적는다.

아래는 @mixin에 들어오는 $light-theme의 값이 true이면 .banner에 밝은 색상을,
<body>에 .dark 클래스가 붙으면 $light-theme의 값을 false로 보내서 어두운 색상을 부여하는 조건문이다.

SCSS

$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}

.banner {
  @include theme-colors($light-theme: true);
  body.dark & {
    @include theme-colors($light-theme: false);
  }
}

CSS 컴파일 후

.banner {
  background-color: #f2ece4;
  color: #036;
}

body.dark .banner {
  background-color: #6b717f;
  color: #d2e1dd;
}

@else if

@else if는 하나의 @if로는 조건의 경우의 수가 부족할 때, 즉 @if 조건 외에 조건을 더 붙일 때 사용한다. 첫번째 @if의 조건이 false일 때 @else if로 넘어가며, @else @if가 여러번 반복될 수 있고 마지막은 @else로 위의 모든 조건이 false일 때 실행할 구문이 작성되고 마무리 된다.

아래는 triangle의 $direction 값에 따라 border-bottom-color를 바꾸는 조건문이다.

SCSS

@mixin triangle($size, $color, $direction) {
  height: 0;
  width: 0;

  border-color: black;
  border-style: solid;
  border-width: ($size/2);


  @if $direction == up {
    border-bottom-color: $color;
  } @else if $direction == right {
    border-left-color: $color;
  } @else if $direction == down {
    border-top-color: $color;
  } @else if $direction == left {
    border-right-color: $color;
  } @else {
    @error "Unknown direction #{$direction}.";
  }
}

.next {
  @include triangle(5px, black, right);
}

CSS로 컴파일 후

.next {
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 2.5px;
  border-left-color: black;
}

반복문

여러요소에 스타일을 부여할 때 사용한다. :nth- 가상 선택자와 같이 쓰면 유용하다.

@for

@for는 JS의 그것과 작동방식이 같지만, 작성법이 조금 다르다.

아래 반복문은 1부터 3까지 총 세 번 반복되면서 $image에 차례로 1, 2, 3을 넣는 반복문이다.
from 4 through 7이었다면 4, 5, 6, 7 총 네 번 반복했을 것이다.

SCSS

@for $image from 1 through 3 {
    .photo-box:nth-child(#{$image}) {
        background-image: url("../assets/poster#{$image}.png");
    }
}

CSS로 컴파일 후

.photo-box:nth-child(1) {
  background-image: url("../assets/image1.png");
}

.photo-box:nth-child(2) {
  background-image: url("../assets/image2.png");
}

.photo-box:nth-child(3) {
  background-image: url("../assets/image3.png");
}

@each

@each는 lists나 maps의 각(each) 요소들을 순회하는 반복문이다.

아래 코드는 index라는 내장함수로 $color-palette라는 lists에서 요소인 $color의 인덱스 값을 $i에 대입하고, 해당 $color의 값을 background에 넣어주는 반복문이다.

JS와 달리, SCSS에서 lists의 인덱스 값은 1부터 시작한다.

SCSS

$color-palette: #dad5d2 #3a3532 #375945;

@each $color in $color-palette {
    $i: index($color-palette, $color);
    .color-circle:nth-child(#{$i}) {
        background: $color;
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }
}

CSS로 컴파일 후

.color-circle:nth-child(1) {
  background: #dad5d2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.color-circle:nth-child(2) {
  background: #3a3532;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.color-circle:nth-child(3) {
  background: #375945;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

@while

조건이 true라면, 무한정 반복하는 반복문이다. 조건이 false가 되면 반복문에서 빠져나온다.

아래는 $value 값이 $base 보다 작아질 때까지 $ratio로 계속 나누는 반복문이다.

첫번째 실행: 40px > 16px이 true이므로 $value에 40 / 2의 값인 20을 대입
두번째 실행: 20px > 16px이 true이므로 $value에 20 / 2의 값인 10을 대입
세번째 실행: 10px > 16px이 false이므로 현재 $value 값인 10을 return

SCSS

@function scale-below($value, $base, $ratio: 2) {
  @while $value > $base {
    $value: ($value/$ratio);
  }
  @return $value;
}

.sup {
  font-size: scale-below(40px, 16px);
}

CSS로 컴파일 후

.sup {
  font-size: 10px;
}

함수

@function

JS의 함수와 하는 역할이 같다. 선언되고 호출되면 받은 인자 값으로 연산을 해서 결과 값을 반환한다.

@mixin과의 차이점
@mixin은 스타일 코드를 반환하고 @function은 내부의 코드를 톨해 연산된 값을 @return한다.

아래는 unitCheck라는 @function이 호출 될 시 입력받은 $x 값의 타입이 number인지 판단해서
number가 아니라면 $x값을 그대로 반환,
number라면 단위가 있는지 확인해서
단위가 없다면 px을 붙여서 반환하고,
있다면 hi를 반환하는 함수이다.

SCSS

@function unitCheck($x) {
    @if(type-of($x) == number) {
        @if(unitless($x)) {
            @return $x+px;
        }
        @return "hi";
    } 
    @return $x;
}

.px {
    width: unitCheck(100px);
};

.no-px {
    width: unitCheck(100);
}

CSS로 컴파일 후

.px {
  width: "hi";
}

.no-px {
  width: 100px;
}

내장함수

SASS에는 기본적으로 제공하는 내장함수가 있다. 그 중 몇 개만 적는다.
더 다양한 내장함수는 SASS 공식문서 Built-In Modules 참고

1. 색상 함수

lighten(color, amount) : 기존 색상의 밝기를 높인다.( 0%-100% 사이의 값 )
darken(color, amount) : 기존 색상의 밝기를 낮춘다.( 0%-100% 사이의 값 )
mix(color1, color2, weight) : 2개의 색상을 섞어서 새로운 색상을 만든다.

2. 숫자 함수

max(number, ..) : 괄호에 넣은 값 중에 가장 큰 수를 반환한다.
min(number, ..) : 괄호에 넣은 값 중에 가장 작은 수를 반환한다.
parcentage(number) : 퍼센트로 숫자를 바꿔준다.
comparable(num1,num2) : 숫자1과 숫자2가 비교 가능한지 확인 후 true, false 값을 반환한다.

3. 문자 함수

srt-insert(string,insert,index) : 문자열에 원하는 위치(index)에 문자를 넣은 후(insert), 새로운 문자열을 반환한다.
str-index(string,substring) : 문자열에서 해당 문자의 index 값을 반환한다.
to-upper-case(string) : 문자열 전부를 대문자로 바꾼다.
to-lower-case(string) : 문자열 전부를 소문자로 바꾼다.

4. 확인 함수

unit(number) : 숫자의 단위를 반환한다.
unitless(number) : 단위를 가지고 있는지 판단하여 true, false 값을 반환한다.
variable-exists(name) : 변수가 현재 범위에 존재하는지 판단하여 true, false 값을 반환한다. 이 함수의 인수는 $없이 사용한다.

반응형 콘텐츠 만들기

반응형 이미지

width: 100%
컨테이너의 너비가 변하면 종횡비를 유지하며 컨테이너의 너비를 100% 채운다.
max-width: 100%
width와 비슷하게 컨테이너가 줄어들면 그에 맞게 줄어들지만, 컨테이너가 늘어나도 이미지 원본 너비를 초과해서 늘어나지는 않는다.

반응형 백그라운드 이미지

background-size: contain
이미지가 잘리는 곳 없이 컨테이너에 내접할 만큼의 크기를 가진다. 컨테이너와 이미지의 사이즈가 정확히 일치하지 않는다면 여백이 생길 수도 있다.
background-size: cover
이미지가 잘리더라도 컨테이너를 가득 채운다. 컨테이너와 이미지 사이에 여백이 없을만큼의 크기를 가진다.
background-position으로 컨테이너 내에서 이미지의 위치를 조정할 수 있다. center center로 지정하면, 이미지의 위치가 컨테이너의 중앙에 오게되며, 자연스럽게 이미지의 상하좌우가 골고루 잘린다.

반응형 비디오

video 태그 속성

preload=“속성”; : 웹페이지의 리소스를 로딩할 때 영상을 미리 로드할지의 여부.
none: 재생 버튼을 눌러야 로드 시작, metadata: 영상의 메타데이터를 미리 로드, auto: 미리 로드
poster="이미지 url" : 썸네일 지정
controls : 컨트롤러 표시 여부
autoplay : 자동 재생 여부. 접근성과 과도한 트래픽 방지를 위해 muted가 있어야 자동재생되는 브라우저가 있음
muted : 음소거 여부
loop : 반복재생 여부

iframe 태그

MDN iframe
Youtube에서 영상에 우클릭 한 뒤 소스코드 복사를 클릭하면 iframe태그를 얻어올 수 있다.
Youtube 지원되는 매개변수

반응형 만들기

<video>
width를 %로 주면 된다.
<iframe>
width를 %로 주면 컨테이너 너비에 따라 iframe의 너비는 변화하지만 height는 원본 높이를 그대로 유지한다.

iframe의 컨테이너에 padding-top을 주고 그 자리에 iframe을 position: absolute로 얹는 것이다.
관건은 padding-top을 얼마나 주느냐인데, padding-top을 %로 주면 해당 요소의 width 값으로 계산되는 걸 이용한다.
원본 동영상에서 세로길이가 차지하는 비율을 계산해서 (세로 길이 / 가로 길이 * 차지하게 하고 싶은 너비 비율) 주면 된다. 또한 iframe은 inline frame답게 inline 요소이므로 baseline이 적용되어 있으므로 vertical-align: top을 부여해서 쓸데없는 여백을 없앤다.

.container {
	position: relative;
	padding-top: calc(720/1280*100%); /* 56.25%; */
}

iframe {
	width: 100%;
	height: 100%;
    	vertical-align: top;
    	position: absolute;
    	top: 0;
    	left: 0;	
}

이춘구

프런트엔드 개발자

이전 포스트