220d9b77d7
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
70 lines
2.3 KiB
Markdown
70 lines
2.3 KiB
Markdown
# Tailwind CSS 도입 및 모바일 반응형 문제 해결
|
|
|
|
## 문제
|
|
- Space Times 홈페이지 모바일(375px)에서 TabSection 등 컴포넌트들이 가로로 넘침
|
|
- 사용자가 의도하지 않은 가로 스크롤 발생
|
|
|
|
## 시도한 해결책들
|
|
### 1차: 개별 컴포넌트 CSS 수정
|
|
- TabSection.css에 미디어 쿼리 추가
|
|
- width: 100%, overflow-x: hidden 적용
|
|
- 문제: 일시적으로 해결됐다가 다시 발생
|
|
|
|
### 2차: 전역 CSS 해결
|
|
- index.css에 전역 스타일 추가
|
|
```css
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body, html {
|
|
overflow-x: hidden !important;
|
|
max-width: 100% !important;
|
|
}
|
|
```
|
|
- 문제: CSS 우선순위 충돌로 불완전한 해결
|
|
|
|
## 최종 해결: Tailwind CSS v3 도입
|
|
### 설치
|
|
```bash
|
|
npm install -D tailwindcss@^3 autoprefixer postcss
|
|
```
|
|
|
|
### 설정 파일
|
|
- tailwind.config.js: content 경로 설정
|
|
- postcss.config.js: tailwindcss, autoprefixer 플러그인 설정
|
|
- index.css: @tailwind 디렉티브 추가
|
|
|
|
### 주요 변경사항
|
|
1. 모든 컴포넌트를 Tailwind 버전(TW suffix)으로 재작성
|
|
- TabSection → TabSectionTW
|
|
- ServiceCards → ServiceCardsTW
|
|
- ContentSection → ContentSectionTW
|
|
- Sidebar → SidebarTW
|
|
- HeroCarousel → HeroCarouselTW
|
|
- SearchSection → SearchSectionTW
|
|
|
|
2. CSS 파일 제거, 유틸리티 클래스로 대체
|
|
- 반응형: sm:, md:, lg: 프리픽스 사용
|
|
- 그리드: grid grid-cols-1 sm:grid-cols-3
|
|
- 플렉스박스: flex flex-col sm:flex-row
|
|
|
|
### Tailwind v4 → v3 다운그레이드
|
|
- 초기 Tailwind v4 설치 시 PostCSS 플러그인 호환 문제 발생
|
|
- v3로 다운그레이드하여 안정성 확보
|
|
|
|
### SNS 버튼 브랜드 색상 적용
|
|
- 카카오톡: #FEE500 (공식 노란색)
|
|
- 인스타그램: gradient from-[#833ab4] via-[#fd1d1d] to-[#fcb045]
|
|
- 유튜브: #FF0000 (공식 빨간색)
|
|
|
|
## 결과
|
|
- 375px 모바일 화면에서 가로 스크롤 완전 제거
|
|
- 모든 컴포넌트가 뷰포트 내에 정상 표시
|
|
- 깔끔한 유틸리티 클래스 기반 스타일링
|
|
|
|
## 교훈
|
|
- CSS 충돌 문제는 근본적인 해결책(Tailwind 같은 유틸리티 프레임워크)이 효과적
|
|
- Tailwind v4는 아직 불안정, 프로덕션은 v3 사용 권장
|
|
- 브랜드 색상은 hex 코드로 직접 지정 ([#색상코드] 형식) |