⭐ Experience.tsx 코드 구현 및 의미

1. section

• Experience & Education 섹션 전체를 감싸는 최상위 영역을 정의하며, 이 섹션의 기본 여백을 설정한다.

• <section ...>: 시맨틱 HTML 태그이다.

• id="experience": <section> 태그에 experience라는 고유한 이름표(ID)를 붙인다. (내비게이션 위해서)

• py-24: padding-top: 6rem(96px), padding-bottom: 6rem(96px)의 여백을 준다.

• px-4: padding-left: 1rem(16px), padding-right: 1rem(16px)의 여백을 준다.

⭐ 앞부분(Home, About, Projects)에서는 '한 번에 한 화면씩' 크게 스크롤하며 몰입하게 하고, 뒷부분(Experience, Certifications 등)에서는 py-24(96px 여백)만으로 섹션을 구분하여, 사용자가 더 빠르게 훑어볼 수 있도록 구현했다.

2. div

• 섹션의 콘텐츠 전체(제목, 카드)를 감싸는 래퍼 역할을 한다.

• max-w-6xl: 최대 가로 너비를 72rem(1152px)로 제한한다.

• mx-auto: margin-left: auto;와 margin-right: auto;를 동시에 설정한다.

• w-full : 이 <div>가 부모가 허용한 가로 너비를 100% 꽉 채우도록 만든다.
  => w-full이 너비를 100%로 채우려고 하지만, max-w-6xl이 1152px까지만으로 제한을 한다.
  => 모바일/태블릿: 화면이 1152px보다 작으므로, w-full이 적용되어 너비 100%를 꽉 채운다.
  => 데스크톱: 화면이 1152px보다 커지면, max-w-6xl이 작동하여 너비가 1152px에서 멈추고, mx-auto가 이 상자를 중앙에 배치합니다.

  
  

3. h2

• Experience & Education 섹션의 메인 제목에 스타일을 적용하는 코드이다.

• text-4xl: 제목 텍스트의 크기를 2.25rem(36px)로 설정한다.

• font-bold: font-weight: 700. 텍스트를 굵게 만든다.

• mb-12: 아래에 3rem (약 48px)의 여백을 준다.

• text-center: 텍스트를 가운데 정렬시킨다.

• text-indigo-400: 글자 색상을 indigo-400 (보라색 계열)으로 설정한다.

  
  

4. div

• 실제 내용물을 감싸는 카드의 스타일과 레이아웃을 정의한다.

• card-bg: globals.css에 직접 만든 커스텀 클래스이다.

• bg-[rgba(17,24,39,0.6)]: background-color를 반투명한 어두운 색으로 직접 지정한다.

• p-8: 카드 안쪽 (상하좌우)에 2rem(32px)의 안쪽 여백을 준다.

• rounded-xl: 카드의 모서리를 0.75rem(12px)만큼 둥글게 깎는다.

• max-w-3xl: 이 카드의 최대 가로 너비를 48rem(768px)로 제한한다.

• mx-auto: margin-left: auto;와 margin-right: auto;를 의미한다.
  => 부모 div 안에서 가로 정중앙에 배치시킨다.

5. h3

• Experience 카드 내부의 소제목 역할을 한다.

• <h3>: 이 카드의 제목을 의미적으로 나타낸다.

• text-2xl: 이 소제목 텍스트의 크기를 1.5rem(24px)로 설정한다.

• font-bold: font-weight: 700. 텍스트를 굵게 만든다.

• text-white: 텍스트의 색상을 흰색으로 설정한다.

6. P

• 이 코드는 소제목 바로 아래에 오는 부제목 역할을 한다.

• text-indigo-300: 텍스트의 색상을 밝은 남색(indigo) 계열로 설정한다.

• font-semibold: font-weight: 600. 텍스트의 굵기를 세미볼드로 설정한다.

• my-1: margin-top: 0.25rem (4px)과 margin-bottom: 0.25rem (4px)을 동시에 설정한다.

7. P

• 이 코드는 부제목 바로 아래에 오는 기간을 표시하는 코드이다.

• <p>: HTML의 문단 태그. 기간 텍스트 한 줄을 감싼다.

• text-gray-400: 텍스트의 색상을 회색으로 설정한다.

• 2022.12 - 2023.05: 이 <p> 태그 안에 표시될 실제 텍스트 내용.

8. ul & li

• 이 코드는 무엇을 배웠는지 불릿(•) 목록 형태로 보여주는 코드이다.

• <ul> 태그
  => <ul>은 순서가 없는 목록 (Unordered List)의 약자이다.
  => 이 태그로 감싸면, 자식 <li> 태그들 앞에 불릿(•) 기호가 붙는다.

• list-disc: list-style-type: disc.
  => 목록의 불릿 스타일을 채워진 원(•)모양으로 설정한다.
  

• list-inside: list-style-position: inside.
  => 불릿(•)을 <li> 텍스트의 안쪽에 배치한다.

• mt-4: 위쪽에 1rem (16px)의 여백을 준다.

• text-gray-300: 이 <ul> 안에 있는 모든 <li> 텍스트의 기본 색상을 밝은 회색으로 설정한다.

• space-y-2: 자식 요소들 사이에 0.5rem(8px)의 간격을 준다.

---

🩷 결과

• 화면