컨텐츠로 이동

정보 페이지 스타일 지정

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

요구 사항

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

개별 페이지 스타일 지정

섹션 제목: 개별 페이지 스타일 지정

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

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

    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>

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

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

      • 홈 페이지?
      • 정보 페이지?
      • 블로그 페이지?
    • 제목 텍스트가 가장 큰 페이지는 무엇입니까?

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

    src/pages/about.astro
    <p>My skills are:</p>
    <ul>
    {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>
  3. 기존 스타일 태그에 다음 코드를 추가합니다.

    src/pages/about.astro
    <style>
    h1 {
    color: purple;
    font-size: 4rem;
    }
    .skill {
    color: green;
    font-weight: bold;
    }
    </style>
  4. 브라우저에서 정보 페이지를 다시 방문하여 직접 검사 또는 개발 도구를 통해 기술 목록의 각 항목이 이제 녹색이고 굵게 표시되는지 확인하세요.

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

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

    src/pages/about.astro
    ---
    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";
    ---
  2. 아래의 기존 <style> 태그를 업데이트하여 먼저 정의한 다음 이중 중괄호 안에 이 skillColor 변수를 사용하세요.

    src/pages/about.astro
    <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 변수 정의

섹션 제목: 직접 시도해 보기 - CSS 변수 정의
  1. 정보 페이지의 <style> 태그를 업데이트하여 아래와 일치하도록 하세요.

    src/pages/about.astro
    <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> 태그가 기술 목록에 이러한 스타일을 성공적으로 적용할 수 있도록 프런트매터 스크립트에 누락된 변수 정의를 추가하세요.

    • 텍스트 색상은 네이비 블루입니다.
    • 텍스트가 굵게 표시됩니다.
    • 목록 항목은 모두 대문자입니다.
✅ 코드를 확인하세요! ✅
src/pages/about.astro
---
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";
---