Today 요약

1. 머터리얼 UI
2. 최적화 강의

1. What I Learned?

머터리얼 UI

좀 더 쉽게 UI를 구현할 수 있게 해주는 리액트와 구글의 합작 라이브러리

오늘은 그리드에 대해서 알아봤고, 좀 더 그리드 템플릿을 쉽게 사용할 수 있다. 그리고 공부하는 책이 스토리북을 이용하고 있기 때문에 자동적으로 스토리북에 대해서도 조금씩 알게되었다. 당분간은 계속 익숙해져보자.

최적화 강의

video 태그의 autoPlay

• source를 사용하게 되면 muted 속성도 같이 선언해야 autoPlay가 가능하다.

import classNames from 'classnames/bind'

import styles from './Video.module.scss'
import Section from '../shared/Section'

const cx = classNames.bind(styles)

function Video() {
  return (
    <Section className={cx('container')}>
      <video autoPlay loop muted poster="/assets/poster.jpg">
        <source src="/assets/main.webm" type="video/webm" />
        <source src="/assets/main.mp4" type="video/mp4" />
      </video>
    </Section>
  )
}

export default Video

이는 브라우저가 자동 재생되는 비디오의 오디오를 자동적으로 차단하기 때문이다. 그렇기 때문에 muted를 명시해주어야 브라우저와 호환이 되면서 자동재생이 동작하게 된다.

하지만 아래와 같이 source를 사용하지 않으면 muted를 명시하지 않아도 자동재생이 가능하다.

<video
  autoPlay
  loop
  muted
  poster="/assets/poster.jpg"
  src="/assets/main.webm"
  type="video/webm"
/>

이미지 가로,세로 1대1로 매칭하기

기존에는 이미지를 1대1로 맞추기 위해서 아래와 같은 코드가 있었을 때 가상 요소 선택자를 이용하고 absolute를 이용하기 보다 height값을 고정 값으로 넣어줬었는데.. 그렇게 되면 반응형이 안되니까 아쉬웠다. 하지만 아래 방법처럼 사용하게 되면 height값도 width에 맞게 1대1로 매칭할 수 있다.

.wrap-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;

  .wrap-image {
    width: 100%;
    position: relative;

    &::after {
      display: block;
      content: '';
      padding-bottom: 100%;
    }

    img {
      width: 100%;
      height: 100%;
      left: 0;
      position: absolute;
      object-fit: cover;
      border-radius: 8px;
    }
  }
}

이때 반드시 padding-bottom이나 padding-top을 100%로 선언해야 이미지가 노출된다.

여기서 padding-bottom을 100%로 하는 이유는 부모 요소의 width의 값에 1대1로 대응하는 높이값을 매칭하기 위해서 선언한다. 50%로 하면 높이가 너비에 비해 반 밖에 안되는 이미지가 노출된다. 따라서 padding-left나 padding-right로는 높이값을 만들어낼 수 없다.

그리고 기준값을 확실하게 정해놓기 위해 absolute를 이용해서 left: 0을 이용한다.