티스토리 자체에도 코드를 넣을 수 있는 기능은 있지만 결과를 실시간으로 보여줄수가 없는데,
jsfiddle은 코드결과도 공유 가능하고, html, script, css를 나누어서 한눈에 잘 보여줘서 아주 유용하게 활용이 가능하다.
티스토리 외에도 html 입력이 가능한 블로그 어디에서나 jsfiddle를 통해서 코드를 공유가 가능하다.
JS피들이란?
JSFiddle은 사용자가 만든, 협업형 HTML, CSS, 자바스크립트 코드 스니펫을 테스트하고
알리기 위한 온라인 커뮤니티이다. (출저:위키백과)
블로그에 jsfiddle 코드 공유 하는 방법
1. jsfiddle.net 사이트에 접속 해서 로그인을 한다.
2. 코드를 입력한다.
jsfiddle 사이트에 처음 들어가면 아래와 같이 왼쪽 상단에 HTML, 오른쪽 상단 CSS, 왼쪽 하단 Javascript, 오른쪽 하단 Result로 구성되어있다.
HTML 영역 : <body></body> 사이에 들어가는 요소들을 넣어주면 된다.
CSS 영역 : .css 파일에 넣는것 처럼 바로 css코드를 입력하면된다.
Javascript 영역 : 여기도 마찬가지로 <script></script>태그 없이 js파일에 넣는 것 처럼 순수 스크립트만 넣으면 된다.
Result 영역 : 코드 결과를 볼 수 있는 영역
JavaScript 영역 제목을 클릭하면 언어(Typescript, React 등)와 버전을 바꿀 수 있다.
3. 코드를 알맞게 입력하고 상단 메뉴의 Run 을 눌러 제대로 작동하는지 확인한다.
4. Embed를 누르면 창이 뜨는데, 여러가지 설정이 가능하다.
- Tabs : 작업한 항목 중 보이게 하고 싶지 않은 항목이 있다면 여기서 off 해두면된다.
- Visual : jsfiddle 창을 Light하게 할것인지 Dark 하게 할것인지 선택. 그 외에도 폰트컬러나, 백그라운드 컬러 지정이 가능하다.
- Embed snippet 에서 Prefer iframe?를 선택한다.
5. ifram코드를 복사해서 티스토리에 html모드로 하고 삽입하면 끝!
이런식으로 코드를 공유할 수 있다.
+ 팁
jsfiddle에서 iframe 코드를 복사하면 아래와 같은 형태로 되는데,
<iframe width="100%" height="300" src="//jsfiddle.net/heeehong/r0qyLaoj/6/embedded/js,html,css,result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>src 부분에서 jsfiddle.net/heeehong/r0qyLaoj/6/embedded/js,html,css,result/dark/
js,html,css,resul 이부분의 순서를 변경하면 탭 순서도 변경 가능하다.
result,js,html,css 순서로 하면 아래처럼 결과물을 가장 처음으로 보여준다.
'블로그' 카테고리의 다른 글
| 애드센스 수익금 지급 받기, 신한은행 수수료 줄이는 방법 (5) | 2023.11.21 |
|---|---|
| [티스토리] ads.txt 파일 문제 해결 (4) | 2023.04.11 |
| [티스토리] 티스토리 도메인으로 접속 시 개인 도메인으로 강제 이동시키기 (2) | 2023.02.14 |
| [티스토리] 북클럽 Book Club 스킨 썸네일 이미지 비율 변경하기 (4) | 2023.02.10 |
| [티스토리] 글 하단 "이 글이 도움 되셨다면 공감/하트를 눌러주세요" 툴팁 넣기 (6) | 2021.12.29 |
| 티스토리 구글 애드센스 2번만에 승인받은 후기 (2) | 2021.12.07 |
| [티스토리] 사이드바에 쿠팡 파트너스 배너 넣기 (스킨 편집 방법) (2) | 2021.05.26 |
| [티스토리] 나만의 구독 버튼 만들기 (2) | 2021.03.30 |
