diff --git a/services/nextjs/app/tailwind/page.tsx b/services/nextjs/app/tailwind/page.tsx deleted file mode 100644 index eae0c66..0000000 --- a/services/nextjs/app/tailwind/page.tsx +++ /dev/null @@ -1,184 +0,0 @@ -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 - - 흰색 텍스트, 큰 글씨 - */} -
- 종합 예제 박스 -
-
- -
-
- ); -} \ No newline at end of file