프로그램 연습
2024-12-15 Sun

로그인

검색

ckeditor

rhymix (XE) - ckeditor에 Google Fonts 넣는 방법

Extra Form
출처 https://fonts.google.com/

구글폰트 Hi MelodyGoogle Fonts - Hi Melody 넣기 

구글폰트에서 제공하는 예쁜 한글 글꼴 Hi Melody를 Rhymix 홈페이지에 넣어 보도록 하겠습니다. Rhymix 웹편집기 ckeditor와 조합하여 언제든 게시글에 예쁜 구글폰트를 넣을 수 있습니다. 

 

1. 구글폰트를 검색해서 원하는 폰트를 찾습니다. → Google Fonts 
 

2. 원하는 글꼴을 선택하여 확인해 보면 오른쪽에 [ Select ... + ] 버튼이 보입니다. 이 버튼을 클릭해 주세요. 
   장바구니에 담는 버튼 입니다. 

2023-11-18121558.png

 

3. 오른쪽 상단의 View selected families 아이콘을 클릭합니다. 

2023-11-18115146.png

 

4. 웹에 등록하는 방식을 선택합니다. Rhymix 에서는 Layout에 삽입할 때 CSS에 등록할 수 있습니다. 
    @import 를 선택하여 소스코드를 복사합니다. 

2023-11-18115412.png

 

5. Rhymix 의 관리자 화면으로 들어가서, 레이아웃 설정화면 → HTML/CSS 항목의 CSS -layout.css 부분 입력란에 
    @import url('https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap'); 부분만 넣어주고 저장합니다. 

    다른 글꼴도 같이 사용한다면 아래와 같이 &로 이어줍니다. 
    @import url('https://fonts.googleapis.com/css2?family=Hi+Melody&family=Gugi&family=Imperial+Script&display=swap');

 

   이렇게 하면 Rhymix 에서 기본적으로 해당 글꼴로 설정된 내용이 원하는 글꼴로 표현 됩니다. 
 


이제 ckeditor 에서 글꼴을 사용할 수있도록 설정합니다. 

6. Rhymix root/common/js/plugins/ckeditor/ckeditor.config.js 파일에 아래와 같이 표현할글꼴이름/글꼴명 을 넣어 설정해 줍니다. 

config.font_names = "맑은 고딕/맑은 고딕,Malgun Gothic;Meiryo;하이멜로디/Hi Melody;Neonderthaw/Neonderthaw;" 

 

이렇게 하면 웹편집기에서도 원하는 글꼴을 선택하여 게시글을 작성할수 있게 됩니다. 

2023-11-18121007.png

