인터넷 익스플로러(IE)는 6월 15일 지원이 종료되어 LGE.COM 홈페이지는 엣지(Edge)와 크롬(Chrome) 브라우저에 최적화되어 있습니다.
원활한 사용을 위해 최적화된 브라우저를 설치하시면 홈페이지를 정상적으로 이용하실 수 있습니다.

엣지(Edge) 다운로드 크롬(Chrome) 다운로드
본문 바로가기

LG전자 기본

회사소개
사업자몰
혜택/이벤트 상세

영상에 대한 묘사 내용

모바일 일원화 신규 템플릿/컴포넌트 활용 안내

  1. common-v2.css -> common-v2--centered-mobile-view.css 변경한 것 제외하고는 기존 디자인 3.0 공통 소스는 동일함.
  2. html : PE00880001-template-v2--centered-mobile-view.html 원본 코드를 활용해야 오류를 방지할 수 있음. 브라우저 > 개발자 화면으로 소스 복사시 js에서 DOM에 추가한 소스로 인해 오류 발생 확률 높음.
    CSS : BEM 방식 철학을 기본으로 Atomic 방식을 혼합한 Hybrid 방식. 들여쓰기 작업시 BEM 기준에 따라 가능한 depth를 깊게 처리하지 않아야 수정시 업무 효율이 높으며, 상쇄할 때 번거롭지 않음.
    JS : jquery를 사용하지 않으며, 객체/클래스/임포트 방식을 혼용하고 있음. 스크립트 순서는 반드시 지켜야 오류가 나지 않음.
  3. html에 'test--'로 시작하는 문자열은 이곳 템플릿 페이지에서만 임시로 사용하는 것으로 실제 개별 페이지에서는 다르게 설정해야함.
  4. 아래 녹색으로 표시한 신규 템플릿을 기준으로 반영함. 템플릿이 계속 수정되고 있어 러프하게 템플릿 코드를 작성할 수 밖에 없는 상황임(2026.03.25 기준).
    개별 페이지 작업시 폰트/간격 등 이상한 부분이 있으면 개별적으로 CSS 예외처리하지 말고 관련 수정 요청이 오면 템플릿 기준으로 작업 했다고 전달하면 됨.
  5. content-v2--centered-mobile-view.css, content-v2--centered-mobile-view.js 파일은 여기서만 사용되는 소스 이므로 개별 페이지에서 해당 경로 제거해야함.
  6. api 스크립트 파일들 중 사용하지 않는 것은 제거해야함.
  7. 작업시 가능한 공통 영역에 있는 소스 넣어야 중앙에서 컨트롤 가능함.
  8. 가능한 여기서 제공하는 코드를 활용하여 작업해야 전체 공통 소스(common.js, common-v2--centered-mobile-view.css, -api.js 등)에서 컨트롤(접근성 등) 가능하며,
    보완할 부분은 요청 주시거나 아래 ace-common-work 브랜치에서 수정 후 커밋 내용에 상세히 기재 하면됨. 단, 우리가 담당하는 모든 페이지 공통 소스이므로 수정시 주의 필요함.
    commit 히스토리에서 템플릿 수정되고 있는 상황 확인 가능함.
  9. 피벗 LGE.COM git > ace-common-work에서 템플릿 소스 관리하고 있으며 상세 내용은 README.md 내용 참고.
  10. 템플릿 소스를 계속 보완하고 있어서 최신 템플릿을 적용할 수 있도록, 자주 Pull 하여 소스를 최신화 해야함.

단독 구매 혜택

  1. 임직원/계열사 페이지는 payment-benefits 요소에 data-group-members 속성 추가

카카오톡 친구 전용 특별 할인 쿠폰 혜택

  1. kakao-friend-coupon 요소에 data-black-theme 속성 있으면 검은 테마 반영

구독 기본 혜택

가전 구독이 좋은 이유

가전 구독이 좋은 이유 2번 타입

멤버십 포인트로 월 요금 납부하기 방법

레이아웃 - 전체 틀

  1. 기본적인 마크업 구조 (shift + 마우스휠로 가로 스크롤 가능)
  2. 구독 기획전의 경우 .event-benefit-template 요소에 event-benefit-template--subscribe 클래스 추가 필요.
    .l-article__inner 요소의 상하 여백이 다른 페이지와 차별화 됨(2026. 04. 02 디자인팀에서 확인).
    같은 아티클 영역이 서로 붙어 있으면, 둘 중 하나의 여백은 제거 해야됨(서로 간의 상하 여백 합은 40px).
  3. 앵커 탭만 있는 있는 경우 : '앵커 탭만 있는 있는 경우' 주석 부분만 떼어내서 .main-kv 바로 아래에 붙여 사용.
  4. 탭 자체가 없는경우 : '탭 없는 경우' 주석 부분만 떼어내서 .main-kv 바로 아래에 붙여 사용.
  5. .l-article__inner 요소에 l-article__inner--mo-gutter 클래스 추가 : 양쪽 기본 여백이 생김.
  6. .l-article__content 요소에 l-article__content-wrap 추가하여 article 내 content들 간의 여백 설정 하기.
  7. 'test--' 로 시작하는 문자열은 의미 있는 것으로 변경 필요. 템플릿 페이지에서만 사용되는 문자열이라 개별 페이지 작업시 변경 필요.
  8. 상하 여백 규칙 - 추후에 변경될 가능성 있음. (26.03.26 템플릿 기준)

    Space Pattern

    부피감에 따른 계층적 간격 정의 가이드

    Scale
    Size
    Visual Preview
    Usage & Target Class
    XL (Extra Large)
    32px
    Article 상하 여백 .l-article__inner
    L (Large)
    28px
    탭 버튼(.c-button--box)과 콘텐츠 사이 내부적으로 자동 처리
    M (Medium)
    20px
    일반 콘텐츠(카드-카드) 사이 .l-article__content-wrap
    S (Small)
    12px
    타이틀과 콘텐츠 사이 .l-article__inner
    XS (Extra Small)
    12px
    부피감 있는 레이블과 컴포넌트 사이 .l-article__content
    Tiny
    8px
    작은 레이블과 리스트 시작점 사이 .l-article__box
    Micro
    2px
    타이틀과 아이브로우 사이 .c-title--normal 
