🎨 CSS 스타일 — 완전 분석

명함 프로필 페이지를 꾸미는 모든 CSS 파일과 핵심 스타일 규칙을 분석합니다.

📁 CSS 파일 구성

🎯 iam.css — 핵심 스타일 완전 분석

기본 레이아웃

/* === 메인 컨텐츠 영역 === */
.content {
    /* 중앙 정렬, 최대 너비 768px */
    max-width: 768px;
    margin: 0 auto;
    padding: 16px;
}

.content2 {
    /* 2단 레이아웃용 */
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* === 샘플 카드 (종이명함 표시 영역) === */
.sample_card {
    background: white;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* === 정사각형 비율 유지 트릭 === */
.square {
    position: relative;
    width: 100%;
    padding-bottom: 100%;  /* ★ 핵심: padding을 %로 주면
                               부모 width 기준으로 계산됨 */
}

.square > img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;  /* 비율 유지하며 꽉 채우기 */
}

명함 카드 스타일

/* === mall-img — 상품/명함 이미지 === */
.mall-img {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.mall-img img {
    width: 100%;
    display: block;
}

/* === mall-content — 상품/명함 텍스트 === */
.mall-content {
    padding: 8px 4px;
}

.mall-content .title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px;
}

.mall-content .desc {
    font-size: 12px;
    color: #666;
}

버튼 & 인터랙션

/* === 기본 버튼 === */
button, .btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.btn-primary {
    background: #007bff;
    color: white;
}

.btn-danger {
    background: #dc3545;
    color: white;
}

/* === 드롭다운 메뉴 === */
.dropdown-menu {
    display: none;          /* 기본 숨김 */
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1000;
}

.dropdown-menu.show {
    display: block;         /* JS로 토글 */
}

📱 반응형 디자인 — 모바일 대응

/* === iam.css의 미디어 쿼리 === */

/* 768px 이하 (태블릿/모바일) */
@media (max-width: 768px) {
    .content {
        padding: 8px;
        max-width: 100%;
    }

    .content2 {
        flex-direction: column;  /* 세로로 쌓기 */
    }

    .sample_card {
        width: 100%;
    }

    button {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* 480px 이하 (작은 모바일) */
@media (max-width: 480px) {
    .title {
        font-size: 16px;
    }

    .desc {
        font-size: 11px;
    }
}

/* 367px 이하 (아주 작은 화면) */
@media (max-width: 367px) {
    /* 초소형 화면 대응 */
    .mall-content .title {
        font-size: 12px;
    }
}

🃏 종이명함 카드 — 시각적 디자인

종이명함은 실제 명함과 비슷한 비율(약 9:5)로 표시됩니다:

┌────────────────────────────────────────────┐
│  ┌──────────────────────────────────┐      │   ← sample_card
│  │  ┌──────┐                        │      │
│  │  │ 로고 │  회사명                 │      │   ← card_logo (이미지)
│  │  └──────┘                        │      │
│  │                                   │      │
│  │  홍길동     대표이사              │      │   ← 이름, 직책
│  │                                   │      │
│  │  📞 010-1234-5678                │      │   ← 연락처
│  │  ✉️  hong@example.com             │      │   ← 이메일
│  │  🏠  서울시 강남구...            │      │   ← 주소
│  │                                   │      │
│  └──────────────────────────────────┘      │
│                                            │
│  [수정] [삭제] [위로] [아래로] [발송]     │   ← 액션 버튼들
└────────────────────────────────────────────┘

비율: 가로:세로 = 약 9:5 (실제 명함 비율: 90mm × 50mm)
배경색: white
그림자: 0 1px 3px rgba(0,0,0,0.12)
둥근 모서리: border-radius 4px

📐 전체 레이아웃 구조도

┌──────────────────────────────────────────────────┐
│  #header (position: fixed, z-index: 100)         │
│  [로고] [언어선택] ... [알림] [메뉴아이콘들]     │
├──────────────────────────────────────────────────┤
│                                                  │
│  #wrap (common-wrap)                             │
│  ┌────────────────────────────────────────┐      │
│  │  .sample_main                           │      │
│  │  ┌──────────────────────────────────┐  │      │
│  │  │ .sample_card (종이명함 리스트)   │  │      │
│  │  │  ├── 명함1                       │  │      │
│  │  │  ├── 명함2                       │  │      │
│  │  │  └── 명함3                       │  │      │
│  │  └──────────────────────────────────┘  │      │
│  │                                         │      │
│  │  .mall-group (IAM 상품 목록)           │      │
│  │  ┌──────────────────────────────────┐  │      │
│  │  │ .mall-img  .mall-content          │  │      │
│  │  │ [상품1] [상품2] [상품3] ...       │  │      │
│  │  └──────────────────────────────────┘  │      │
│  └────────────────────────────────────────┘      │
│                                                  │
├──────────────────────────────────────────────────┤
│  #footer_menu (position: fixed, bottom: 0)       │
│  [앱홈] [내명함] [추천] [명함관리] [소식] ...    │
└──────────────────────────────────────────────────┘

🎓 초등학생도 따라하는 CSS 분석법