astro-sphere 홈 수정 & font 변경

1. astro-sphere Home 수정

• /src/pages/index.astro 파일 원본

<div class="animate absolute h-full w-full flex items-center justify-center">
	<div class='relative w-full h-full flex items-center justify-center'>
		<div class='p-5 text-center'>
			<p class='animated text-lg md:text-xl lg:text-2xl font-semibold opacity-75'>
				Hello, I am ...
			</p>
			<p class='animated text-2xl md:text-3xl lg:text-4xl font-bold uppercase text-black dark:text-white'>
				Astro Sphere
			</p>
			<p class='animated text-sm md:text-base lg:text-lg opacity-75'>
				Currently designing products for humans.
			</p>

			<div id="ctaButtons" class='animated flex flex-wrap gap-4 justify-center mt-5'>
				<a href='/blog' class='py-2 px-4 rounded truncate text-xs md:text-sm lg:text-base bg-black dark:bg-white text-white dark:text-black hover:opacity-75 blend'>
					Read my blog
				</a>
				<a href='/work' class='py-2 px-4 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend'>
					View my work
				</a>
			</div>
		</div>
	</div>
</div>

• ‘Hello, I am’ 텍스트를 찾아서 원하는 대로 수정

<div class="animate absolute h-full w-full flex items-center justify-center">
	<div class='relative w-full h-full flex items-center justify-center'>
		<div class='p-5 text-center'>
			<p class='animated text-lg md:text-xl lg:text-xl font-semibold opacity-75'>
				배운 기술로 뭐든 해보고 싶은
			</p>
			<p class='animated text-2xl md:text-3xl lg:text-4xl font-bold text-black dark:text-white'>
				Beta10's 블로그
			</p>
			<p class='animated text-sm md:text-base lg:text-sm opacity-75'>
				회사다니면서 익힌 기술로 부수입을 만들어보고 싶어,<br />
				이것 저것 공부하고 만들어보고 있습니다.
			</p>
			<div id="ctaButtons" class='animated flex flex-wrap gap-4 justify-center mt-5'>
				<a href='/blog' class='py-2 px-4 rounded truncate text-xs md:text-sm lg:text-base bg-black dark:bg-white text-white dark:text-black hover:opacity-75 blend'>
					Read my blog
				</a>
				<!-- a href='/work' class='py-2 px-4 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend'>
					View my work
				</a -->
			</div>
		</div>
	</div>
</div>

• 원하는 내용으로 텍스트 수정
• 폰트 살짝 크기 줄임

2. font 바꾸기

• /src/styles/global.css 수정
• 나눔스퀘어 폰트 사용하기 위해 제일 상단에 font import 추가
• html 의 font-family 수정

@import url(https://cdn.jsdelivr.net/gh/moonspam/[email protected]/nanumsquare.css);

...

html {
	overflow-y: scroll;
	color-scheme: light;
	background-color: white;
	font-family: "NanumSquare", sans-serif;
}