콘텐츠로 이동

사이트 전체 스타일 추가

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

이번에 배울 내용

  • 전역 스타일 적용

전역 스타일시트 추가

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

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

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

  2. 다음 코드를 새 파일 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 문을 추가하세요.

    ---
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 = "crimson";
const fontWeight = "bold";
const textCase = "uppercase";
---

  4. 정보 페이지의 브라우저 미리보기를 확인하면 이제 새로운 스타일이 적용된 것을 볼 수 있습니다!

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

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

✅ 코드를 확인하세요! ✅

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

---
import '../styles/global.css';
---

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

패턴 분석

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

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

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

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

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

체크리스트

참고 자료

기여하기 커뮤니티 후원하기