⭐ Skills.tsx 코드 구현 및 의미
1. Section 태그
-
min-h-screen: 이
<section>의 최소 높이를 사용자의 브라우저 화면 높이와 똑같이 만든다. -
py-24: p (padding) + y (Y축) + 24 (6rem = 96px)
=> padding-top: 6rem과 padding-bottom: 6rem을 동시에 설정한다. -
px-4: p (padding) + x (X축) + 4 (1rem = 16px)
=> padding-left: 1rem과 padding-right: 1rem을 동시에 설정한다. -
flex: 이
<section>태그를 flex 컨테이너로 만든다. -
items-center: 교차축 중앙 정렬한다.
=> flex의 기본 방향이 가로이므로, items-center는 자식 요소를 세로 방향으로 중앙에 정렬시킨다.
2. div 태그
-
이
<div>는 Skills 섹션의 콘텐츠 전체를 감싸는 래퍼 역할을 한다. -
max-w-6xl: 이
<div>의 최대 가로 너비를 72rem (1152px)로 제한한다. -
mx-auto: margin-left: auto, margin-right: auto를 의미한다.
-
w-full: 이
<div>가 부모<section>가 허용한 가로 너비를 100% 꽉 채우도록 만든다.
3. 제목
-
메인 제목에 스타일을 적용하는 역할을 한다.
-
text-4xl: 2.25rem (약 36px)을 의미한다.
-
font-bold: font-weight: 700을 의미한다.
-
mb-12: margin-bottom: 3rem (약 48px)을 의미한다.
-
text-center: 텍스트를 가운데 정렬시킨다.
-
text-indigo-400: 글자 색상을 보라색 계열로 설정한다.
4. 본문
-
두 개의 카드를 감싸는 그리드 컨테이너이다.
-
grid: 이
<div>를 Grid 컨테이너로 만든다. 이<div>의 자식 요소들을 격자판처럼 정렬할 수 있다. -
grid-cols-1: (모바일 기본) 이 그리드는 1개의 세로 열을 가진다.
-
md:grid-cols-2: (반응형) 화면 너비가 md 이상으로 커지면, grid-cols-1 설정을 덮어쓰고, 이 그리드를 2개의 세로 열로 변경한다.
-
gap-8: 그리드의 각 칸 사이에 2rem (32px)의 간격을 만든다.
-
max-w-4xl: 이
<div>의 최대 가로 너비를 56rem(896px)로 제한한다. -
mx-auto: margin-left: auto, margin-right: auto를 의미한다.
5. Front-end 카드
div
- 이
<div>는 카드 전체의 외형과 스타일을 결정한다. - card-bg: globals.css에 직접 만든 커스텀 클래스이다.
- bg-[rgba(17, 24, 39, 0.6)]: 반투명 검은색으로 배경 색상을 설정한다.
- p-8: padding: 2rem (32px).
=> 카드 안쪽 상하좌우에 32px의 여백을 준다. - rounded-xl: border-radius: 0.75rem (12px).
=> 카드의 모서리를 둥글게 깎는다. - h-full: height: 100%.
h3
- text-2xl: 글자 크기를 1.5rem (24px)로 설정한다.
- font-bold: font-weight: 700.
=> 텍스트를 굵게 만든다. - text-green-300: 글자 색상을 밝은 초록색으로 설정한다.
- mb-4: margin-bottom: 1rem (16px).
ul
-
space-y-2: 자식 요소들 사이에 y축 0.5rem (8px) 간격을 준다.
=> 즉,<ul>안의<li>태그들 사이에 8px의 margin-top을 자동으로 추가하여 목록 간격을 일정하게 만든다. (첫 번째<li>에는 적용되지 않는다.) -
text-gray-300: 이
<ul>안의 모든<li>텍스트 색상을 밝은 회색으로 설정한다.
6. Deployment & Tools 카드
div
- 이
<div>는 카드 전체의 외형과 스타일을 결정한다. - card-bg: globals.css에 직접 만든 커스텀 클래스이다.
- bg-[rgba(17, 24, 39, 0.6)]: 반투명 검은색으로 배경 색상을 설정한다.
- p-8: padding: 2rem (32px).
=> 카드 안쪽 상하좌우에 32px의 여백을 준다. - rounded-xl: border-radius: 0.75rem (12px).
=> 카드의 모서리를 둥글게 깎는다. - h-full: height: 100%.
=> 부모 그리드(md:grid-cols-2)의 한 칸을 100% 채우도록 한다. 덕분에 옆에 있는 'Front-end' 카드의 내용이 더 길어져도, 이 카드의 높이도 함께 늘어나 두 카드의 높이가 항상 동일하게 유지된다.
h3
- text-2xl: 글자 크기를 1.5rem (24px)로 설정한다.
- font-bold: font-weight: 700.
=> 텍스트를 굵게 만든다. - text-amber-300: 글자 색상을 밝은 호박색으로 설정한다.
- mb-4: margin-bottom: 1rem (16px).
ul
-
space-y-2: 자식 요소들 사이에 y축 0.5rem (8px) 간격을 준다.
=> 즉,<ul>안의<li>태그들 사이에 8px의 margin-top을 자동으로 추가하여 목록 간격을 일정하게 만든다. (첫 번째<li>에는 적용되지 않는다.) -
text-gray-300: 이
<ul>안의 모든<li>텍스트 색상을 밝은 회색으로 설정한다.
🩷 결과
- 화면