목록
위로 아래로 게시글 수정 내역 댓글로 가기 첨부
Category
  1. 26
    Mar 2024
    12:43

    Rhymix(XE)의 sketchbook5 방명록형 스킨 사용시 권한없는 사용자에게 "비밀글입니다." 숨기기

    Sketchbook5 방명록형 사용시 비밀글은 읽기 권한이 없는 사용자에게 노출될 필요가 없으므로 "비밀글입니다." 화면까지 완전히 보이지 않게 하여 깔끔한 게시판을 유지할 수 있도록 만드는 방법입니다. 위의 이미지에서 빨강 부분을 완전히 사라지게 합니다. ...
    Read More
  2. 23
    Mar 2024
    09:18

    Rhymix에 네이버 클로바 나눔손글씨 웹폰트 적용하기

    Rhymix와 Ckeditor 4.0 을 이용환경에서 네이버에서 제공하는 클로바 나눔손글씨를 적용하는 방법 https://hangeul.naver.com/font/clova 에 접속하여 원하는 글꼴을 선택 후 클릭 웹 폰트 URL 부분의 코드를 복사하여 레이아웃 "HTML/CSS 설정"에 넣어 줌 <li...
    Read More
  3. 12
    Mar 2024
    23:37

    AMD CPU를 사용하는 컴퓨터에 MAC OS 설치 및 윈도우 11 듀얼 부팅

    AMD CPU를 사용하는 컴퓨터에 MAC OS 설치 및 윈도우 11 듀얼 부팅
    Read More
  4. 29
    Feb 2024
    13:17

    PlannerXE123 게시판 스킨에서 회원만 글쓰기 가능 설정

    PlannerXE123 게시판 스킨(일정 달력)에서 글쓰기 권한이 없는 사람에게도 달력의 날짜(일정 등록)가 링크되어 권한이 없다고 나타나서 무엇인가 지저분한 느낌이 들었다. 글쓰기 권한이 없는 사람에게 달력을 보여주기는 하지만 마우스 hover 시 클릭이 되지 ...
    Read More
  5. 14
    Dec 2023
    13:37

    portainer 를 설치해 보자

    도커를 사용하려고 했더니 안내하는 사이트마다 portainer 를 이용하고 있다. 그래서 portainer를 우선 설치해 봤다. 🥽 시놀로지 나스에서 포테이너 설치방법 Synology Nas에 ssh로그인, root로 접속한다. 아래 명령으로 도커를 다운받도록 한다. # docker run...
    Read More
  6. 10
    Dec 2023
    00:49

    Rhymix(XE) 보드스킨 sketchbook5 에서 카테고리 영역의 배경 지

    sketchbook5 > css > board.css 또는 black.css 수정 .bd_cnb .bg_f_f9 { background: transparent; background-image: url(이미지URL); background-size: cover; border-color: transparent; }
    Read More
  7. 29
    Nov 2023
    20:44

    따듯한 화이트 크리스마스 테마 - 챗지피티에게 물어봤다

    챗지피티에게 파스텔톤의 클래식한 분위기를 연출하면서도 따듯한 화이트크리스마스 분위기를 연출하는 8가지 색상을 물어봤다. light #F9F6F2 웜 화이트(#F9F6F2): 포근한 겨울 풍경을 닮은 크리미하고 따뜻한 화이트. #EADCBF 샴페인 골드(#EADCBF): 쉬머한 ...
    Read More
  8. 26
    Nov 2023
    21:10

    jQuery skrollr 패럴렉스 스크롤 구현하기

    jQuery 77 [ skrollr ] 패럴렉스 스크롤 구현하기, 스크롤러 라이브러리로 아주 쉽게 구현 겁나 빠른 웹 레시피 - parallax scrolling 1 겁나 빠른 웹 레시피 - parallax scrolling 2
    Read More
  9. 18
    Nov 2023
    11:24

    rhymix (XE) - ckeditor에 Google Fonts 넣는 방법

    Google Fonts - Hi Melody 넣기 구글폰트에서 제공하는 예쁜 한글 글꼴 Hi Melody를 Rhymix 홈페이지에 넣어 보도록 하겠습니다. Rhymix 웹편집기 ckeditor와 조합하여 언제든 게시글에 예쁜 구글폰트를 넣을 수 있습니다. 1. 구글폰트를 검색해서 원하는 폰트...
    Read More
  10. 15
    Nov 2023
    15:59

    CKEditor 입력영역 배경색

    Rhymix의 기본 웹편집기인 Ckeditor 사용시 툴바영역의 기본 배경색을 지정하는 부분임(실제로 반응 없음, 다른 방법을 찾아 보세요.) 파일명 rhmix/modules/editor/tpl/js/aditor.app.js allowedContent: true, removePlugins: 'stylescombo,language,bidi,fl...
    Read More
  11. 08
    Jul 2023
    09:33

    Plugins / Font Awesome fortyTwo(fa42)

    Font Awesome fortyTwo ckeditor Plugins fa42 적용 방법입니다. fa42 는 Font-awesome 최신버전인 6.4.0 을 적용할 수 있습니다. Font-awesome 의 버전이 어떤 의미가 있는지 모르지만 최신 경향이 반영된 아이콘이 추가되었거나 그런정도의 차이가 있을 듯 ...
    Read More
  12. 06
    Jul 2023
    00:55

    elfinder Cloud Thumbnail Setting - 엘파인더에서 실제파일과 다른위치에 썸네일 만들기

    elfinder Cloud Thumbnail Setting 엘파인터에서 클라우드와 같이 썸네일을 표시할 수 없는 다른위치에 있는 파일의 썸네일을 표현하는 방법 서버에서 실제파일의 위치는 /Documents 에 있고, 웹서비스 루트는 /publichtml 인경우 elfinder 의 기본 설정 conne...
    Read More
  13. 26
    May 2023
    11:11

    ASUS ProArt B550 Creator 메인보드에서 백패널 Type-C 단자 인식 안되는 경우

    ASUS ProArt B550 CREATOR 메인보드는 AMD AM4 소켓을 사용하는 메인보드로, Thunderbolt 4 포트를 백패널에 기본으로 제공하는 ATX 보드입니다. 처음 PC를 구성하고 정상적 백패널의 Type-C(Thunderbolt) 포트가 정상적으로 작동하여 잘 사용하였으나, 어느 ...
    Read More
  14. 22
    May 2023
    13:47

    CentOS 기본 명령어 몇가지

    OS버전 확인> cat /etc/redhat-release 또는 cat /etc/*release* java 버전 확인> java -version 또는 javac -version [ 사용량 확인 하기 ] CPU 사용률> top -b -n1 | grep -Po '[0-9.]+ id' | awk '{print 100-$1}' 3.7 이렇게 결과가 나오면 사용률은 3.7% ...
    Read More
  15. 01
    Apr 2023
    19:12

    CentOS 7 최소설치 후 netstat 명령이 없는 경우

    CentOS 7 을 최소설치 한 경우 일부 명령이 설치되지 않을 수 있습니다. netstat 명령 입력시 not found 오류가 뜬다면 아래와 같이 net-tools 패키지를 설치해 준다 # yum install net-tools
    Read More
  16. 01
    Apr 2023
    19:09

    CentOS 7 에 MariaDB 설치하기

    CentOS 7 에 MariaDB 최신버전으로 설치하기 yum 을 업데이트 및 업그레이드 한다 # yum update # yum upgrade yum repository 등록으로 설치패키지 활성화 # vi /etc/yum.repos.d/MariaDB.repo [mariadb] name = MariaDB baseurl = http://yum.mariadb.org/10...
    Read More
  17. 01
    Apr 2023
    18:33

    CentOS 7 에서 MariaDB 완전제거

    CentOS 에서 MariaDB를 완전하게 삭제하는 방법입니다. MariaDB 삭제하기 # yum remove -y mariadb mariadb-server ... 진짜냐고 물어오면? y ... 지원지면 Complete ! 기타 생성되었던 파일 삭제 # rm -rf /var/lib/mysql # rm /etc/my.cnf // DB 로그인 정보...
    Read More
  18. 01
    Apr 2023
    15:25

    CentOS 7.9 에 Apache 웹서버 설치하기

    CentOS 7.9 최소설치 버전에서 Apache 웹서버 구성방법 CentOS 의 업데이트를 최신으로 갱신합니다. # yum -y update Apache 웹서버를 설치합니다. # yum install httpd # systemctl start httpd // httpd 서비스 시작 # systemctl enable httpd // 운영체제 ...
    Read More
  19. 01
    Apr 2023
    14:29

    CentOS 7.9 최소설치시 ssh 구성 방법

    CentOS 7.9 최소설치 후 ssh 환경을 설정하기 CentOS 설치시 최소설치를 하더라도 ssh 는 기본 설치됨 # systemctl status sshd // ssh 상태를 확인 ssh 포트를 변경하는 방법 - /etc/ssh/sshd_config 파일을 수정 #Port 22 를 찾아서 주석을 해제하고 원하는 ...
    Read More
  20. 01
    Apr 2023
    13:20

    CentOS 7.9 최소설치시 네트워크 설정 방법

    CentOS 7.9 를 최소설치하여 웹서버 구성하는 방법입니다. 최소설치를 완료한 이후 ip설정 완료된 이후 부터 작업입니다. ip 확인 방법 # hostname -i // 맥주소와 ip를 나타냄 # hostname -I // 대문자 i, 아이피 주소만 나타냄 # ip addr show # ip addr // ...
    Read More
Board Pagination Prev 1 2 3 4 Next
/ 4