사이트 전체 스타일 추가

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

요구 사항

• 전역 스타일 적용

전역 스타일시트 추가

섹션 제목: 전역 스타일시트 추가

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.astro 및 src/pages/blog.astro에 추가합니다.

src/pages/index.astro

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

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

패턴 분석

섹션 제목: 패턴 분석

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

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

  네, 그렇습니다.

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

  네, <h1>의 크기는 전체적으로 2.5rem이지만 <style> 태그에서는 로컬로 4rem입니다. 정보 페이지에는 로컬 ‘4rem’ 규칙이 적용됩니다.

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

  전역 스타일과 페이지의 로컬 <style> 태그 모두에서 충돌하는 스타일이 정의된 경우 로컬 스타일이 모든 전역 스타일을 덮어써야 합니다. (그러나 다른 요인도 있을 수 있으므로 항상 사이트를 직접 검사하여 스타일이 제대로 적용되었는지 확인하세요!)

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

  사이트 전체에 스타일을 적용하려면 global.css 파일을 사용하도록 선택합니다. 그러나 스타일을 단일 .astro 파일의 HTML 콘텐츠에만 적용하고 사이트의 다른 요소에는 영향을 주지 않으려면 <style> 태그를 선택합니다.

체크리스트

섹션 제목: 체크리스트

• .css 파일을 가져와 전역 CSS 스타일을 추가할 수 있습니다.

참고 자료

섹션 제목: 참고 자료

• Astro 구문과 JSX - 비교

• Astro <style> 태그

• Astro의 CSS 변수