커스터마이징

2024. 1. 22.
guide customization

커스터마이징

사이트를 자신만의 스타일로 꾸미는 방법을 안내합니다.

색상 변경

Tailwind 설정

tailwind.config.mjs 파일에서 색상을 변경할 수 있습니다:

theme: {
  extend: {
    colors: {
      primary: '#fd7318',    // 메인 색상
      secondary: '#43d6a8',  // 보조 색상
      accent: '#5fadfe',     // 강조 색상
    },
  },
},

CSS 변수

src/styles/global.css에서 CSS 변수를 수정할 수도 있습니다.

폰트 변경

웹 폰트 추가

src/layouts/Base.astro의 <head> 태그에 폰트 링크를 추가하세요.

Tailwind 설정

fontFamily: {
  sans: ['Your Font', 'sans-serif'],
  mono: ['JetBrains Mono', 'monospace'],
},

레이아웃 수정

헤더

src/components/Header.astro에서 네비게이션을 수정할 수 있습니다.

푸터

src/components/Footer.astro에서 푸터 링크와 정보를 수정하세요.

페이지 추가

src/pages/ 폴더에 새로운 .astro 파일을 만들면 자동으로 라우팅됩니다.