CSS 커스터마이징 실전

<?php
// ===== wp_enqueue_style()로 CSS 로드하는 올바른 방법 =====

add_action('wp_enqueue_scripts', 'my_custom_styles');
function my_custom_styles() {
    // 기본 커스텀 CSS
    wp_enqueue_style(
        'custom-main',                                    // 핸들 (고유 이름)
        get_stylesheet_directory_uri() . '/css/main.css', // 파일 경로
        array(),                                          // 의존성 (없으면 빈 배열)
        '1.0.3',                                          // 버전 (캐시 버스팅)
        'all'                                             // 미디어 유형
    );

    // 조건부 로딩: WooCommerce 페이지에서만
    if (class_exists('WooCommerce') && (is_shop() || is_product() || is_cart() || is_checkout())) {
        wp_enqueue_style(
            'custom-woocommerce',
            get_stylesheet_directory_uri() . '/css/woocommerce.css',
            array('custom-main'),  // main.css 이후에 로드
            '1.0.0'
        );
    }

    // 조건부 로딩: 특정 페이지에서만
    if (is_page('contact')) {
        wp_enqueue_style(
            'custom-contact',
            get_stylesheet_directory_uri() . '/css/contact.css',
            array(),
            '1.0.0'
        );
    }

    // Google Fonts 로드
    wp_enqueue_style(
        'google-fonts-pretendard',
        'https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css',
        array(),
        null  // 외부 리소스는 버전 null
    );

    // 인라인 CSS 추가 (동적 스타일에 유용)
    $primary_color = get_theme_mod('primary_color', '#3498db');
    $custom_css = "
        :root {
            --wp-primary: {$primary_color};
        }
        .site-header {
            background-color: {$primary_color};
        }
    ";
    wp_add_inline_style('custom-main', $custom_css);
}

// ===== 불필요한 CSS 제거 (성능 최적화) =====
add_action('wp_enqueue_scripts', 'remove_unnecessary_styles', 20);
function remove_unnecessary_styles() {
    // 블록 라이브러리 CSS 제거 (Gutenberg 안 쓰는 경우)
    // wp_dequeue_style('wp-block-library');

    // 글로벌 스타일 제거
    // wp_dequeue_style('global-styles');

    // 특정 플러그인 CSS 제거 (해당 페이지 외에서)
    if (!is_page('contact')) {
        wp_dequeue_style('contact-form-7');
    }
}
?>
        

/* ===== WordPress가 자동 생성하는 body 클래스 ===== */
/* body_class() 함수가 추가하는 클래스들 */

/* 페이지 유형별 */
body.home { }              /* 홈페이지 (블로그 홈 또는 정적 홈) */
body.blog { }              /* 블로그 글 목록 페이지 */
body.single { }            /* 단일 글 */
body.single-post { }       /* 단일 글 (post 타입) */
body.single-portfolio { }  /* 단일 포트폴리오 (CPT) */
body.page { }              /* 페이지 */
body.archive { }           /* 아카이브 (카테고리, 태그, 날짜) */
body.category { }          /* 카테고리 아카이브 */
body.tag { }               /* 태그 아카이브 */
body.author { }            /* 작성자 아카이브 */
body.search { }            /* 검색 결과 */
body.search-no-results { } /* 검색 결과 없음 */
body.error404 { }          /* 404 에러 */
body.attachment { }        /* 첨부파일 */

/* 특정 페이지/글 타겟 */
body.page-id-42 { }              /* ID 42번 페이지만 */
body.postid-100 { }              /* ID 100번 글만 */
body.page-template-custom { }    /* 커스텀 템플릿 사용 페이지 */
body.page-template-template-fullwidth-php { } /* 특정 템플릿 */
body.category-news { }           /* "news" 카테고리 아카이브 */
body.tag-wordpress { }           /* "wordpress" 태그 아카이브 */
body.page-about { }              /* "about" 슬러그 페이지 */

/* 사용자 상태별 */
body.logged-in { }         /* 로그인한 사용자 */
body.admin-bar { }         /* 관리자 도구바 표시 중 */
body.no-customize-support { } /* 커스터마이저 미지원 */

