특정 영역을 원하는 비율로 렌더링하기 Render a specific area at the desired ratio

2023/12/06 18:17:08@ O612

aspect-ratio를 사용하여 비율을 지정합니다.

Use aspect-ratio to specify a ratio.

언어: ReactJS
타입스크립트 사용 여부: 사용 안함

컴포넌트Component

국문Korean

// @/styles/예제.module.sass

.외부
  aspect-ratio: 16 / 9
  
  .내부
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%

영문English

// @/styles/example.module.sass

.external
  aspect-ratio: 16 / 9
  
  .internal
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%

사용방법How to use

국문Korean

import styles from '@/styles/예제.module.sass';

function 예제컴포넌트() {
  return (
    <div className={styles.외부}>
      <div className={styles.내부}>헬로 월드</div>
    </div>
  )
}

export default 예제컴포넌트;

영문English

import styles from '@/styles/example.module.sass';

function Example() {
  return (
    <div className={styles.external}>
      <div className={styles.internal}>Hello world</div>
    </div>
  )
}

export default Example;