워드프레스 특정 페이지에만 CSS와 JavaScript 적용하는 방법

특정 페이지에만 CSS와 JavaScript를 적용하는 이유

페이지마다 필요한 기능과 디자인은 서로 다릅니다.

문의 페이지에는 문의 양식용 스타일이 필요합니다. 서비스 페이지에는 별도의 이미지 슬라이더가 필요할 수 있습니다.

이 파일을 모든 페이지에서 불러오면 필요하지 않은 페이지에서도 요청이 발생합니다.

예를 들어 /contact/에서만 사용하는 파일은 다음 페이지에서는 필요하지 않습니다.

/about/

/services/

/blog/

워드프레스에서는 is_page()로 현재 페이지를 구분합니다. CSS는 wp_enqueue_style(), JavaScript는 wp_enqueue_script()로 등록합니다.

작업 전 준비할 파일

예시는 차일드 테마를 기준으로 작성합니다.

차일드 테마는 부모 테마의 디자인과 기능을 유지하면서 수정 사항을 별도로 관리하는 하위 테마입니다.

먼저 다음 파일을 준비합니다.

/wp-content/themes/mytheme-child/functions.php

/wp-content/themes/mytheme-child/assets/css/contact.css

/wp-content/themes/mytheme-child/assets/js/contact.js

각 파일의 역할은 다음과 같습니다.

부모 테마 파일을 직접 수정하면 업데이트 과정에서 코드가 사라질 수 있습니다. 차일드 테마 설정 방법은 워드프레스 차일드 테마 만들기: 부모 테마 수정 없이 안전하게 개발하는 방법에서 확인할 수 있습니다.

is_page 조건문 사용법

is_page()는 현재 접속한 페이지가 특정 페이지인지 확인하는 워드프레스 함수입니다.

다음 코드는 현재 페이지의 슬러그가 contact인지 확인합니다.

<?php
// 현재 페이지가 contact 페이지인지 확인합니다.
is_page( 'contact' );

슬러그는 페이지 주소에서 도메인 뒤에 붙는 고유 문자열입니다.

예를 들어 다음 페이지의 슬러그는 contact입니다.

https://example.com/contact/

다음 조건문은 문의 페이지가 아닐 때 실행을 중단합니다.

<?php
// 현재 페이지가 contact가 아니라면 실행을 종료합니다.
if ( ! is_page( 'contact' ) ) {
    return;
}

반대로 문의 페이지에서만 실행할 수도 있습니다.

<?php
// 현재 페이지가 contact라면 코드를 실행합니다.
if ( is_page( 'contact' ) ) {
    // 문의 페이지에서만 실행할 코드를 작성합니다.
}

페이지 슬러그, ID와 여러 페이지 조건도 지정할 수 있습니다.

is_page()는 페이지 주소만 확인하는 함수가 아닙니다. 워드프레스가 현재 요청한 페이지 데이터를 기준으로 판단합니다.

특정 페이지에 CSS 적용하기

먼저 문의 페이지에서만 사용할 CSS 파일을 생성합니다.

/wp-content/themes/mytheme-child/assets/css/contact.css

이후 차일드 테마의 functions.php에 다음 코드를 추가합니다.

<?php
/**
 * 문의 페이지에서만 CSS 파일을 불러옵니다.
 */
function ible_enqueue_contact_styles() {
    // 현재 페이지가 contact가 아니면 실행을 중단합니다.
    if ( ! is_page( 'contact' ) ) {
        return;
    }
    // CSS 파일의 실제 서버 경로를 생성합니다.
    $stylesheet_path = get_stylesheet_directory()
        . '/assets/css/contact.css';
    // CSS 파일이 존재하지 않으면 실행을 종료합니다.
    if ( ! file_exists( $stylesheet_path ) ) {
        return;
    }
    // 문의 페이지 전용 CSS 파일을 등록합니다.
    wp_enqueue_style(
        // 스타일 파일을 구분하는 고유 이름입니다.
        'ible-contact-style',
        // 브라우저에서 불러올 CSS 파일 주소입니다.
        get_stylesheet_directory_uri()
            . '/assets/css/contact.css',
        // 별도로 지정한 의존성은 없습니다.
        array(),
        // 파일 수정 시간을 버전으로 사용합니다.
        filemtime( $stylesheet_path )
    );
}
// 워드프레스가 프런트엔드 파일을 등록하는 시점에 실행합니다.
add_action(
    'wp_enqueue_scripts',
    'ible_enqueue_contact_styles'
);

