[html] 웹 컴포넌트 스타일링

22 Dec 2023

웹 컴포넌트를 개발할 때 CSS를 적용하는 방법에 대해 알아보겠습니다.

내부 스타일링 (Internal Styling)

내부 스타일 시트는 컴포넌트 내에 스타일을 직접 작성하는 방식입니다. 다음은 내부 스타일 시트를 사용하는 예시입니다.

<template>
  <div>
    <h1 style="color: red;">내부 스타일링</h1>
  </div>
</template>

외부 스타일 시트는 별도의 CSS 파일을 작성하여 컴포넌트에 적용하는 방식입니다. 다음은 외부 스타일 시트를 사용하는 예시입니다.

<template>
  <div class="external-style">
    <h1>외부 스타일 시트</h1>
  </div>
</template>

.external-style h1 {
  color: blue;
}

CSS 프레임워크를 사용하여 미리 정의된 스타일을 쉽게 적용할 수 있습니다. 예를 들어, Bootstrap, Tailwind CSS 등이 있습니다.

CSS 전처리기를 사용하여 스타일 시트를 더 유연하게 작성할 수 있습니다. 주로 사용되는 CSS 전처리기로는 Sass, Less 등이 있습니다.

웹 컴포넌트 스타일링에 대한 소개였습니다. 다음에 또 방문해 주세요!