콘텐츠로 이동

정보 페이지 스타일 지정

이제 여러분에 대한 콘텐츠가 포함된 정보 페이지가 있으므로 스타일을 지정할 차례입니다!

이번에 배울 내용

  • 단일 페이지의 스타일 항목
  • CSS 변수 사용

개별 페이지 스타일 지정

Astro의 자체 <style></style> 태그를 사용하여 페이지 항목의 스타일을 지정할 수 있습니다. 이러한 태그에 속성 및 지시어를 추가하면 스타일을 더욱 다양하게 지정할 수 있습니다.

  1. 다음 코드를 복사하여 src/pages/about.astro에 붙여넣습니다.

    <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{pageTitle}</title>
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
    </style>
  </head>

    브라우저 미리보기에서 세 페이지를 모두 확인하세요.

    • 다음 페이지 제목은 어떤 색상인가요?

      • 홈 페이지?
      • 정보 페이지?
      • 블로그 페이지?

    • 제목 텍스트가 가장 큰 페이지는 무엇입니까?

    :::tip색상을 시각적으로 확인할 수 없는 경우 브라우저의 개발 도구를 사용하여 <h1> 제목 요소를 검사하고 적용된 텍스트 색상을 확인할 수 있습니다.:::

  2. 정보 페이지에 생성된 <li> 요소에 클래스 이름 skill을 추가하면 스타일을 지정할 수 있습니다. 이제 코드는 다음과 같습니다.

    <p>My skills are:</p>
<ul>
  {skills.map((skill) => <li class="skill">{skill}</li>)}
</ul>

  3. 기존 스타일 태그에 다음 코드를 추가합니다.

    <style>
  h1 {
    color: purple;
    font-size: 4rem;
  }
  .skill {
    color: green;
    font-weight: bold;
  }
</style>

  4. 브라우저에서 정보 페이지를 다시 방문하여 직접 검사 또는 개발 도구를 통해 기술 목록의 각 항목이 이제 녹색이고 굵게 표시되는지 확인하세요.

첫 번째 CSS 변수 사용

Astro <style> 태그는 define:vars={ {...} } 지시어를 사용하여 프런트매터 스크립트의 모든 변수를 참조할 수도 있습니다. 코드 펜스 내에서 변수를 정의한 다음 스타일 태그에서 CSS 변수로 사용할 수 있습니다.

  1. 다음과 같이 src/pages/about.astro의 프런트매터 스크립트에 skillColor 변수를 추가하여 정의합니다.

    ---
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";
---

  2. 아래의 기존 <style> 태그를 업데이트하여 먼저 정의한 다음 이중 중괄호 안에 이 skillColor 변수를 사용하세요.

    <style define:vars={{skillColor}}> 
  h1 {
    color: purple;
    font-size: 4rem;
  }
  .skill {
    color: green;
    color: var(--skillColor);
    font-weight: bold;
  }
</style>

  3. 브라우저 미리보기에서 정보 페이지를 확인하세요. 이제 define:vars 지시어에 전달된 skillColor 변수에 따라 스킬이 진홍색으로 표시되는 것을 볼 수 있습니다.

직접 시도해 보기 - CSS 변수 정의

  1. 정보 페이지의 <style> 태그를 업데이트하여 아래와 일치하도록 하세요.

    <style define:vars={{skillColor, fontWeight, textCase}}>
  h1 {
    color: purple;
    font-size: 4rem;
  }
  .skill {
    color: var(--skillColor);
    font-weight: var(--fontWeight);
    text-transform: var(--textCase);
  }
</style>

  2. 새로운 <style> 태그가 기술 목록에 이러한 스타일을 성공적으로 적용할 수 있도록 프런트매터 스크립트에 누락된 변수 정의를 추가하세요.

    • 텍스트 색상은 진홍색입니다.
    • 텍스트가 굵게 표시됩니다.
    • 목록 항목은 모두 대문자입니다.

✅ 코드를 확인하세요! ✅

---
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";
---

체크리스트

참고 자료

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