• 방명록을 남겨 주세요 :-) 일주일 동안 열지 않기
  • 다크모드 ↔ 라이트모드 변경 방법 일주일 동안 열지 않기

깨알팁

팁 게시판입니다.
  • 목록
  • 아래로
  • 위로
  • 댓글 0개
  • 검색
  • 라이트모드

웹팁 CKeditor에 스타일 추가하는 방법

이윰
997 1 0

styles.js 에 코드를 추가하여 사용자지정 스타일을 추가할 수 있습니다.

 

<div> 추가하기

styles.js 에서 다음을 찾아 바로 아래에 스타일을 추가합니다.

{
name: 'Special Container',
element: 'div',
styles: {
padding: '5px 10px',
background: '#eee',
border: '1px solid #ccc'
}
},

예시 )

{
name: 'Custom Div ',
element: 'div',
styles: {
padding: '15px',
background: '#f7f7f7',
border: '1px solid #ccc'
border_radius: '15px'
}
},

또는 divclass를 추가하고 스타일 시트를 이용할 수도 있습니다. 아래 코드처럼 작성하여 추가합니다.

{ name: 'Custom Div ', element: 'div', attributes: { 'class': 'custom_div' } },

style.css에 스타일 지정합니다.

.custom_div { padding :15px;
background: #f7f7f7;
border: 1px solid #ccc
border-radius: 15px;
}

<span> class 추가하기

위에서 했던 방식처럼 아래 코드처럼 작성하여 추가합니다.

{ name: 'color1', element: 'span', attributes: { 'class': 'red' } },

style.css에 스타일 지정합니다.

.red { color: #ff5656;}

에디터 > 툴바 > 스타일에서 선택해 사용합니다.

 

끝!

신고공유스크랩
수와신님 포함 1명이 추천

댓글 0

댓글 쓰기
권한이 없습니다. 로그인

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

이 댓글을 삭제하시겠습니까?

공유

퍼머링크
제목 조회 수
+2
image
13296
+4
image
2214
+1
normal
651
0
normal
268
+1
normal
432
+1
normal
632
+1
image
775
+2
image
670
+6
normal
3508
+1
image
507
+1
image
489
0
normal
302
0
normal
315
+3
normal
1629
+1
normal
220
+5
image
644
+1
normal
476
+4
normal
5790
+1
image
1007
+1
normal
442