[TIL] 1125 LikeLion๐Ÿฆ FES 19

cnsrn1874ยท2021๋…„ 11์›” 25์ผ
1

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;	
}

profile
๋‹น์‹ ์„ ํ•œ ์ค„๋กœ ์†Œ๊ฐœํ•ด๋ณด์„ธ์š”

0๊ฐœ์˜ ๋Œ“๊ธ€