# Modern Card Style 적용 가이드

## 📌 개요

`modern-card.css`는 all_data_list.php의 카드 스타일을 현대적으로 개선한 CSS 파일입니다.

## 🎯 주요 특징

### 1. 카드 효과
- **호버 효과**: 그림자 확대 및 3px 상승
- **이미지 줌**: 호버 시 이미지 1.1배 확대
- **부드러운 전환**: 0.3초 애니메이션

### 2. 반응형 디자인
```css
/* 데스크톱 */
.post-module { height: 470px; }

/* 태블릿 (≤768px) */
.post-module { min-height: 400px; }

/* 모바일 (≤480px) */
.post-module { min-width: 100%; }
```

### 3. 색상 테마
- **강조색**: #e74c3c (빨간색)
- **배경**: #f2f2f2 (연한 회색)
- **텍스트**: #333333 (진한 회색)
- **메타**: #999999 (중간 회색)

## 🛠️ 적용 방법

### 1단계: CSS 파일 확인
파일이 존재하는지 확인:
```
infoway/_infoway/design/css/modern-card.css
```

### 2단계: HTML 구조

#### 기본 구조
```html
<div class="masonry-item post-module">
  <div class="box br-theme box-media">
    <div class="media">
      <!-- 썸네일 -->
      <div class="thumbnail">
        <a href="상세페이지URL">
          <img src="이미지URL" class="media-object img-responsive" alt="" />
        </a>
      </div>

      <!-- 콘텐츠 -->
      <div class="post-content">
        <a href="상세페이지URL">
          <h4 class="title">제목</h4>
          <p class="sub_title">부제목 (선택사항)</p>
          <div class="post-meta">
            <ul class="list-inline">
              <li><i class="fa fa-eye"></i> 조회수</li>
              <li><i class="fa fa-comment"></i> 댓글수</li>
            </ul>
          </div>
          <p class="description">설명 (선택사항)</p>
        </a>
      </div>
    </div>
  </div>
</div>
```

### 3단계: 클래스 설명

#### 필수 클래스
- `.post-module` - 카드 컨테이너 (masonry-item과 함께 사용)
- `.thumbnail` - 이미지 영역
- `.post-content` - 텍스트 콘텐츠 영역

#### 콘텐츠 클래스
- `.title` - 제목 (26px, 굵게)
- `.sub_title` - 부제목 (20px, 강조색)
- `.post-meta` - 메타 정보 (조회수, 댓글 등)
- `.description` - 설명 텍스트 (호버 시 표시)

#### 선택적 클래스
- `.date` - 날짜 배지 (우측 상단 동그라미)
- `.category` - 카테고리 라벨 (상단 빨간 띠)
- `.sale-tag` - 세일 태그 (좌측 상단)

## 🎨 커스터마이징

### 색상 변경
```css
/* modern-card.css 수정 */

/* 강조 색상 변경 */
.post-module .post-content .category,
.post-module .thumbnail .date {
    background: #3498db; /* 파란색으로 변경 */
}

/* 제목 색상 변경 */
.post-module .post-content .title {
    color: #2c3e50; /* 더 진한 회색 */
}
```

### 카드 높이 조정
```css
.post-module {
    height: 500px; /* 기본 470px에서 변경 */
}

.post-module .thumbnail {
    height: 320px; /* 기본 280px에서 변경 */
}
```

### 호버 효과 조정
```css
.post-module:hover {
    transform: translateY(-5px); /* 상승 거리 변경 */
}

.post-module:hover .thumbnail img {
    transform: scale(1.15); /* 줌 배율 변경 */
}
```

## 📱 반응형 조정

### 태블릿 사이즈 변경
```css
@media (max-width: 900px) { /* 768px에서 900px로 변경 */
    .post-module {
        height: auto;
    }
}
```

### 모바일 사이즈 변경
```css
@media (max-width: 600px) { /* 480px에서 600px로 변경 */
    .post-module .thumbnail {
        height: 200px;
    }
}
```

## 🐛 문제 해결

### 카드가 너무 작게 보일 때
```css
.masonry-item.post-module {
    min-width: 300px; /* 최소 너비 증가 */
}
```

### 이미지가 잘릴 때
```css
.post-module .thumbnail img {
    width: 100%; /* 120%에서 100%로 변경 */
    object-fit: cover; /* 비율 유지하며 채우기 */
}
```

### 호버 효과가 너무 강할 때
```css
.post-module:hover {
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2); /* 그림자 약화 */
}
```

## 💡 사용 팁

### 1. 기존 스타일과 충돌 방지
기존 클래스명을 유지하면서 새 클래스 추가:
```html
<div class="masonry-item post-module ...">
  <!-- 기존: masonry-item만 -->
  <!-- 개선: masonry-item + post-module -->
</div>
```

### 2. 점진적 적용
한 섹션씩 테스트하며 적용:
1. mcb (게시판) → 완료 ✅
2. publishing (출판) → 완료 ✅
3. author (저자) → 작업 필요
4. 나머지 섹션들...

### 3. 캐시 문제 해결
CSS 변경 후 반영이 안 될 때:
```
Ctrl + F5 (Windows)
Cmd + Shift + R (Mac)
```

또는 버전 쿼리 변경:
```php
<link rel="stylesheet" href="...?v=20250129_001" />
```

## 📊 성능 최적화

### CSS 파일 크기
- 원본: ~8KB
- Gzip: ~2KB
- 로딩 시간: <50ms

### 애니메이션 성능
- GPU 가속 사용 (transform, opacity)
- 부드러운 60fps 유지
- 모바일에서도 원활한 동작

## 🔍 브라우저 지원

### 완전 지원
- Chrome 60+
- Firefox 55+
- Safari 11+
- Edge 79+

### 부분 지원
- IE 11 (호버 효과 제한)
- 구형 Android 브라우저 (일부 애니메이션 제한)

## 📞 문의 및 피드백

문제가 발생하거나 개선 사항이 있다면:
1. CSS 파일 버전 확인
2. 브라우저 콘솔에서 에러 확인
3. 캐시 클리어 후 재시도

---

## 📚 참고 자료

- [CSS Grid Layout](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout)
- [CSS Transitions](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
- [Responsive Design](https://web.dev/responsive-web-design-basics/)

---

**마지막 업데이트**: 2025-01-29
**버전**: 1.0.0