각 함수의 역할은 다음과 같습니다.

contact.css 파일에는 문의 페이지에 필요한 스타일을 작성합니다.

/* 문의 페이지 전체 영역입니다. */
.contact-page {
    padding: 80px 20px;
}

/* 문의 페이지 내부 콘텐츠 너비를 제한합니다. */
.contact-page__container {
    width: min(100%, 1100px);
    margin-inline: auto;
}

/* 문의 페이지 제목 스타일입니다. */
.contact-page__title {
    margin-bottom: 20px;
    color: #173a56;
    font-size: clamp(32px, 5vw, 48px);
}

/* 문의 안내 영역입니다. */
.contact-page__details {
    padding: 24px;
    border-radius: 8px;
    background-color: #f5f7fa;
}

/* 모바일 화면에서는 전체 여백을 줄입니다. */
@media (max-width: 767px) {
    .contact-page {
        padding: 48px 20px;
    }
}

해당 CSS 파일은 /contact/에서만 불러옵니다. 다른 페이지에서는 파일 요청이 발생하지 않습니다.

특정 페이지에 JavaScript 적용하기

JavaScript도 CSS와 같은 방식으로 조건부 적용이 가능합니다.

먼저 다음 파일을 생성합니다.

/wp-content/themes/mytheme-child/assets/js/contact.js

차일드 테마의 functions.php에는 다음 코드를 추가합니다.

<?php
/**
 * 문의 페이지에서만 JavaScript 파일을 불러옵니다.
 */
function ible_enqueue_contact_script() {
    // 현재 페이지가 contact가 아니면 실행을 중단합니다.
    if ( ! is_page( 'contact' ) ) {
        return;
    }
    // JavaScript 파일의 실제 서버 경로를 생성합니다.
    $script_path = get_stylesheet_directory()
        . '/assets/js/contact.js';
    // JavaScript 파일이 없다면 실행을 종료합니다.
    if ( ! file_exists( $script_path ) ) {
        return;
    }
    // 문의 페이지 전용 JavaScript 파일을 등록합니다.
    wp_enqueue_script(
        // JavaScript 파일을 구분하는 고유 이름입니다.
        'ible-contact-script',
        // 브라우저에서 불러올 JavaScript 파일 주소입니다.
        get_stylesheet_directory_uri()
            . '/assets/js/contact.js',
        // 별도로 지정한 의존성은 없습니다.
        array(),
        // 파일 수정 시간을 버전으로 사용합니다.
        filemtime( $script_path ),
        // 페이지 하단에서 JavaScript를 불러옵니다.
        true
    );
}
// 프런트엔드 스크립트 등록 시점에 실행합니다.
add_action(
    'wp_enqueue_scripts',
    'ible_enqueue_contact_script'
);

마지막 인수인 true는 JavaScript 파일을 페이지 하단에 배치하도록 지정합니다.

contact.js에는 다음 코드를 작성할 수 있습니다.

// 페이지의 HTML 구성이 완료된 후 실행합니다.
document.addEventListener('DOMContentLoaded', () => {
    // 문의 안내 버튼을 찾습니다.
    const toggleButton = document.querySelector(
        '[data-contact-toggle]'
    );
    // 문의 안내 내용을 찾습니다.
    const details = document.querySelector(
        '[data-contact-details]'
    );
    // 필요한 요소가 없으면 실행을 종료합니다.
    if (!toggleButton || !details) {
        return;
    }
    // 버튼을 클릭하면 문의 안내 영역을 열거나 닫습니다.
    toggleButton.addEventListener('click', () => {
        // 현재 숨김 상태를 반대로 변경합니다.
        details.hidden = !details.hidden;
        // 화면 보조 기술에 현재 열림 상태를 전달합니다.
        toggleButton.setAttribute(
            'aria-expanded',
            String(!details.hidden)
        );
    });
});

페이지에는 다음 HTML 구조를 사용합니다.

<button
    type="button"
    data-contact-toggle
    aria-expanded="false"
    aria-controls="contact-details"
>
    문의 안내 보기
</button>
<div
    id="contact-details"
    data-contact-details
    hidden
>
    문의 내용을 남겨주시면 확인 후 연락드리겠습니다.
