무엇을 도와드릴까요?

make shop make signature

개별디자인 TIP

개별디자인 TIP 상품관련

에디터 2.0 CSS 적용 및 줄간격 설정 방법

글번호 : 1654

https://www.makeshop.co.kr/newmakeshop/home/faq_view.html?uid=1654
상품 상세 페이지에서 쇼핑몰 스킨의 CSS를 초기화하고 에디터 2.0의 CSS를 적용하는 방법을 안내드려요.
<< PC/모바일 공통 >> 1. 작업 위치 - 중앙 디자인 > 상품 관련 > 상품 상세페이지 > 기본 상세 페이지 > CSS 탭 하단 2. CSS

/* 에디터 2.0 CSS 적용 */ .ck-content div, .ck-content dl, .ck-content dt, .ck-content dd, .ck-content ul, .ck-content ol, .ck-content li, .ck-content h1, .ck-content h2, .ck-content h3, .ck-content h4, .ck-content h5, .ck-content h6, .ck-content pre, .ck-content form, .ck-content fieldset, .ck-content input, .ck-content p, .ck-content blockquote, .ck-content th, .ck-content td { margin: revert; padding: revert; } .ck-content h1, .ck-content h2, .ck-content h3, .ck-content h4, .ck-content h5, .ck-content h6 { all: revert !important; } .ck-content .todo-list { all: revert; } .ck-content a { all: unset !important; } .ck-content li { all: revert; } .ck-content h1, .ck-content h2, .ck-content h3, .ck-content h4, .ck-content h5, .ck-content h6 { all: revert important; font-weight: bold !important; } .ck-content .ck-indent-1 { margin-left: 40px !important; } .ck-content .ck-indent-2 { margin-left: 80px !important; } .ck-content .ck-indent-3 { margin-left: 120px !important; } .ck-content .ck-indent-4 { margin-left: 160px !important; } .ck-content .ck-indent-5 { margin-left: 200px !important; } .ck-content { min-height: 400px !important; flex: 1 !important; font-family: 'Lato', Arial, Helvetica, sans-serif !important; font-size: 16px !important; color: #333 !important; word-break: break-word !important; } .ck-content table { border-collapse: collapse !important; margin: 1em 0 !important; padding: 0 !important; } .ck-content td, .ck-content th { border: 1px solid #ccc !important; padding: 8px !important; margin: 0 !important; font-size: inherit !important; } .ck-content th { font-weight: bold !important; background-color: #f5f5f5 !important; } .ck-content a:link, .ck-content a:visited { color: #0066cc !important; text-decoration: underline !important; font-size: inherit !important; } .ck-content a:hover { color: #004499 !important; text-decoration: underline !important; font-size: inherit !important; } .ck-content a:active { color: #ff0000 !important; text-decoration: underline !important; font-size: inherit !important; } .ck-content hr { display: block !important; border: 1px solid #ccc !important; border-width: 1px 0 0 0 !important; margin: 1em 0 !important; padding: 0 !important; } .ck-content dl { margin: 1em 0 !important; padding: 0 !important; } .ck-content dt { font-weight: bold !important; margin: 0.5em 0 0 0 !important; padding: 0 !important; } .ck-content dd { margin: 0 0 0.5em 2em !important; padding: 0 !important; }

<< 에디터 2.0 줄간격 설정 방법 >> - 에디터 2.0은 줄 간격 기능이 지원되지 않으며, 필요 시에는 위 소스를 적용한 후 아래 소스를 하단에 추가하여 줄 간격을 지정할 수 있어요. .ck-content p {line-height: 1;} .ck-content p span {line-height: 1;} *적용 시,빨간색 숫자를 원하는 만큼 변경해주세요.

<< 참고사항 >>
에디터 2.0은 기본적으로 쇼핑몰 개별 디자인의 CSS가 적용되므로 실제 쇼핑몰 화면에서 다르게 보일 수 있어요.
가능한 상품 상세 페이지의 CSS를 확인 후 직접 수정하여 에디터 2.0 환경에 맞게 적용하시길 권장드려요.
목록 1:1 문의