컨텐츠로 이동

사이트 전체 스타일 추가

이제 스타일이 지정된 정보 페이지가 있으므로 사이트의 나머지 부분에 전역 스타일을 추가할 차례입니다!

요구 사항

  • 전역 스타일 적용

Astro <style> 태그가 기본적으로 범위가 지정되어 있음을 확인했습니다. 이는 자체 파일의 요소에만 영향을 미친다는 의미입니다.

Astro에서 스타일을 전역으로 정의하는 몇 가지 방법이 있지만, 이 튜토리얼에서는 global.css 파일을 만들고 각 페이지에 가져옵니다. 스타일시트와 <style> 태그의 조합을 사용하면 사이트 전체에서 일부 스타일을 제어하고 일부 특정 스타일을 원하는 위치에 정확하게 적용할 수 있습니다.

  1. src/styles/global.css 위치에 새 파일을 만듭니다. (먼저 styles 폴더를 만들어야 합니다.)

  2. 다음 코드를 새 파일 global.css에 복사하세요.

    src/styles/global.css
    html {
    background-color: #f1f5f9;
    font-family: sans-serif;
    }
    body {
    margin: 0 auto;
    width: 100%;
    max-width: 80ch;
    padding: 1rem;
    line-height: 1.5;
    }
    * {
    box-sizing: border-box;
    }
    h1 {
    margin: 1rem 0;
    font-size: 2.5rem;
    }
  3. about.astro에서 프런트매터에 다음 import 문을 추가하세요.

    src/pages/about.astro
    ---
    import '../styles/global.css';
    const pageTitle = "About Me";
    const identity = {
    firstName: "Sarah",
    country: "Canada",
    occupation: "Technical Writer",
    hobbies: ["photography", "birdwatching", "baseball"],
    };
    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
    const happy = true;
    const finished = false;
    const goal = 3;
    const skillColor = "navy";
    const fontWeight = "bold";
    const textCase = "uppercase";
    ---
  4. 정보 페이지의 브라우저 미리보기를 확인하면 이제 새로운 스타일이 적용된 것을 볼 수 있습니다!

직접 시도해 보세요 - 전역 스타일시트 가져오기

섹션 제목: 직접 시도해 보세요 - 전역 스타일시트 가져오기

사이트의 모든 페이지에 전역 스타일을 적용하려면 프로젝트의 각 .astro 파일에 필요한 코드 줄을 추가하세요.

✅ 코드를 확인하세요! ✅

다음 import 문을 다른 두 페이지 파일인 src/pages/index.astrosrc/pages/blog.astro에 추가합니다.

src/pages/index.astro
---
import '../styles/global.css';
---

정적 또는 동적으로 페이지 템플릿에 HTML 요소를 추가하여 정보 페이지의 콘텐츠를 변경하거나 추가합니다. HTML에서 사용할 값을 제공하기 위해 프런트맽처 스크립트에 추가 JavaScript를 작성하세요. 이 페이지가 만족스러우면 다음 강의로 넘어가기 전에 변경 사항을 GitHub에 커밋하세요.

여러분의 정보 페이지는 이제 가져온 global.css 파일 <style> 태그를 둘 다 사용하여 스타일이 지정되었습니다.

  • 두 스타일링 방법의 스타일이 모두 적용됩니까?

  • 상충되는 스타일이 있나요? 그렇다면 어떤 스타일이 적용되나요?

  • global.css<style>이 어떻게 함께 작동하는지 설명하세요.

  • global.css 파일 또는 <style> 태그에서 스타일을 선언할지 어떻게 선택하시겠습니까?