</div>

버튼을 클릭하면 숨겨진 문의 안내 영역이 표시됩니다. 다시 클릭하면 안내 영역이 닫힙니다.

CSS와 JavaScript를 한 번에 등록하기

같은 페이지에 적용할 파일이라면 하나의 함수에서 함께 관리할 수 있습니다.

다음 코드는 /contact/ 페이지에서만 CSS와 JavaScript를 등록합니다.

<?php
/**
 * 문의 페이지에서만 CSS와 JavaScript를 불러옵니다.
 */
function ible_enqueue_contact_assets() {
    // 현재 페이지가 contact가 아니라면 실행을 종료합니다.
    if ( ! is_page( 'contact' ) ) {
        return;
    }
    // 차일드 테마의 실제 서버 경로를 가져옵니다.
    $theme_directory = get_stylesheet_directory();
    // 차일드 테마의 웹사이트 URL을 가져옵니다.
    $theme_directory_uri = get_stylesheet_directory_uri();
    // 문의 페이지 CSS 파일의 실제 경로입니다.
    $stylesheet_path = $theme_directory
        . '/assets/css/contact.css';
    // 문의 페이지 JavaScript 파일의 실제 경로입니다.
    $script_path = $theme_directory
        . '/assets/js/contact.js';
    // CSS 파일이 존재하면 스타일을 등록합니다.
    if ( file_exists( $stylesheet_path ) ) {
        wp_enqueue_style(
            // 문의 페이지 CSS의 고유 이름입니다.
            'ible-contact-style',
            // CSS 파일의 웹사이트 주소입니다.
            $theme_directory_uri
                . '/assets/css/contact.css',
            // 추가 의존성은 없습니다.
            array(),
            // 파일 수정 시간을 버전으로 사용합니다.
            filemtime( $stylesheet_path )
        );
    }
    // JavaScript 파일이 존재하면 스크립트를 등록합니다.
    if ( file_exists( $script_path ) ) {
        wp_enqueue_script(
            // 문의 페이지 JavaScript의 고유 이름입니다.
            'ible-contact-script',
            // JavaScript 파일의 웹사이트 주소입니다.
            $theme_directory_uri
                . '/assets/js/contact.js',
            // 추가 의존성은 없습니다.
            array(),
            // 파일 수정 시간을 버전으로 사용합니다.
            filemtime( $script_path ),
            // 페이지 하단에서 스크립트를 불러옵니다.
            true
        );
    }
}
// 워드프레스 프런트엔드 파일 등록 시점에 실행합니다.
add_action(
    'wp_enqueue_scripts',
    'ible_enqueue_contact_assets'
);

CSS와 JavaScript의 존재 여부를 각각 확인합니다. 따라서 CSS 파일이 없어도 JavaScript 파일은 별도로 등록됩니다.

앞에서 작성한 CSS 전용 함수와 JavaScript 전용 함수를 이미 사용한다면 이 통합 코드를 중복으로 추가하지 않습니다.

functions.php의 기본 구조와 액션 훅 사용법은 워드프레스 functions.php 사용법: 커스텀 함수와 액션 훅 추가하기에서 확인할 수 있습니다.

여러 페이지에 같은 파일 적용하기

여러 페이지에서 동일한 스타일을 사용하는 경우에는 배열로 적용 대상을 지정합니다.

배열은 여러 값을 하나의 목록으로 묶는 데이터 형식입니다.

다음 코드는 contact, about, services 페이지에서 같은 CSS 파일을 불러옵니다.

<?php
/**
 * 지정한 여러 페이지에서 공통 CSS 파일을 불러옵니다.
 */
function ible_enqueue_shared_page_styles() {
    // CSS를 적용할 페이지 슬러그 목록입니다.
    $target_pages = array(
        'contact',
        'about',
        'services',
    );
    // 현재 페이지가 지정한 목록에 없으면 실행을 종료합니다.
    if ( ! is_page( $target_pages ) ) {
        return;
    }
    // 공통 CSS 파일의 실제 서버 경로입니다.
    $stylesheet_path = get_stylesheet_directory()
        . '/assets/css/shared-pages.css';
    // CSS 파일이 없으면 실행을 종료합니다.
    if ( ! file_exists( $stylesheet_path ) ) {
        return;
    }
    // 지정한 페이지에서 사용할 공통 CSS를 등록합니다.
    wp_enqueue_style(
        // 공통 스타일의 고유 이름입니다.
        'ible-shared-page-style',
        // 공통 CSS 파일의 웹사이트 주소입니다.
        get_stylesheet_directory_uri()
            . '/assets/css/shared-pages.css',
        // 추가 의존성은 없습니다.
        array(),
        // 수정 시간을 버전으로 사용합니다.
        filemtime( $stylesheet_path )
    );
}
// 프런트엔드 스타일 등록 시점에 실행합니다.
add_action(
    'wp_enqueue_scripts',
    'ible_enqueue_shared_page_styles'
);

