| type | title | description | i18nReady |
|---|---|---|---|
tutorial |
사이트 전체 스타일 추가 |
튜토리얼: 첫 번째 Astro 블로그 구축 — 사이트 전체 스타일링을 위한 글로벌 스타일시트 생성 |
true |
import Checklist from '/components/Checklist.astro';
import Spoiler from '/components/Spoiler.astro';
import Box from '/components/tutorial/Box.astro';
import PreCheck from '/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
이제 스타일이 지정된 정보 페이지가 있으므로 사이트의 나머지 부분에 전역 스타일을 추가할 차례입니다!
- 전역 스타일 적용Astro <style> 태그가 기본적으로 범위가 지정되어 있음을 확인했습니다. 이는 자체 파일의 요소에만 영향을 미친다는 의미입니다.
Astro에서 스타일을 전역으로 정의하는 몇 가지 방법이 있지만, 이 튜토리얼에서는 global.css 파일을 만들고 각 페이지에 가져옵니다. 스타일시트와 <style> 태그의 조합을 사용하면 사이트 전체에서 일부 스타일을 제어하고 일부 특정 스타일을 원하는 위치에 정확하게 적용할 수 있습니다.
-
다음 코드를 새 파일
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; }
-
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 = "navy"; const fontWeight = "bold"; const textCase = "uppercase"; ---
-
정보 페이지의 브라우저 미리보기를 확인하면 이제 새로운 스타일이 적용된 것을 볼 수 있습니다!
사이트의 모든 페이지에 전역 스타일을 적용하려면 프로젝트의 각 .astro 파일에 필요한 코드 줄을 추가하세요.
✅ 코드를 확인하세요! ✅
다음 import 문을 다른 두 페이지 파일인 src/pages/index.astro 및 src/pages/blog.astro에 추가합니다.
---
import '../styles/global.css';
---정적 또는 동적으로 페이지 템플릿에 HTML 요소를 추가하여 정보 페이지의 콘텐츠를 변경하거나 추가합니다. HTML에서 사용할 값을 제공하기 위해 프런트맽처 스크립트에 추가 JavaScript를 작성하세요. 이 페이지가 만족스러우면 다음 강의로 넘어가기 전에 변경 사항을 GitHub에 커밋하세요.
여러분의 정보 페이지는 이제 가져온 global.css 파일 및 <style> 태그를 둘 다 사용하여 스타일이 지정되었습니다.
-
두 스타일링 방법의 스타일이 모두 적용됩니까?
네, 그렇습니다.
-
상충되는 스타일이 있나요? 그렇다면 어떤 스타일이 적용되나요?
네, `
-
global.css와<style>이 어떻게 함께 작동하는지 설명하세요.전역 스타일과 페이지의 로컬 `<style>` 태그 모두에서 충돌하는 스타일이 정의된 경우 로컬 스타일이 모든 전역 스타일을 덮어써야 합니다. (그러나 다른 요인도 있을 수 있으므로 항상 사이트를 직접 검사하여 스타일이 제대로 적용되었는지 확인하세요!)
-
global.css파일 또는<style>태그에서 스타일을 선언할지 어떻게 선택하시겠습니까?사이트 전체에 스타일을 적용하려면 `global.css` 파일을 사용하도록 선택합니다. 그러나 스타일을 단일 `.astro` 파일의 HTML 콘텐츠에만 적용하고 사이트의 다른 요소에는 영향을 주지 않으려면 `<style>` 태그를 선택합니다.