스타일과 CSS(Styles and CSS)

Astro는 스타일링과 CSS 작성이 간편하도록 설계됐어요. Astro 컴포넌트 안에 직접 CSS를 쓰거나, Tailwind 같은 인기 있는 CSS 라이브러리를 import할 수 있어요. <style> 태그, 스코프된 스타일, 전역 스타일, CSS 변수, 외부 스타일시트를 정리할게요.

출처: https://docs.astro.build/en/guides/styling/

Astro에서 스타일링하기

Astro 컴포넌트의 스타일링은 컴포넌트나 페이지 템플릿에 <style> 태그를 추가하는 것만큼 간단해요. <style> 태그를 넣으면 Astro가 CSS를 감지하고 자동으로 처리해줘요.

스코프된 스타일(Scoped Styles)

Astro <style> CSS 규칙은 기본적으로 스코프(scoped) 돼요. 스코프된 스타일은 같은 컴포넌트 안에 작성된 HTML에만 적용되도록 컴파일돼요.

이 CSS는:

<style>
  h1 { color: red; }
  .text { color: blue; }
</style>

이렇게 컴파일돼요:

h1[data-astro-cid-hhnqfkh6] { color: red; }
.text[data-astro-cid-hhnqfkh6] { color: blue; }

전역 스타일(Global Styles)

대부분의 컴포넌트에는 스코프된 스타일을 권장하지만, 전역 비스코프 CSS를 써야 할 타당한 이유가 있을 수도 있어요. <style is:global> 속성으로 자동 스코핑을 해제할 수 있어요.

CSS 변수

Astro <style>은 페이지에서 사용 가능한 모든 CSS 변수를 참조할 수 있어요. define:vars 디렉티브로 컴포넌트 frontmatter에서 CSS 변수를 직접 전달할 수도 있어요.

---
const foregroundColor = "rgb(221 243 228)";
const backgroundColor = "rgb(24 121 78)";
---
<style define:vars={{ foregroundColor, backgroundColor }}>
  h1 {
    background-color: var(--backgroundColor);
    color: var(--foregroundColor);
  }
</style>
<h1>Hello</h1>

인라인 스타일

style 속성으로 HTML 요소를 인라인으로 스타일링할 수 있어요. CSS 문자열이거나 CSS 속성의 객체일 수 있어요.

외부 스타일

로컬 스타일시트 import

Astro 컴포넌트 frontmatter에서 ESM import 문법으로 스타일시트를 import할 수 있어요. CSS import는 다른 ESM import처럼 컴포넌트를 기준으로 상대 경로여야 하고, 컴포넌트 스크립트 맨 위에서 다른 import들과 함께 작성해야 해요.

---
// Astro 가 이 CSS 를 자동으로 번들·최적화해줍니다
// .scss, .styl 같은 프리프로세서 파일도 동작합니다
import '../styles/utils.css';
---
<html></html>

npm 패키지에서 CSS 파일을 import할 때는 vite.ssr.noExternal 배열에 패키지 이름을 추가해야 프리렌더링을 올바르게 보장할 수 있어요.

`<link>` 태그로 정적 스타일시트 로드

<link> 요소로도 페이지에 스타일시트를 로드할 수 있어요. 이 값은 /public 디렉토리의 CSS 파일에 대한 절대 URL 경로이거나, 외부 웹사이트 URL이어야 해요. 상대 <link> href 값은 지원되지 않아요.

Tailwind

Astro는 Tailwind를 포함한 인기 있는 CSS 라이브러리·도구·프레임워크를 프로젝트에 추가하는 것을 지원해요.

프레임워크와 라이브러리

React/Preact 같은 UI 프레임워크에서도 CSS를 쓸 수 있어요. CSS Modules는 .module.css, .module.scss, .module.sass 확장자로 import할 수 있어요.

Markdown 스타일링

페이지 콘텐츠를 감싸는 레이아웃에 import한 스타일시트를 추가해 Markdown 콘텐츠에 전역 스타일을 적용할 수 있어요. 레이아웃 컴포넌트의 <style is:global> 태그로도 가능해요.

더 알아보기

Tailwind 통합: https://docs.astro.build/en/guides/integrations-guide/tailwind/
Astro 컴포넌트: https://docs.astro.build/en/basics/astro-components/
배포(Distribution): https://docs.astro.build/en/guides/deploy/

스타일과 CSS(Styles and CSS)