적용 결과는 다음과 같습니다.

페이지마다 파일이 다르다면 조건을 분리해 각각 등록합니다.

<?php
/**
 * 페이지에 따라 서로 다른 CSS 파일을 등록합니다.
 */
function ible_enqueue_page_specific_styles() {
    // 페이지 슬러그와 CSS 파일 이름을 연결합니다.
    $page_styles = array(
        'contact'  => 'contact.css',
        'about'    => 'about.css',
        'services' => 'services.css',
    );
    // 등록한 페이지 목록을 순서대로 확인합니다.
    foreach ( $page_styles as $page_slug => $file_name ) {
        // 현재 페이지와 슬러그가 다르면 다음 항목으로 넘어갑니다.
        if ( ! is_page( $page_slug ) ) {
            continue;
        }
        // 현재 페이지에 사용할 CSS 파일의 서버 경로입니다.
        $stylesheet_path = get_stylesheet_directory()
            . '/assets/css/' . $file_name;
        // CSS 파일이 없으면 현재 항목을 건너뜁니다.
        if ( ! file_exists( $stylesheet_path ) ) {
            continue;
        }
        // 현재 페이지에 맞는 CSS 파일을 등록합니다.
        wp_enqueue_style(
            // 페이지별로 구분되는 고유 이름입니다.
            'ible-page-style-' . $page_slug,
            // 현재 페이지 CSS 파일의 웹사이트 주소입니다.
            get_stylesheet_directory_uri()
                . '/assets/css/' . $file_name,
            // 추가 의존성은 없습니다.
            array(),
            // 파일 수정 시간을 버전으로 사용합니다.
            filemtime( $stylesheet_path )
        );
    }
}
// 프런트엔드 스타일 등록 시점에 실행합니다.
add_action(
    'wp_enqueue_scripts',
    'ible_enqueue_page_specific_styles'
);

파일이 여러 개로 늘어나도 페이지 슬러그와 파일 이름만 추가하면 됩니다.

페이지 ID와 템플릿으로 적용 대상 지정

페이지 주소가 바뀔 수 있다면 슬러그 대신 페이지 ID를 사용할 수 있습니다.

페이지 ID는 워드프레스가 각 페이지에 부여하는 고유 번호입니다.

다음 코드는 ID가 42인 페이지에서만 실행됩니다.

<?php
/**
 * 특정 페이지 ID에만 CSS를 적용합니다.
 */
function ible_enqueue_page_id_styles() {
    // 현재 페이지 ID가 42가 아니라면 실행을 종료합니다.
    if ( ! is_page( 42 ) ) {
        return;
    }
    // 해당 페이지 전용 CSS 파일을 등록합니다.
    wp_enqueue_style(
        // 스타일의 고유 이름입니다.
        'ible-page-42-style',
        // CSS 파일의 웹사이트 주소입니다.
        get_stylesheet_directory_uri()
            . '/assets/css/page-42.css'
    );
}
// 프런트엔드 스타일 등록 시점에 실행합니다.
add_action(
    'wp_enqueue_scripts',
    'ible_enqueue_page_id_styles'
);

선택형 페이지 템플릿을 기준으로 적용할 수도 있습니다.

<?php
/**
 * 특정 커스텀 템플릿에서만 CSS 파일을 등록합니다.
 */
function ible_enqueue_landing_template_styles() {
    // 직접 지정한 랜딩 페이지 템플릿인지 확인합니다.
    if ( ! is_page_template( 'template-landing.php' ) ) {
        return;
    }
    // 랜딩 페이지 전용 CSS 파일을 등록합니다.
    wp_enqueue_style(
        // 랜딩 페이지 스타일의 고유 이름입니다.
        'ible-landing-template-style',
        // 랜딩 페이지 CSS 파일 주소입니다.
        get_stylesheet_directory_uri()
            . '/assets/css/landing.css'
    );
}
// 프런트엔드 스타일 등록 시점에 실행합니다.
add_action(
    'wp_enqueue_scripts',
    'ible_enqueue_landing_template_styles'
);

