11일차 - 토스트 UI 에디터(폰트, 플러그인)와 깃허브 블로그, DB

웹 폰트 적용하기

https://noonnu.cc/font_page/366

눈누

"웹폰트로 사용" 내용 복사해서 CSS에 추가하여 적용한다.

  

body {
  margin: 0;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html > body .toastui-editor-contents {
  font-family: 'GmarketSansMedium';
}

@font-face 만으로는 폰트 적용이 안 되어 html > body... 입력해줌

---

플러그인 적용(신택스 하이라이터, Katex, Plant UML)

html

<!-- 신택스 하이라이터 플러그인 라이브러리 -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight.min.css">
<script src="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight-all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">

<!-- katex 플러그인 라이브러리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.13/katex.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.13/katex.min.css">

<!-- uml 플러그인 라이브러리 -->
<script src="https://uicdn.toast.com/editor-plugin-uml/latest/toastui-editor-plugin-uml.min.js"></script>

js

const Editor = toastui.Editor;

const viewer = Editor.factory({
  ...
  plugins: [
    [toastui.Editor.plugin.codeSyntaxHighlight, { highlighter: Prism }],
    katexPlugin,
    [toastui.Editor.plugin.uml, { rendererURL: "http://www.plantuml.com/plantuml/svg/" }]
  ]
});

위 코드 추가하면 적용된다.

---

---

깃허브 블로그

• 리포지터리 생성(readme 체크)
  • Settings > Pages > Build and deployment > Branch 에서 main으로 변경하고 Save
• 블로그 주소
  • https://아이디.github.io/리포지터리
• 깃허브에서 편집
  • https://github.dev/아이디/리포지터리
  • index.html 생성하여 코드펜 내용 copy > 커밋 및 푸시

---

xampp 설치하기

https://www.apachefriends.org/

XAMPP Installers and Downloads for Apache Friends

---

SQLyog 설치하기

https://github.com/webyog/sqlyog-community/wiki/Downloads

Downloads

---

SQLyog에서 계정 생성 & 권한 부여

GRANT ALL PRIVILEGES ON *.* TO <id>@`%` IDENTIFIED BY '<pwd>';

id와 pwd 설정하고 F9(쿼리 실행)

  

SELECT *
FROM mysql.user
WHERE `User` = '<id>';

계정 생성됐는지 확인