<div class="event-benefit-template"> <!-- 구독 기획전의 경우 event-benefit-template--subscribe 클래스 추가 필요 -->
<link rel="stylesheet" href="/kr/event/promotions/css/common-v2--centered-mobile-view.css"> <!-- [전체 공통] 필수 -->
<link rel="stylesheet" href="/kr/event/2026/03/test--pages/css/content.css"> <!-- 개별 페이지에 필요할 경우 추가 -->
<div class="main-kv">
    <!-- KV가 영상인 경우 -->                        
    <!-- <div class="c-responsive-video j-responsive-video main-kv__video"
        style="--img-ratio-mo: 360 / 640;
                --poster-mo: url('https://images.unsplash.com/photo-1699277203232-6e6a243bee01?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
        <video class="c-responsive-video__element" autoplay muted loop playsinline preload title="영상 제목" src="https://videos.pexels.com/video-files/10171433/10171433-uhd_2560_1440_25fps.mp4" aria-describedby="kv-video-description">
        </video>
        <div class="blind" id="kv-video-description">
            <p>영상에 대한 묘사 내용</p>
        </div>
    </div> -->
    <!-- // KV가 영상인 경우 -->   

    <!-- KV가 이미지인 경우 --> 
    <!-- <img class="main-kv__img" src="/kr/event/2026/03/test--pages/resources/img_kv_mo.png" alt="">
    <div class="blind">
        <h1>이벤트 제목</h1>
        <p>이벤트 내용</p>
    </div> -->
    <!-- // KV가 이미지인 경우 --> 
</div>

<div class="c-tab c-tab--main-switch c-tab--1depth c-tab--1depth-type01" data-tab-type="switch" data-tab-content="main-switch-content">
    <div class="c-tab__inner">
        <ul role="tablist" class="c-tab__list">
            <li class="c-tab__item active"><button type="button" role="tab" class="c-tab__button" data-target="main-switch-tab-01">버튼명01</button></li>
            <li class="c-tab__item"><button type="button" role="tab" class="c-tab__button" data-target="main-switch-tab-02">버튼명02</button></li>
        </ul>
    </div>
</div>
<div id="main-switch-content" class="c-tab__content">
    <div role="tabpanel" class="c-tab__panel" tabindex="0">
        <!-- 앵커 탭만 있는 있는 경우 -->
        <div class="c-tab c-tab--main-sticky c-tab--1depth c-tab--1depth-type01" data-tab-type="scroll" data-tab-content="main-sticky-content-01">
            <div class="c-tab__inner">
                <ul role="tablist" class="c-tab__list">
                    <li role="presentation" class="c-tab__item active">
                        <a href="#" role="tab" class="c-tab__button" data-target="test--01" data-contents="test--01 상단탭">
                            <span class="c-tab__button-text">test--01</span>
                        </a>
                    </li>
                    <li role="presentation" class="c-tab__item">
                        <a href="#" role="tab" class="c-tab__button" data-target="test--02" data-contents="test--02 상단탭">
                            <span class="c-tab__button-text">test--02</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="main-sticky-content-01" class="c-tab__content">
            <div role="tabpanel" class="c-tab__panel" tabindex="0">
                <!-- 탭 없는 경우 -->
                <section>
                    <article class="l-article 필요한 경우 유니크 한 클래스 추가">
                        <div class="l-article__inner">
                            <div class="c-title c-title--normal">
                                <div class="c-title__eyebrow">아이브로우</div>
                                <h2 class="c-title__main">영역 제목</h2>
                            </div>
                            <div class="l-article__content-wrap">
                                <div class="l-article__content">
                                    <div class="l-article__box"></div>
                                    <div class="l-article__box"></div>
                                </div>
                                <div class="l-article__content"></div>
                                <div class="l-article__content"></div>
                            </div>
                        </div>
                    </article>
                    <article class="l-article 필요한 경우 유니크 한 클래스 추가">
                        <div class="l-article__inner">
                            <div class="c-title c-title--normal">
                                <div class="c-title__eyebrow">아이브로우</div>
                                <h2 class="c-title__main">영역 제목</h2>
                            </div>
                            <div class="l-article__content-wrap">
                                <div class="l-article__content">
                                    <div class="l-article__box"></div>
                                    <div class="l-article__box"></div>
                                </div>
                                <div class="l-article__content"></div>
                                <div class="l-article__content"></div>
                            </div>
                        </div>
                    </article>
                </section>
                <!-- // 탭 없는 경우 -->
            </div>
            <div role="tabpanel" class="c-tab__panel" tabindex="0">
                <section>
                    <article class="l-article 필요한 경우 유니크 한 클래스 추가">
                        <div class="l-article__inner">
                            <div class="c-title c-title--normal">
                                <div class="c-title__eyebrow">아이브로우</div>
                                <h2 class="c-title__main">영역 제목</h2>
                            </div>
                            <div class="l-article__content-wrap">
                                <div class="l-article__content">
                                    <div class="l-article__box"></div>
                                    <div class="l-article__box"></div>
                                </div>
                                <div class="l-article__content"></div>
                                <div class="l-article__content"></div>
                            </div>
                        </div>
                    </article>
                </section>
            </div>
        </div>
        <!-- // 앵커 탭만 있는 있는 경우 -->
    </div>
    <div role="tabpanel" class="c-tab__panel" tabindex="0">
        <div class="c-tab c-tab--main-sticky c-tab--1depth c-tab--1depth-type01" data-tab-type="scroll" data-tab-content="main-sticky-content-02">
            <div class="c-tab__inner">
                <ul role="tablist" class="c-tab__list">
                    <li role="presentation" class="c-tab__item active">
                        <a href="#" role="tab" class="c-tab__button" data-target="test--03" data-contents="test--03 상단탭">
                            <span class="c-tab__button-text">test--03</span>
                        </a>
                    </li>
                    <li role="presentation" class="c-tab__item">
                        <a href="#" role="tab" class="c-tab__button" data-target="test--04" data-contents="test--04 상단탭">
                            <span class="c-tab__button-text">test--04</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="main-sticky-content-02" class="c-tab__content">
            <div role="tabpanel" class="c-tab__panel" tabindex="0">
                <section>
                    <article class="l-article 필요한 경우 유니크 한 클래스 추가">
                        <div class="l-article__inner">
                            <div class="c-title c-title--normal">
                                <div class="c-title__eyebrow">아이브로우</div>
                                <h2 class="c-title__main">영역 제목</h2>
                            </div>
                            <div class="l-article__content-wrap">
                                <div class="l-article__content">
                                    <div class="l-article__box"></div>
                                    <div class="l-article__box"></div>
                                </div>
                                <div class="l-article__content"></div>
                                <div class="l-article__content"></div>
                            </div>
                        </div>
                    </article>
                </section>
            </div>
            <div role="tabpanel" class="c-tab__panel" tabindex="0">
                <section>
                    <article class="l-article 필요한 경우 유니크 한 클래스 추가">
                        <div class="l-article__inner">
                            <div class="c-title c-title--normal">
                                <div class="c-title__eyebrow">아이브로우</div>
                                <h2 class="c-title__main">영역 제목</h2>
                            </div>
                            <div class="l-article__content-wrap">
                                <div class="l-article__content">
                                    <div class="l-article__box"></div>
                                    <div class="l-article__box"></div>
                                </div>
                                <div class="l-article__content"></div>
                                <div class="l-article__content"></div>
                            </div>
                        </div>
                    </article>
                </section>
            </div>
        </div>
    </div>
</div>

<script src="/kr/event/promotions/js/common.js"></script> <!-- [전체 공통] 필수 -->
<script src="/kr/event/2026/03/test--pages/js/content.js"></script> <!-- 개별 페이지에 필요할 경우 추가 -->
<script src="/kr/event/promotions/js/product-api-v2.js"></script> <!-- [전체 공통] 가전 API 기능 있는 경우 만 넣기 -->
<script src="/kr/event/promotions/js/ranking-api.js"></script> <!-- [전체 공통] 가전 베스트 랭킹 API 기능 있는 경우 만 넣기 -->
<script src="/kr/event/promotions/js/home-style-api.js"></script> <!-- [전체 공통] 홈스타일 제품 API 기능 있는 경우 만 넣기 -->
<script src="/kr/event/promotions/js/home-style-ranking-api.js"></script> <!-- [전체 공통] 홈스타일 베스트 랭킹 API 기능 있는 경우 만 넣기 -->
<script src="/kr/event/promotions/js/home-style-time-deal-api.js"></script> <!-- [전체 공통] 홈스타일 타임딜 API 기능 있는 경우 만 넣기 -->
<script src="/kr/event/promotions/js/tab.js"></script> <!-- [전체 공통] 탭 기능 있는 경우 만 넣기 -->
</div>

레이아웃 - 콘텐츠 구조적 위계에 따른 마크업 예시

  1. 디자인 가이드(2026. 03. 27 기준) : 아이브로우 글씨 색(기본 : #777, 다크 모드 : #a7a7a7)

메인 타이틀01

아이브로우

서브 타이틀01

5% 쿠폰 다운로드 가전 5% + 소모품 10%

[제목]

  • aaaaaa
  • aaaaaa

[제목]

  • aaa
  • aaa

레이아웃 - 일반 탭 안에 제품 API

  1. 많이 사용하는 레이아웃 형태
<div class="l-tab">
    <div class="c-tab c-tab--3depth c-tab--3depth-type01" data-tab-type="switch" data-tab-content="test--gasdf4312123sdg">
        <div class="c-tab__inner">
            <ul role="tablist" class="c-tab__list" data-active-scroll-center>
                <li class="c-tab__item active"><button type="button" role="tab" class="c-tab__button">버튼01</button></li>
                <li class="c-tab__item"><button type="button" role="tab" class="c-tab__button">버튼02</button></li>
            </ul>
        </div>
    </div>
    <div id="test--gasdf4312123sdg" class="c-tab__content">
        <div role="tabpanel" class="c-tab__panel active" tabindex="0">
            <div class="c-product">
                <ul class="c-product__list c-product__list--one-time-purchase">
                    <li class="c-product__item">
                        <!-- 태깅 넣을 곳 -->
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <div role="tabpanel" class="c-tab__panel" tabindex="0">
            <ul class="c-product__list c-product__list--one-time-purchase">
                <li class="c-product__item">
                    <!-- 태깅 넣을 곳 -->
                    </span>
                </li>
            </ul>
        </div>
    </div>
</div>

Tab

  1. .c-tab 요소에 있는 클래스(c-tab--1depth, c-tab--1depth-type01 ...)를 추가하여 탭 스타일을 설정할 수 있음.
  2. 총 4가지 타입이 있음.









Title

  1. 디자인 가이드(2026. 03. 31 기준) :
    타이틀 정렬 : 기본 중앙 / USP 좌측
  2. c-title--left 클래스 추가 : 왼쪽 정렬
아이브로우

메인 타이틀

서브 타이틀

아이브로우

메인 타이틀

서브 타이틀

Coupon, Button

  1. 디자인 가이드(2026. 03. 31 기준) : .c-button--box는 무조건 너비 350px, 상단 여백 32px
5% 쿠폰 다운로드 가전 5% + 소모품 10%
10 %
5% 쿠폰 다운로드 10일 10시간 10분 10초 남음

보러가기
50만원 쿠폰팩 다운로드 LGE.COM 앱 전용
10 %
5% 쿠폰 다운로드 가전 5% + 소모품 10%
50만원 쿠폰팩 다운로드 LGE.COM 앱 전용
10 만원
닷컴 가전 10만원 쿠폰 받기 웰컴 쿠폰 혜택을 받아가세요

보러가기

리스트 - 기본

  • 로그인 후 마이페이지 > 보유 관리에서 제품 등록 필수 관리에서 제품 등록 필수 제품 관리에서 제품 등록 필수
  • 포토리뷰 작성 시 100자 이상, 제품 사진(동영상) 1장 이상 업로드 필수
  • 사진 도용 및 부적절한 사진 업로드 시 경품 지급 대상 제외
  • 리뷰 이벤트 모델별 1인 1회 한정 지급
  • 기타 리뷰 이벤트 중복 적용 불가
  • 구매하신 LGE.COM 회원 계정으로 적립

유의사항

  1. 기본 펼침 상태 : .c-toggle에 on 클래스 추가

[첫 구독 최대 10만P 유의사항]

  • 이미 구독을 하고 있더라도 LGE.COM 첫 구독 고객이라면
  • 멤버십 포인트 지급 (1개 제품 구독 시)

[가전 연계 할인 유의사항]

  • 멤버십 포인트를 제외한 실 결제금액이 100만원 이상인 주문을 보유한 경우 대상 (기간 합산이 아닌 단일 주문 내 실 결제 금액 대상, 소모품 제외)
  • 정수기 청약 시 최근 1년 이내, 그 외 제품 청약 시 전월 1월부터 현재까지 배송 완료된 주문만을 대상으로 함

[첫 구독 최대 10만P 유의사항]

  • 이미 구독을 하고 있더라도 LGE.COM 첫 구독 고객이라면
  • 멤버십 포인트 지급 (1개 제품 구독 시)

[가전 연계 할인 유의사항]

  • 멤버십 포인트를 제외한 실 결제금액이 100만원 이상인 주문을 보유한 경우 대상 (기간 합산이 아닌 단일 주문 내 실 결제 금액 대상, 소모품 제외)
  • 정수기 청약 시 최근 1년 이내, 그 외 제품 청약 시 전월 1월부터 현재까지 배송 완료된 주문만을 대상으로 함

혜택 영역

  1. 일반적으로 아래 마크업 그대로 활용하면 되고
    .c-custom-accordion__area--fade 높이값, .c-custom-accordion__area--fade::after에 linear-gradient 설정 개별 처리 필요함.
    content.css의 .test--rgsdfgwer413 참고
  2. .c-custom-accordion 요소에 data-accordion-toggle="true" 속성 있어야함.
  3. 접근성 고려하여 버튼 열 때 .c-custom-accordion__area--fade 요소의 상단에 초점 이동 되도록 처리함.
  4. [data-expand-scroll-dest], [data-expand-scroll-target] 요소에 scroll-margin-top 값 넣어서 스크롤 이동 위치 잡음.
  5. 더 많은 옵션에 대한 설명은 기능 탭 > '특정 영역들을 펼치는 기능 - 공통' 확인 필요.

서브 타이틀01

서브 타이틀02

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum odit voluptatem earum error obcaecati excepturi voluptatibus enim quod voluptas repudiandae nesciunt, modi, suscipit tempora
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum odit voluptatem earum error obcaecati excepturi voluptatibus enim quod voluptas repudiandae nesciunt, modi, suscipit tempora

영상 처리 방법

  1. 페이지 로드 시 썸네일이 먼저 노출되어 빈화면이 보이지 않도록 처리 함. 인 앱 브라우저에서도 기본 video UI 노출되지 않는 방법임.
  2. 작업 편의상 직접 --img-ratio-mo, --poster-mo 변수를 사용하여 크기와 썸네일 이미지를 지정할 수 있음.
  3. 다음 비디오 속성은 필수 : playsinline, preload, title, aria-describedby
  4. 필수 클래스 : c-responsive-video j-responsive-video
영상 설명

유틸리티

여백

Class Syntax Description Property Target
margin-{dir}--{dev}{val} Margin 규칙
  • {dir} : 방향 (t, b, l, r)
  • {dev} : 디바이스 (p, m)
  • {val} : 크기 (00 ~ 80)
m (Mo) 뷰포트 너비 390px 기준 vw 연산.
margin-top margin-right margin-bottom margin-left
padding-{dir}--{dev}{val} Padding 규칙

Margin과 동일한 규칙(방향, 디바이스, 값)을 따릅니다.

padding-top padding-right padding-bottom padding-left
1. Direction {dir}
t (top) r (right) b (bottom) l (left)
2. Device {dev}
m (Mobile)
3. Values {val} (Unit: px)
00 04 05 ... 80

표시 / 숨김

Class Name Description CSS Rule
hidden-all ALL 모든 디바이스에서 숨김 display: none !important

레이아웃 헬퍼 등

유틸 클래스로, 클래스 이름, 설명을 포함.
Class Name Description
relative-area position: relative; 적용.
자식 요소를 absolute로 배치할 때 기준점이 되는 부모 컨테이너로 사용합니다.
c-font--primary-active-red ● 강조 텍스트 색상 적용
dark-mode .article, .tooltip-box 요소에 dark-mode 클래스 추가시 어두운 테마로 변경. 적용 대상은 아래와 같음.
  • article, 튤팁 배경
  • 텍스트 형태 탭 버튼
  • 유의사항
  • 타이틀
  • swiper 컨트롤러
  • 튤팁
  • 토글 버튼
  • 리스트
  • 버튼(텍스트 형태, 텍스트 언더라인 형태)
c-custom-scrollbar PC에서 가로 스크롤 있는 경우 (예 : 탭 버튼) 추가하여 가로 스크롤바 스타일 적용 및 드래그 기능(PV.pcMouseDrag) 자동 적용.

탭 - 전체 공통

  1. data-target 속성값은 반드시 고유해야 하며, URL의 tab 파라미터에 사용됨.

앵커 탭 - 공통

  1. [필수] .c-tab 요소에 data-tab-type="scroll" 존재
  2. [필수] data-tab-content 속성값은 반드시 고유해야 하며, 연결될 .c-tab__content 요소의 id와 일치

앵커 탭 - .c-tab--main-sticky

  1. 페이지 최상위에 존재 (.c-tab--main-switch가 있으면 바로 하위에 존재)

앵커 탭 - article 내에 추가로 존재

  1. 특정 영역 예를들면, l-article 요소 안에 앵커탭이 존재해야 될 경우 아래 예시와 같이 사용.
  2. 해당 탭에 대한 URL 생성해야 되다면, '특정 영역으로 스크롤 이동하는 URL 생성' 문서 참고

일반 탭(switching, 탭 인 탭) - 공통

  1. [필수] .c-tab 요소에 data-tab-type="switch" 존재
  2. [필수] data-tab-content 속성값은 반드시 고유해야 하며, 연결될 .c-tab__content 요소의 id와 일치해야 합니다.
  3. [선택] .c-tab__item 클릭 시 해당 요소의 data-custom-anchor 값과 일치하는 ID를 가진 영역으로 스크롤 이동하는 기능 추가
    예시 : 현재 페이지에 있는 API 탭 버튼에 적용됨.(data-custom-anchor="#test--api-switching-position")

일반 탭(switching, 탭 인 탭) - .c-tab--main-switch

  1. 페이지 최상위에 존재하는 일반 탭

일반 탭(switching, 탭 인 탭) - 라운드 형태

  1. 가로 스크롤 필요한 경우 .l-article__inner 요소에 l-article__inner--mo-gutter 클래스는 없어야함.
  2. 스크롤이 있는 .tab__list 요소에 data-active-scroll-center 속성을 추가하면 탭이 활성화될 때 해당 탭이 가운데로 이동함.
  3. 정렬 기준은 아래와 같음.
    기본 중앙 정렬 영역 초과 시 좌정렬 (탭 스와이프), 단 USP에서는 좌정렬
  4. 탭 버튼 왼쪽 정렬 : .c-tab__list에 c-tab__list--left 클래스 추가

일반 탭(switching, 탭 인 탭) - 중첩

  1. 아래와 같이 기존 탭 마크업을 중첩되게 처리하면 됨.
  2. (2026. 03. 27 기준) 아래 닷 형태 탭 버튼은 디자인 템플릿에 없어 임시로 추가.
2depth 탭 본문 01...
3depth 탭 본문 01...
3depth 탭 본문 02...
3depth 탭 본문 03...
3depth 탭 본문 04...
2depth 탭 본문 02...

스와이퍼 슬라이드 - 공통 사항

  1. 개별 js에서 호출 필요.(예시 : content-v2.js > PV.SwiperManager 참고)
  2. 디자인 가이드(2026. 03. 31 기준) : 디자인에 pagenation 사용되면 양 옆 navigation 사용 금지
  3. 접근성 고려하여 가능한 무한 슬라이드는 지양하는 것이 좋음.
    즉, 일시정지/재생 버튼(.c-swiper__play-and-stop-button-wrap 요소)은 가급적 사용하지 않아야함.
  4. 활성화된 슬라이드의 비디오 리셋 후 자동 재생 필요한 경우 .swiper-container-wrap 요소에 data-video-auto-reset="true" 추가
  5. 전체 공통소스(lg.common.js 5095번째 줄)에서 개입하는 웹 접근성 처리 로직 모두 제거(swiper-ally-custom 클래스 추가하여 상쇄함.) 후 커스텀 처리 함.
    이유 : 신규 템플릿 UI가 닷컴 슬라이드 형태와 달라서 PC/MO에서 초점 이동에 문제가 있었음.
  6. 주요 접근성 커스텀 처리 내용
    1. 화면에 완전히 보이는 슬라이드에만 초점 이동이 되도록 처리(화면에 걸쳐 있는 슬라이드는 초점 이동 제외)
    2. 자동 재생의 포함된 경우 접근성 문제로 컨트롤이 가장 먼저 초점 잡히도록 처리 함.

스와이퍼 슬라이드 - 탭 버튼과 슬라이드 연동 형태

  1. width, aspect-ratio 값을 추가해야 모바일에서 레이아웃이 깨지는 현상이 발생하지 않음.
  2. 자동 재생/일시 정지 버튼 구현 안되어 있음.
  3. 기본적으로 화면에서 사라진 영상은 초기화 처리 됨(영상 URL 끝에 #t=1.5 와 같은 값이 있는 경우 해당 값 기준으로 초기화 됨).
  4. 활성화된 슬라이드의 비디오 리셋 후 자동 재생 필요한 경우 .synced-tab-slider 요소에 data-video-auto-reset="true" 추가
  5. 슬라이드 안에 비디오가 꽉 찰 경우 --full-video-height-pc, --full-video-height-mo 값 추가 필요하며,
    .c-responsive-video를 absolute로 띄울 경우 해당 속성 지우고 높이 값 따로 설정하기
  6. data-slides-loop : 슬라이드 무한 반복 여부
  7. data-slides-per-view : PC에서 한 화면에 보이는 슬라이드 개수
  8. data-slides-per-view-mo : 모바일에서 한 화면에 보이는 슬라이드 개수
  9. data-column-gap : PC에서 슬라이드 간 간격
  10. data-column-gap-mo : 모바일에서 슬라이드 간 간격 (vw 단위 사용 가능)
블라인드 테스트
블라인드 테스트

영상에 대한 묘사 내용

영상에 대한 묘사 내용

블라인드 테스트
블라인드 테스트
블라인드 테스트
블라인드 테스트
블라인드 테스트
블라인드 테스트
블라인드 테스트
블라인드 테스트

특정 버튼 클릭시 원하는 영역으로 스크롤 이동 및 특정 행위 추가

  1. 버튼에 있는 data-scroll-trigger와 이동할 영역에 있는 data-scroll-destination를 연결하면 버튼 클릭시 해당 영역으로 이동.
  2. PV.initScrollTriggers는 개별 페이지에서 호출.
  3. 구체적인 사용법은 common.js > initScrollTriggers 함수 작동 원리 이해 필요함.
기본 이동 버튼 도착 지점

토글 - 통 이미지 형태

  1. 기본 펼침 상태 : .c-img-accordion 요소에 c-img-accordion--open 클래스 추가
닫힌 이미지에 대한 내용 설명1
열린 이미지에 대한 내용 설명1
닫힌 이미지에 대한 내용 설명2
열린 이미지에 대한 내용 설명2
닫힌 이미지에 대한 내용 설명2
열린 이미지에 대한 내용 설명2

토글 - 트리거 버튼 유지되는 이미지 형태

  1. c-toggle--img-only 클래스 추가
  2. --close-height에 각각 설정하여 높이 조절 필요
제품을 분해해 꼼꼼하게 세척해요

특정 영역들을 펼치는 기능 - 공통

  1. .c-custom-accordion__area 요소에 data-use-a11y="false"가 있으면 해당 요소는 마우스/키보드 등으로 접근할 수 있음.
  2. 펼쳤을 때 원하는 위치로 스크롤 이동하는 방법 :
    .c-custom-accordion__btn : data-expand-scroll-target 속성값 지정.
    스크롤 이동하려는 요소 : data-expand-scroll-dest 속성값 지정하고 해당 요소에 아래와 같이 CSS 스크롤 위치 값 개별 조정 필요.
    scroll-margin-top: calc(var(--header-height) + var(--sticky-main-switch-height) + var(--sticky-main-sticky-height));

Q&A

  • 답변 고객님의 가전 구독 계약 기간 중 아래와 같은 상황에서 요금 외 추가 비용이 발생할 수 있습니다.

    1. 설치 시: 기본 설치비는 면제이나, 특수 타공이 필요한 제품의 경우에는 추가 설치비가 발생할 수 있습니다.(제품군: 정수기, 식기세척기, 전기레인지, 에어컨)

    2. 이전 설치 시: 이전 설치 필요 시 철거비, 운송비, 재설치비가 발생할 수 있습니다.(제품마다 이전 설치 가능 여부 및 비용이 상이하므로 이전 설치 접수 시 콜센터로 문의 부탁드립니다)

  • 답변 고객님의 가전 구독 계약 기간 중 아래와 같은 상황에서 요금 외 추가 비용이 발생할 수 있습니다.

  • 답변 2. 이전 설치 시: 이전 설치 필요 시 철거비, 운송비, 재설치비가 발생할 수 있습니다.(제품마다 이전 설치 가능 여부 및 비용이 상이하므로 이전 설치 접수 시 콜센터로 문의 부탁드립니다)

모달 및 튤팁 (26.03.26 디자인 템플릿에 없어 임시 반영)

  1. LG 닷컴 사이트 전체 공통 소스(lg.common.js) 활용하고 있음.

멤버십 포인트 활용 방법​

  • 멤버십 포인트는 LG전자 홈페이인트는 LG전자 홈페이지 인트는 LG전자 홈페이지 인트는 LG전자 홈페이지지에서
  • 멤버십 포인트는 LG전자 홈페이인트는 LG전자 홈페이지 인트는 LG전자 홈페이지 인트는 LG전자 홈페이지지에서

특정 영역으로 스크롤 이동하는 URL 생성 방법

  1. 사용 방법은 scrollToElementFromUrl 함수 jsDOC 참고 바라며, 아래 사용 예시 참고.
  2. 일반적인 형태 예시
    1. 기본 형태 : 요소에 data-scroll-target="test--reqw123" 추가 후 URL 끝에 ?scroll-target=test--reqw123 추가
    2. 탭 활성화 : .c-tab__button에 data-scroll-target="switch-tab-2depth-content-02" 추가 후 URL 끝에 ?scroll-target=switch-tab-2depth-content-02 추가
  3. 2depth sticky 영역 URL 생성 : URL에 ?scroll-target-custom=test--2depth-area-01 추가시 해당 영역으로 스크롤 이동. content.js > PV.scrollToElementFromUrl 참고.
  4. 스크롤하기 전에 특정 행위 추가 : URL에 ?scroll-normal-product=MD09951827 추가시 해당 제품으로 스크롤 이동. content.js > PV.scrollToElementFromUrl 참고.

타이머

  1. 타이머는 디자인 컴포넌트가 없어서 개별적으로 스타일 구현 필요
  • 특가 종료까지

플로팅 버튼

  1. 우측 하단 플로팅 버튼 스타일 참고. js로 처리한 것은 없음.
  2. 우측 하단에 있는 AI 버튼 위에 위치 되도록 설정
  3. iOS/AOS 웹/앱 모두 체크 완료

일시불/구독 제품군 - 일반(타임딜 포함)

  1. product-api-v2.js 파일 필요. 실시간 반영이 아닌 새로고침해야 변경 사항 확인 가능.
  2. 제품 카드 안에 버튼 2~3개 인 경우(예: 일반배관/매립배관 또는 스탠드형/벽걸이형(일반)/벽걸이형(벽밀착)), 제품 카드 안에 하나가 품절되면 남아 있는 제품 정보가 자동 반영되도록 처리
  3. 구독 제품에서 구독 케어 서비스는 자동으로 반영되도록 처리
  4. 일시불/구독 제품 URL은 API에 있는 정보 끌어와서 자동 반영되도록 처리
  5. 강제 품절 처리는 FORCE_SOLD_OUT_MD_IDS 변수 사용 관련된 로직이 있으나 개별 페이지에 반영되도록 개선 필요.
  6. 타임딜 제품 - 재고 수량/ 품절 로직은 퍼블 안내서 > 타임딜 제품 재고 수량/품절 처리 로직 분석 참고
  7. 로컬 환경에서 직접 테스트할 수 있음. #useMockData 값을 true, mockDatabase 값이 더미 데이터 적용.
  8. 더보기 기능 활용시 개별 js 파일에서 PV.initializeSequentialLoadMore(고유한 클래스명, 보여질 제품수) 호출.
    예) PV.initializeSequentialLoadMore('j-api-product-view-more', 8);
  9. 제품 카드 커스텀 가능한 영역 필요시 .c-product__custom-container 추가하여 작업. 해당 영역 위치 이동은 CSS order 속성 활용 필요.
  10. 할인율 배지는 0%이면 존재 의미가 없으므로 나오지 않게 처리 함.

일시불 제품 : 큰 세로형

일시불 제품 : 작은 세로형

구독 제품 : 큰 세로형

구독 제품 : 작은 세로형

가로형

타임딜 제품 (data-prdvalue 값을 타임딜 진행중인 MDID로 변경 필요)

번들 할인 제품

  1. 4월 통프(ALL NEW 세일)에서 활용하기 위해 2026.04.05 추가.
  2. 2026.04.02 최초 작업 요청 왔으며, 2026.04.06 기준 관련 API 명세는 아래와 같음.
    1. pdp 내, 노출되는 번들 제품만이 리턴
    2. obsOriginalPrice - 원가 / obsSellingPrice - 판매가 / bundleDiscountPrice - 번들 적용된 할인가 / bundleDiscountAmount - 제품의 번들 할인액 / modelStatusCode - 품절 상태(ACTIVE일 경우 정상) / smallImageAddr - 제품 이미지 경로

일시불/구독 제품군 - 랭킹

  1. prod 환경에서만 확인할 수 있음.
  2. ranking-api.js 필요. 실시간 반영이 아닌 새로고침해야 변경 사항 확인 가능.
  3. content.js > handleRankingApiLoaded 함수 필요.
  4. 더보기 버튼 누르고 다른 페이지로 이동 후 다시 뒤로가기로 돌아왔을 때 더보기 버튼 활성화 로직 필요시 content.js > j-normal-ha-best-ranking-more-btn-clicked, j-normal-subscription-best-ranking-more-btn-clicked 관련 코드 참고하여 작업 필요.
  5. 로컬 환경에서 직접 테스트할 수 있음. #useMockData 값을 true, MOCK_DATA 값이 더미 데이터 적용.
  6. template 태그를 활용하여 javascript와 html 관심사 분리

가전제품

구독 제품

홈스타일 제품 - 일반

  1. prod 환경에서만 확인할 수 있음.
  2. 2025. 12. 12 LG HOME WEEK 앵콜 빅프로모션에 최초로 적용됨.
  3. home-style-api.js 필요. 실시간 반영이 아닌 새로고침해야 변경 사항 확인 가능.
  4. 기본 일시불/구독 제품 API의 마크업과 스타일을 대부분을 동일하게 활용했고 스크립트도 유사한 형태로 반영함.
  5. c-product__custom-container 영역 추가하여 개별 커스텀 가능.

큰 세로형

작은 세로형

가로형

홈스타일 제품 - 랭킹

  1. prod 환경에서만 확인할 수 있음.
  2. 2026. 2. 2 엘지닷 빅프로모션에 최초로 적용됨.
  3. home-style-ranking-api.js 파일 필요 필요. 실시간 반영이 아닌 새로고침해야 변경 사항 확인 가능.
  4. content.js > handleHomeStyleRankingApiLoaded 함수 필요
  5. 더보기 버튼 누르고 다른 페이지로 이동 후 다시 뒤로가기로 돌아왔을 때 더보기 버튼 활성화 로직 필요시 content.js > homeStyleBestRankingMoreClicked 관련 코드 참고
  6. 기본 일시불/구독 제품 API의 마크업과 스타일을 대부분 동일하게 활용함.

    홈스타일 제품 - 타임딜

    1. prod 환경에서만 확인할 수 있음.
    2. home-style-time-deal-api.js 파일 필요. 실시간 반영이 아닌 새로고침해야 변경 사항 확인 가능.
    3. 해당 API 활용되는 페이지: https://homestyle.lge.co.kr/time-sale
    4. API 명세서는 CNS측으로 부터 전달 받은 /doc/home-style-time-deal-and-best-ranking-api-doc.md 파일 참고
    5. 기본 일시불/구독 제품 API의 마크업과 스타일을 대부분을 동일하게 활용함.
      혜택/이벤트 홈

      로그인이 필요합니다.
      로그인 페이지로 이동하시겠습니까?

      사업자몰에서는 사업자 회원 가입 후 사업자회원가, 쿠폰할인가 확인 및 구매가 가능합니다.

      LG전자 사업자회원 인증이 필요합니다.
      이동하시겠습니까?

      사업자몰에서는 사업자 회원 가입 후 사업자회원가, 쿠폰할인가 확인 및 구매가 가능합니다.

      사업자 회원 인증 승인 대기 중입니다.
      승인 완료 후 이용하실 수 있습니다.

      사업자몰에서는 사업자 회원 가입 후 사업자회원가, 쿠폰할인가 확인 및 구매가 가능합니다.

      케어십 신청이 필수인 제품이므로, 제품 상세페이지에서 방문 주기를 선택 후 장바구니에 담으셔야 합니다.
      제품 상세페이지로 이동하시겠습니까?