개선/제안

2026.05.13 18:20

위젯 복사후 변형해서 재사용시 CSS 충돌

여러 위젯등을 활용하여 복사하여 재 사용하고 있습니다
문제는 HTML과 CSS만으로 구성된 일반적인 위젯 뿐만이 아니고\
swiper js가 들어가있는 위젯도 그렇고 모양을 이리저리 수정하기위해서 CSS를 변형하는데
CSS 수정하게 되면 복사하기전인 원본 위젯들과 CSS가 서로 class 또는 id등이 동일하여 다른 위젯들도 함께 css수정된 것으로 작동합니다
아미X, 나리X의 경우 위젯마다 고유한 값이 생성되는 구조로 해서 위젯을 재사용하고 CSS를 수정하더라도 다른 위젯에 영향을 미치지 않고 독립적으로 운영됩니다
본사의 빌더도 위젯에 가장 바깥의 div등에 고유값을 부여하고 css에도 그 고유값이 기본으로 들어가게해서 복사해서 사용하고 CSS를 수정하도록 그 위젯내에서만 CSS가 작동하면 좋지 않겠나 생각이 듭니다

현재 swiper을 위의 방식으로 변형하여 본사 빌더의 기본 swiper 기능이 아닌 개별적인 swiper 옵션을 부여하여 작동하도록 하였으며 다른 위젯도 CSS를 개별적으로 작동하도록 수정하였으나 다른 위젯들이나 새롭게 나올 위젯들에 하나하나 적용할려면 너무 힘듭니다
이에 개션이 되었으면 하는 바램으로 글 올려봅니다
  • 공유링크 복사
    미니홈 쪽지 구독하기
    구독하고 알림받기

    댓글목록

    profile_image
    리빌더미니홈 1:1 대화하기  3일 전

    해당부분은 2.2.7 버전에서 모듈 출력부에 개별 ID를 부여받은 래퍼를 씌우도록
    개선될 예정입니다.

    감사합니다.

    2026-06-16 01:38

    profile_image
    no_profile 민호민호미니홈 1:1 대화하기  3일 전

    모듈 출력부에 개별 ID가 부여되면 복사해서 사용시 CSS는 동일할텐데 CSS 수정해도 전혀 영향을 미치지 않나요?
    CSS가 동일하여 CSS 수정시 다른 위젯의 CSS도 영향을 받아서 생기는 문제인데 모듈별 개별 ID가 CSS에 같이 적용되어 감싸서 작동하여 개별 ID 내부의 CSS 수정을 해도 영향을 받지 않게 돌아가는 형태가 맞나요?

    2026-06-16 11:16

    profile_image
    리빌더미니홈 1:1 대화하기  3일 전

    복사를 하더라도
    모듈은 추가를 하셔야되니 메인에 추가된모듈의 래퍼에 아이디를 부여하는 부분입니다.
    클래스는 같지만 아이디는 다르니 아이디를 먼저 선언해주고 클래스를 지졍하여 개별모듈에 css를 커스텀 적용하시면 되겠습니다.

    2026-06-16 11:39

    profile_image
    리빌더미니홈 1:1 대화하기  2일 전

    예를들어 .bbs a {font-size:12px} 를 가진 2개의 모듈이 있을때

    #md2 .bbs a {font-size:14px}
    와 같이 처리해주시면 되는 내용입니다.

    현재도 래퍼에 data-id="30" 과 같이 고유 id 가 data 속성으로 들어가고 있고
    (모듈설정을 활성화하고 해당 모듈에 마우스를 오버하면 보입니다.)

    현재 바로 사용가능한방식은 CSS에서
    [data-id="30"] .bbs a {font-size:14px}
    와 같은 형태로 사용하실 수 있습니다.

    data 를 CSS 에서 사용하는 방식이 일반적이지않아 ID를 추가해드릴 예정입니다.
    감사합니다.

    2026-06-16 18:15