⭐ Home.tsx 코드 구현 및 의미

1. Section 태그

• flex: <section> 태그를 'flex 컨테이너'로 만든다.
• flex-col: flex의 방향, 즉 주축을 가로가 아닌 세로로 바꾼다.
• justify-center: 주축이 세로가 되었기 때문에, justify-center는 자식 요소들을 세로 방향으로 중앙에 정렬시킨다.
• min-h-screen: <section>의 높이가 화면 전체 높이이므로, justify-center는 결과적으로 모든 텍스트를 화면의 세로 정중앙에 배치하는 역할을 한다.
• items-center: 교차축 중앙 정렬
• text-center: 자식 요소들 안에 있는 글자들을 가운데 정렬한다.
  
  
  

2. h1 태그

• text-4xl: (모바일 기본) 글자 크기를 2.25rem (약 36px)로 설정한다.
• md:text-6xl: (반응형) 화면 너비가 md이상으로 커지면, 글자 크기를 3.75rem (약 60px)로 덮어씌운다

  sm:: 640px 이상일 때
  md:: 768px 이상일 때
  lg:: 1024px 이상일 때
  xl:: 1280px 이상일 때

• font-extrabold: 글자 굵기를 800으로 설정한다.
• leading-tight: 줄 간격을 1.25로 좁게 설정한다.
• mb-4: margin-bottom을 1rem (16px) 준다.
• text-glow: globals.css에 직접 추가한 커스텀 클래스

3. 첫번째 p 태그

• text-5xl: (모바일 기본) 글자 크기를 3rem (약 48px)으로 설정한다.
• md:text-7xl: (반응형) 화면 너비가 md이상으로 커지면, 글자 크기를 4.5rem (약 72px)로 덮어씌운다.
• font-black: 글자 굵기를 900으로 가장 굵게 설정한다.
• mb-8: margin-bottom을 2rem (32px) 준다.
• text-indigo-400: 글자 색상을 indigo-400 (보라색 계열)로 설정한다.

4. 두번째 p 태그

• max-w-2xl: max-width를 42rem (약 672px)로 지정한다.
• text-lg: (모바일 기본) 글자 크기를 1.125rem (약 18px)으로 설정한다.
• md:text-xl: (반응형) 화면 너비가 md이상으로 커지면, 글자 크기를 1.25rem (약 20px)으로 설정한다.
• text-gray-300: 글자 색상을 gray-300 (밝은 회색)으로 설정한다.

---

🩷 결과

• 화면