키워드

Intl API

Intl(국제화) 객체는 다양한 지역화 기능을 제공하여 다국어 지원 및 국제화를 쉽게 처리할 수 있도록 도와준다. 이 객체는 날짜 및 시간 형식, 숫자 형식, 통화 형식 등을 다양한 지역에 맞게 포맷팅하고 해석하는 기능을 제공한다.

Intl.DateTimeFormat : 이 객체는 날짜와 시간을 다국어로 포맷할 수 있도록 해준다. 사용자가 지역화된 날짜 형식을 원하는 경우 이 객체를 사용하여 지정된 언어 및 지역에 맞게 날짜를 표시할 수 있다.

const date = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
console.log(new Intl.DateTimeFormat('en-US', options).format(date));
// 출력 예: Thursday, February 14, 2024

Intl.NumberFormat : 이 객체는 숫자를 다국어로 포맷할 수 있도록 해준다. 사용자가 지역화된 숫자 형식을 원하는 경우 이 객체를 사용하여 지정된 언어 및 지역에 맞게 숫자를 표시할 수 있다.

const number = 123456.789;
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// 출력 예: 123.456,79 €

Intl.RelativeTimeFormat : 이 객체는 상대적인 시간 표현을 다국어로 포맷할 수 있도록 해준다. “1분전”, “5일 후”와 같은 상대적인 시간을 특정 언어 및 지역에 맞게 표시할 수 있다.

const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
console.log(rtf.format(-1, 'day'));
// 출력 예: yesterday

aspect-ratio

aspect-ratio 속성은 요소의 가로 세로 비율을 정의하는데 사용된다. 부모 컨테이너 또는 뷰포트 크기가 변경되더라도 지정된 비율을 유지하도록 요소의 치수를 조정한다.

aspect-ratio: 가로 / 세로;

.my-element {
  aspect-ratio: 16 / 9;
}

.my-element {
  width: 300px; /* 예시로 지정된 너비 */
  aspect-ratio: 16 / 9;
}