is_page_template()은 관리자 화면에서 직접 지정한 커스텀 템플릿을 확인합니다.

page-contact.php처럼 슬러그에 따라 자동 적용되는 파일에는 is_page( ‘contact’ )를 사용합니다.

페이지별 템플릿 구조는 워드프레스 특정 페이지에 커스텀 템플릿 적용하는 방법에서 자세히 확인할 수 있습니다.

JavaScript 실행 순서와 의존성 설정

의존성은 현재 파일을 실행하기 전에 먼저 불러와야 하는 다른 파일입니다.

예를 들어 JavaScript 코드가 jQuery를 사용한다면 jQuery가 먼저 로드되어야 합니다.

<?php
/**
 * jQuery가 필요한 문의 페이지 스크립트를 등록합니다.
 */
function ible_enqueue_contact_jquery_script() {
    // 문의 페이지가 아니라면 실행을 종료합니다.
    if ( ! is_page( 'contact' ) ) {
        return;
    }
    // 문의 페이지 JavaScript 파일의 실제 경로입니다.
    $script_path = get_stylesheet_directory()
        . '/assets/js/contact-jquery.js';
    // JavaScript 파일이 없으면 실행을 중단합니다.
    if ( ! file_exists( $script_path ) ) {
        return;
    }
    // jQuery를 먼저 불러온 뒤 문의 페이지 스크립트를 등록합니다.
    wp_enqueue_script(
        // 스크립트의 고유 이름입니다.
        'ible-contact-jquery-script',
        // JavaScript 파일 주소입니다.
        get_stylesheet_directory_uri()
            . '/assets/js/contact-jquery.js',
        // jQuery를 먼저 불러오도록 지정합니다.
        array( 'jquery' ),
        // 파일 수정 시간을 버전으로 사용합니다.
        filemtime( $script_path ),
        // 페이지 하단에서 스크립트를 불러옵니다.
        true
    );
}
// 프런트엔드 스크립트 등록 시점에 실행합니다.
add_action(
    'wp_enqueue_scripts',
    'ible_enqueue_contact_jquery_script'
);

핵심은 다음 부분입니다.

array( 'jquery' )

워드프레스는 jQuery를 먼저 등록한 뒤 현재 JavaScript 파일을 실행합니다.

jQuery를 사용하지 않는다면 빈 배열을 입력합니다.

array()

defer 적용도 가능합니다. defer는 HTML 문서가 준비된 뒤 JavaScript를 실행하도록 지정하는 속성입니다.

워드프레스의 wp_enqueue_script()에서는 다음처럼 설정할 수 있습니다.

<?php
/**
 * 문의 페이지 스크립트를 지연 실행합니다.
 */
function ible_enqueue_deferred_contact_script() {
    // 문의 페이지가 아니라면 실행을 종료합니다.
    if ( ! is_page( 'contact' ) ) {
        return;
    }
    // JavaScript 파일의 실제 서버 경로입니다.
    $script_path = get_stylesheet_directory()
        . '/assets/js/contact.js';
    // 파일이 없으면 실행을 종료합니다.
    if ( ! file_exists( $script_path ) ) {
        return;
    }
    // defer 속성을 포함해 JavaScript를 등록합니다.
    wp_enqueue_script(
        // 스크립트의 고유 이름입니다.
        'ible-contact-deferred-script',
        // JavaScript 파일의 웹사이트 주소입니다.
        get_stylesheet_directory_uri()
            . '/assets/js/contact.js',
        // 추가 의존성은 없습니다.
        array(),
        // 파일 수정 시간을 버전으로 사용합니다.
        filemtime( $script_path ),
        // 페이지 하단 배치와 지연 실행을 설정합니다.
        array(
            'in_footer' => true,
            'strategy'  => 'defer',
        )
    );
}
// 프런트엔드 스크립트 등록 시점에 실행합니다.
add_action(
    'wp_enqueue_scripts',
    'ible_enqueue_deferred_contact_script'
);