/* WooCommerce 페이지 */
body.woocommerce { }              /* 모든 WooCommerce 페이지 */
body.woocommerce-page { }         /* WooCommerce 페이지 */
body.woocommerce-cart { }         /* 장바구니 */
body.woocommerce-checkout { }     /* 결제 */
body.woocommerce-account { }      /* 내 계정 */
body.single-product { }           /* 단일 상품 */

/* ===== post_class() 활용 ===== */
article.post { }                   /* 모든 글 */
article.type-post { }              /* post 타입 */
article.type-page { }              /* page 타입 */
article.type-portfolio { }         /* portfolio CPT */
article.status-publish { }         /* 공개된 글 */
article.category-tutorial { }      /* tutorial 카테고리 */
article.tag-wordpress { }          /* wordpress 태그 */
article.has-post-thumbnail { }     /* 대표 이미지 있는 글 */
article.sticky { }                 /* 고정 글 (홈페이지 상단 고정) */
article.format-video { }           /* 비디오 형식 */

/* ===== 고급 CSS 선택자 ===== */

/* 속성 선택자 */
a[href^="https://external.com"] {  /* 특정 외부 링크 */
    color: #e74c3c;
}
a[href^="mailto:"] {               /* 이메일 링크 */
    color: #3498db;
}
a[href^="tel:"] {                  /* 전화번호 링크 */
    color: #27ae60;
}
a[href$=".pdf"]::after {           /* PDF 링크 뒤에 아이콘 */
    content: " [PDF]";
    font-size: 0.8em;
    color: #e74c3c;
}
a[href$=".zip"]::after {           /* ZIP 다운로드 표시 */
    content: " [ZIP]";
}
a[target="_blank"]::after {        /* 외부 링크 표시 */
    content: " ↗";
    font-size: 0.7em;
    vertical-align: super;
}

/* 의사 클래스(Pseudo-classes) */
.post-list article:nth-child(odd) { background: #f8f9fa; }
.post-list article:first-child { border-top: none; }
.post-list article:last-child { border-bottom: none; }
.post-list article:nth-child(3n+1) { } /* 3개마다 첫 번째 */
.menu-item:hover > .sub-menu { display: block; }
input:focus { outline: 2px solid var(--color-primary); }
input:invalid { border-color: #e74c3c; }
input:valid { border-color: #27ae60; }
input::placeholder { color: #adb5bd; }

/* :is() - 선택자 그룹화 (코드 간결화) */
:is(h1, h2, h3, h4, h5, h6) {
    font-family: 'Pretendard', sans-serif;
    line-height: 1.3;
    font-weight: 700;
}

/* :where() - is()와 같지만 특정성(specificity)이 0 */
:where(.widget, .sidebar) a {
    color: inherit;  /* 쉽게 오버라이드 가능 */
}

/* :has() - 부모 선택자 (CSS4, 2023+) */
article:has(.post-thumbnail) {
    display: grid;
    grid-template-columns: 200px 1fr;
}
article:has(.post-thumbnail) .entry-content {
    margin-top: 0;
}
.form-group:has(input:invalid) {
    border-color: #e74c3c;
}
.card:has(img) .card-content {
    padding-top: 0;
}

/* :not() - 제외 선택자 */
.widget:not(:last-child) {
    margin-bottom: 2rem;
}
a:not([href^="#"]):not([href^="javascript"]) {
    /* 진짜 링크만 스타일링 */
}
.nav-menu li:not(.menu-item-has-children) > a {
    /* 서브메뉴 없는 메뉴 항목만 */
}

/* :focus-visible - 키보드 포커스만 (마우스 클릭 제외) */
a:focus-visible,
button:focus-visible {
    outline: 3px solid #3498db;
    outline-offset: 2px;
}

/* ::selection - 텍스트 선택 시 */
::selection {
    background: #3498db;
    color: #ffffff;
}

/* ::marker - 목록 마커 */
ul li::marker {
    color: var(--color-primary);
    font-size: 1.2em;
}

/* ::first-letter - 첫 글자 (드롭캡) */
.entry-content > p:first-of-type::first-letter {
    font-size: 3em;
    font-weight: 700;
    float: left;
    line-height: 1;
    margin-right: 0.1em;
    color: var(--color-primary);
}