-
티스토리 게시물에 수식 추가하기Study 2025. 7. 4. 21:01
수식 추가 예시
일단 다음 site에서 수식을 작성한다.
사용법은 이것저것 조금만 시도해보면 금방 터득할 수 있을 것이다.
Equation Editor for online mathematics - create, integrate and download
Download svg gif png pdf emf 5 pt 9 pt 10 pt 12 pt 18 pt 20 pt 50 80 100 110 120 150 200 300 Transparent White Black Red Green Blue Inline Block WordPress phpBB Tiny Wiki url url encoded xml pre doxygen html latex Formatted string containing your Equation
editor.codecogs.com

DOWNLOAD 옆의 버튼으로 원하는 옵션을 선택한다.
(왼쪽부터 확장자, 글자 포인트, 해상도, 배경 색(svg는 안됨), 압축 설정(Compression)?으로 추측됨)
이미지로 저장해서 사용하려면 DOWNLOAD 버튼을 클릭하면 된다.
인터넷 브라우저의 개발자 툴을 쓸 줄 알면 다음과 같이 html로 게시물에 바로 때려 넣을 수 있다.
[수식 입력 1]
먼저 수식을 입력할 자리를 찾기 쉽게 표시한다.

마지막 옵션을 html로 설정한다.

그러면 하단의 코드가 html 형식으로 변경되며, 이 코드를 그대로 복사한다.

수식을 입력할 게시물 편집 모드에서 브라우저의 개발자 모드를 켠다. (크롬 단축키는 F12)
개발자 모드에서 html element 선택하는 버튼을 클릭한다.

버튼을 클릭하면 실제 브라우저 화면에서 html element를 바로 선택할 수 있다.
아까 표시해둔 수식 자리를 직접 클릭한다.

그러면 표시한 부분이 개발자 화면의 html 태그가 바로 선택되는데
선택된 태그에서 마우스 오른쪽 버튼을 눌러 나오는 메뉴에서 Edit as HTML을 선택한다.

이 위치에 입력된 내용을 모두 지우고 복사한 수식 코드를 그대로 붙여넣기한다.
코드 입력을 완료한 후 다른 html 태그 아무거나 누르거나 Ctrl + Enter 키를 누르면 코드가 반영된다.

그러면 코드를 입력한 부분에 이미지 형식으로 수식이 표시된다.
'Study' 카테고리의 다른 글
비밀글 테스트 - 1 (0) 2024.01.30 JAVA WEB - 7 (0) 2023.02.16 JAVA WEB - 6 (0) 2023.02.15 JAVA WEB - 5 (0) 2023.02.14 JAVA WEB - 4 (0) 2023.02.13