📖 오늘의 수업

• scss 실습함
• select 커스텀 코드 리뷰 및 수정함
• 반응형 이미지와 동영상 만들어 봄

💭 오늘의 생각

1. scss에서 mixin 사용할 때 default 값을 사용하더라도 강사님은 include 인자에 다시 명시를 해주셨다.

     @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: false);
     }

   이렇게 작성하면, 디폴트 값이 무엇인지 다시 찾으러가지 않아도 된다. 중첩, mixin의 디폴트 값 명시해주기와 같은 부분들이 코드 전체를 보지 않아도 흐름을 알 수 있게 도와주는 부분이라고 생각한다. 이런 점에서 scss를 사용하는 이유를 또 느꼈다.

2. select를 커스텀 과제를 하면서 삼각형 모양을 피그마에서 이미지를 추출해서 넣었다. 리뷰 시간에 어떤 분이 그걸 이미지가 아니라 border를 사용해서 만들어내셨다.

   div {
   width: 0px;
   border-top: 10px solid black;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 10px solid transparent;
   }

   투명한 부분을 제외한 border-top만 보여지게 되고 삼각형 모양이 된다. border를 두껍게 하고 width를 0을 주고 사용해 본 적이 없어서 몰랐는데,
   width가 0인 상태에서 border를 두껍게 하면 사진처럼 상하좌우의 border 값이 삼각형 모양으로 연결되어있다. 직사각형으로 연결된 줄..!
   이런 신박한 방법으로 삼각형을 넣는 방법을 알게됐다.

3. 백그라운드 이미지를 다룰 때 어떤 이미지의 크기는 contain으로, 어떤 것은 cover로 하는 경우가 있었다. contain은 이미지가 잘리지 않는 한도 내에서 제일 크게 설정하고 cover는 이미지가 잘리더라도 빈 공간이 생기지 않게 설정한다고 배웠다. 그렇다면 잘려도 괜찮은 이미지를 cover로 사용해야 하는데 그런 이미지가 뭐지 싶었다.

-알파값이 있는 아이콘같은거는 컨테인으로
알파값이 없는 이미지는 커버로

전달하고자 하는 이미지의 정보가 최대한 담기게끔

-video
접근성 문제로 Muted가 안되어있으면 autoplay가 안됨
키보드탐색이 필요한 사람은 시간이 걸리기때문에 자동으로 뮤트되어질 필요가 있어서 자동재생은 무조건 뮤트가 된 상태에서만 작동하게 된다(파폭은 아님)

비디오 태그는 반응형으로 만들기 쉽다
위ㄷ쓰 100퍼센트만 주면 됨.

padding에서 %를 사용하면 부모 컨테이너의 width 기준?..