다른 도메인의 스타일시트를 자바스크립트로 가져오는 것은 보안상의 이유로 기본적으로 허용되지 않습니다. 그러나 교차 출처 리소스 공유(CORS) 정책을 사용하면 이를 허용할 수 있습니다.

1. 서버에서 CORS 정책 설정하기

자바스크립트에서 다른 도메인의 스타일시트를 사용하기 위해, 해당 서버에서 CORS 정책을 설정해야 합니다. 이를 위해 서버 측에서 응답 헤더에 Access-Control-Allow-Origin을 추가해야 합니다.

Access-Control-Allow-Origin: https://example.com

위의 코드에서 https://example.com은 스타일시트를 사용하기 허용할 도메인 주소입니다. 이 설정을 통해 해당 도메인에서 자바스크립트로 스타일시트에 접근할 수 있게 됩니다.

2. 자바스크립트로 스타일시트 가져오기

CORS를 설정한 서버에서 스타일시트를 가져오기 위해, 자바스크립트를 사용해서 비동기적으로 스타일시트를 가져올 수 있습니다. 이를 위해 fetch() 함수를 사용할 수 있습니다.

fetch('https://example.com/style.css')
  .then(response => response.text())
  .then(css => {
    const style = document.createElement('style');
    style.innerHTML = css;
    document.head.appendChild(style);
  })
  .catch(error => {
    console.error('Error:', error);
  });

위의 코드에서 https://example.com/style.css는 가져오고자 하는 스타일시트의 URL입니다. fetch() 함수는 해당 URL에서 스타일시트를 가져오며, 가져온 스타일시트는 동적으로 생성된

요약

CORS를 사용하여 자바스크립트에서 다른 도메인의 스타일시트를 사용하기 위해서는 서버에서 CORS 정책을 설정해야 합니다. 이렇게 설정한 후 자바스크립트를 사용하여 스타일시트를 비동기적으로 가져올 수 있습니다. 이를 통해 다른 도메인의 스타일시트를 사용하여 웹 페이지의 모양을 컨트롤할 수 있습니다.