export default function Home() { return (

Tailwind CSS 학습 자료

{/* 색상 학습 */}

1. 글씨 색상 (Text Color)

{/* 여기에는 빨간색 글씨가 와야합니다 */}

이 텍스트는 빨간색이어야 합니다

{/* 여기에는 파란색 글씨가 와야합니다 */}

이 텍스트는 파란색이어야 합니다

{/* 여기에는 초록색 글씨가 와야합니다 */}

이 텍스트는 초록색이어야 합니다

{/* 넓이와 높이 학습 */}

2. 넓이와 높이 (Width & Height)

{/* 여기에는 넓이 200px, 높이 100px이 와야합니다 */}
{/* 여기에는 넓이는 전체의 50%, 높이 150px이 와야합니다 */}
{/* 여기에는 넓이와 높이가 모두 80px인 정사각형이 와야합니다 */}
{/* 그림자 학습 */}

3. 그림자 (Shadow)

{/* 여기에는 작은 그림자가 와야합니다 */}
작은 그림자
{/* 여기에는 중간 크기 그림자가 와야합니다 */}
중간 그림자
{/* 여기에는 큰 그림자가 와야합니다 */}
큰 그림자
{/* 글씨 크기 학습 */}

4. 글씨 크기 (Text Size)

{/* 여기에는 매우 작은 글씨(12px)가 와야합니다 */}

작은 글씨

{/* 여기에는 기본 글씨 크기가 와야합니다 */}

기본 글씨

{/* 여기에는 큰 글씨(24px)가 와야합니다 */}

큰 글씨

{/* 여기에는 매우 큰 글씨(36px)가 와야합니다 */}

매우 큰 글씨

{/* Flex 학습 */}

5. Flex

{/* 여기에는 가로로 배치되는 flex container가 와야합니다 */}
Item 1
Item 2
Item 3
{/* 여기에는 세로로 배치되는 flex container가 와야합니다 */}
Item A
Item B
Item C
{/* 여기에는 가로로 배치되면서 아이템들이 가운데 정렬되는 flex container가 와야합니다 */}
중앙
정렬
{/* 정렬 학습 */}

6. 정렬 (Alignment)

{/* 여기에는 텍스트가 왼쪽 정렬되어야 합니다 */}

왼쪽 정렬된 텍스트입니다

{/* 여기에는 텍스트가 가운데 정렬되어야 합니다 */}

가운데 정렬된 텍스트입니다

{/* 여기에는 텍스트가 오른쪽 정렬되어야 합니다 */}

오른쪽 정렬된 텍스트입니다

{/* 둥근 모서리 학습 */}

7. 둥근 모서리 (Rounded Corners)

{/* 여기에는 약간 둥근 모서리가 와야합니다 */}
약간 둥근 모서리
{/* 여기에는 중간 정도 둥근 모서리가 와야합니다 */}
중간 둥근 모서리
{/* 여기에는 매우 둥근 모서리(원에 가까운)가 와야합니다 */}
매우 둥근 모서리
{/* 여기에는 완전한 원이 와야합니다 (넓이와 높이가 같고 매우 둥근 모서리) */}
{/* 마진 학습 */}

8. 마진 (Margin)

{/* 여기에는 위쪽에 마진이 4단위(16px) 와야합니다 */}
위쪽 마진 16px
{/* 여기에는 좌우에 마진이 각각 8단위(32px) 와야합니다 */}
좌우 마진 32px
{/* 여기에는 모든 방향에 마진이 12단위(48px) 와야합니다 */}
모든 방향 마진 48px
{/* 패딩 학습 */}

9. 패딩 (Padding)

{/* 여기에는 패딩이 2단위(8px) 와야합니다 */}
작은 패딩 (8px)
{/* 여기에는 패딩이 6단위(24px) 와야합니다 */}
중간 패딩 (24px)
{/* 여기에는 패딩이 12단위(48px) 와야합니다 */}
큰 패딩 (48px)
{/* 여기에는 위아래 패딩 4단위, 좌우 패딩 8단위가 와야합니다 */}
세로 16px, 가로 32px 패딩
{/* 종합 예제 */}

10. 종합 예제 (모든 개념 사용)

{/* 여기에는 다음 조건들이 모두 적용되어야 합니다: - 넓이 300px, 높이 200px - 파란색 배경 - 가운데 정렬된 텍스트(행,열 전부 정렬되어있어야 합니다.) - 큰 그림자 - 둥근 모서리 - 모든 방향 패딩 24px - 위쪽 마진 16px - 흰색 텍스트, 큰 글씨 */}
종합 예제 박스
); }