defer와 async는 실행 방식이 다릅니다.

문의 버튼, 메뉴와 화면 요소를 다루는 JavaScript는 일반적으로 defer 방식이 적합합니다.

워드프레스 공식 문서에서는 스크립트 의존성과 defer, async 적용 방식을 설명합니다. WordPress 공식 문서: wp_enqueue_script()

CSS와 JavaScript가 적용되지 않을 때

페이지별 파일이 적용되지 않으면 슬러그, 파일 위치와 등록 시점을 확인합니다.

페이지 슬러그가 일치하지 않는 경우도 확인해야 합니다. 실제 페이지 주소가 `https://example.com/contact-us/`라면 슬러그는 `contact-us`이므로 조건문도 동일하게 작성해야 합니다.

<?php
// contact-us 페이지에서만 실행합니다.
if ( ! is_page( 'contact-us' ) ) {
    return;
}

반면 `is_page( ‘contact’ )`처럼 다른 슬러그를 넣으면 적용되지 않습니다. 페이지 제목이 문의하기라도 실제 슬러그가 contact-us라면 contact-us를 사용합니다.

실제 서버 경로와 URL을 혼동하는 경우도 흔합니다. 파일 존재 여부를 확인할 때는 서버 경로를 사용합니다.

<?php
// 서버 내부의 실제 파일 경로를 가져옵니다.
$stylesheet_path = get_stylesheet_directory()
    . '/assets/css/contact.css';
// 서버 파일의 존재 여부를 확인합니다.
file_exists( $stylesheet_path );

CSS나 JavaScript를 브라우저에 등록할 때는 URL을 사용합니다.

<?php
// 브라우저에서 접근할 CSS 파일 주소입니다.
$stylesheet_url = get_stylesheet_directory_uri()
    . '/assets/css/contact.css';

두 함수의 차이도 기억해두면 좋습니다. get_stylesheet_directory()는 서버 파일 경로를 반환하며 file_exists()와 filemtime()에 사용하고, get_stylesheet_directory_uri()는 웹사이트 URL을 반환하며 CSS와 JavaScript 파일을 등록할 때 사용합니다.

캐시 때문에 변경 내용이 반영되지 않는 경우도 있습니다. CSS 또는 JavaScript 파일을 수정했는데 이전 내용이 표시된다면 캐시를 확인합니다. `filemtime( $stylesheet_path )` 값을 버전으로 사용하면 파일 수정 시간에 따라 URL의 버전 값이 달라집니다. 예를 들어 수정 전에는 `contact.css?ver=1700000000`였다가 수정 후에는 `contact.css?ver=1700000500`처럼 다른 버전 값이 적용됩니다. 워드프레스 캐시 플러그인이나 CDN을 사용한다면 해당 캐시도 함께 삭제합니다.

wp_head 또는 wp_footer가 누락된 경우도 확인해야 합니다. 워드프레스는 테마의 wp_head()와 wp_footer()를 통해 등록한 파일을 출력합니다.

헤더 파일에는 다음 코드가 포함됩니다.

<?php
// 워드프레스가 등록한 헤더 영역 파일을 출력합니다.
wp_head();
?>

푸터 파일에는 다음 코드가 포함됩니다.

<?php
// 워드프레스가 등록한 푸터 영역 파일을 출력합니다.
wp_footer();
?>

이 함수가 누락되면 등록한 CSS나 JavaScript가 출력되지 않을 수 있습니다.

get_header()와 get_footer()는 헤더와 푸터 파일을 불러오는 함수입니다. 실제 파일 내부에서 wp_head()와 wp_footer()가 실행되는지도 함께 확인합니다.

같은 파일을 여러 번 등록한 경우도 문제가 됩니다. CSS 파일을 직접 HTML에 넣고 wp_enqueue_style()에서도 등록하면 중복 로드가 발생합니다.

<link rel="stylesheet" href="/assets/css/contact.css">

wp_enqueue_style(
    'ible-contact-style',
    get_stylesheet_directory_uri()
        . '/assets/css/contact.css'
);

같은 파일은 워드프레스 등록 함수로 한 번만 불러옵니다. 동일한 고유 이름(예: `ible-contact-style`)으로 다른 파일을 등록해도 예상대로 변경되지 않을 수 있으므로, 스타일과 스크립트의 고유 이름은 파일별로 구분합니다.