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

깨알팁

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

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

이윰
345 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

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

신고

"님의 댓글"

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

댓글 삭제

"님의 댓글"

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

공유

퍼머링크
제목 조회 수
0
image
7
0
image
20
0
normal
10
0
normal
62
+1
normal
86
0
normal
104
+1
image
241
+1
image
261
+3
normal
576
+1
image
217
+1
image
184
0
normal
166
0
normal
192
+1
normal
750
+1
normal
124
+5
image
204
+1
normal
177
+1
normal
892
+1
image
215
+1
normal
290