---
title: "「본 사이트 최초 공개」온라인에서 실행하는 정적 HTML 도구 사이트 - 근심을 잊는 한 장"
description: "프런트엔드를 공부할 때 테스트 코드를 실행해야 하는 경우가 자주 있습니다. 당시에는 주로 Chinaz의 웹마스터 도구와 같은 온라인 도구를 사용했습니다. 이제 프런트엔드 기술을 어느 정도 익혔기에, 더 많은 사람들이 프런트엔드 프로그래밍을 더욱 편리하게 배울 수 있도록 직접 온라인 실행"
canonical_url: "https://www.ikxin.com/ko/article/online-html-tools"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ko
meta:
"og:description": "프런트엔드를 공부할 때 테스트 코드를 실행해야 하는 경우가 자주 있습니다. 당시에는 주로 Chinaz의 웹마스터 도구와 같은 온라인 도구를 사용했습니다. 이제 프런트엔드 기술을 어느 정도 익혔기에, 더 많은 사람들이 프런트엔드 프로그래밍을 더욱 편리하게 배울 수 있도록 직접 온라인 실행"
"og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~44CM67O4IOyCrOydtO2KuCDstZzstIgg6rO16rCc44CN7Jio65287J247JeQ7IScIOyLpO2Wie2VmOuKlCDsoJXsoIEgSFRNTCDrj4Tqtawg7IKs7J207Yq4IC0g6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2Cc_Article%2Ctitle_~44CM67O4IOyCrOydtO2KuCDstZzstIgg6rO16rCc44CN7Jio65287J247JeQ7IScIOyLpO2Wie2VmOuKlCDsoJXsoIEgSFRNTCDrj4Tqtawg7IKs7J207Yq4%2Cdescription_~7ZSE65-w7Yq47JeU65Oc66W8IOqzteu2gO2VoCDrlYwg7YWM7Iqk7Yq4IOy9lOuTnOulvCDsi6TtlontlbTslbwg7ZWY64qUIOqyveyasOqwgCDsnpDso7wg7J6I7Iq164uI64ukLiDri7nsi5zsl5DripQg7KO866GcIENoaW5heuydmCDsm7nrp4jsiqTthLAg64-E6rWs7JmAIOqwmeydgCDsmKjrnbzsnbgg64-E6rWs66W8IOyCrOyaqe2WiOyKteuLiOuLpC4g7J207KCcIO2UhOufsO2KuOyXlOuTnCDquLDsiKDsnYQg7Ja064qQIOygleuPhCDsnbXtmJTquLDsl5AsIOuNlCDrp47snYAg7IKs656M65Ok7J20IO2UhOufsO2KuOyXlOuTnCDtlITroZzqt7jrnpjrsI3snYQg642U7JqxIO2OuOumrO2VmOqyjCDrsLDsmrgg7IiYIOyeiOuPhOuhnSDsp4HsoJEg7Jio65287J24IOyLpO2WiQ%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL29ubGluZS1odG1sLXRvb2xzIg%2Cs_8iZrcOCheVXZ62Xa.png"
"og:image:alt": "「본 사이트 최초 공개」온라인에서 실행하는 정적 HTML 도구 사이트 - 근심을 잊는 한 장"
"og:image:height": "630"
"og:image:type": image/png
"og:image:width": "1200"
"og:title": "「본 사이트 최초 공개」온라인에서 실행하는 정적 HTML 도구 사이트"
"twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~44CM67O4IOyCrOydtO2KuCDstZzstIgg6rO16rCc44CN7Jio65287J247JeQ7IScIOyLpO2Wie2VmOuKlCDsoJXsoIEgSFRNTCDrj4Tqtawg7IKs7J207Yq4IC0g6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2Cc_Article%2Ctitle_~44CM67O4IOyCrOydtO2KuCDstZzstIgg6rO16rCc44CN7Jio65287J247JeQ7IScIOyLpO2Wie2VmOuKlCDsoJXsoIEgSFRNTCDrj4Tqtawg7IKs7J207Yq4%2Cdescription_~7ZSE65-w7Yq47JeU65Oc66W8IOqzteu2gO2VoCDrlYwg7YWM7Iqk7Yq4IOy9lOuTnOulvCDsi6TtlontlbTslbwg7ZWY64qUIOqyveyasOqwgCDsnpDso7wg7J6I7Iq164uI64ukLiDri7nsi5zsl5DripQg7KO866GcIENoaW5heuydmCDsm7nrp4jsiqTthLAg64-E6rWs7JmAIOqwmeydgCDsmKjrnbzsnbgg64-E6rWs66W8IOyCrOyaqe2WiOyKteuLiOuLpC4g7J207KCcIO2UhOufsO2KuOyXlOuTnCDquLDsiKDsnYQg7Ja064qQIOygleuPhCDsnbXtmJTquLDsl5AsIOuNlCDrp47snYAg7IKs656M65Ok7J20IO2UhOufsO2KuOyXlOuTnCDtlITroZzqt7jrnpjrsI3snYQg642U7JqxIO2OuOumrO2VmOqyjCDrsLDsmrgg7IiYIOyeiOuPhOuhnSDsp4HsoJEg7Jio65287J24IOyLpO2WiQ%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL29ubGluZS1odG1sLXRvb2xzIg%2Cs_8iZrcOCheVXZ62Xa.png"
"twitter:image:alt": "「본 사이트 최초 공개」온라인에서 실행하는 정적 HTML 도구 사이트 - 근심을 잊는 한 장"
---
> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)
# **「본 사이트 최초 공개」온라인에서 실행하는 정적 HTML 도구 사이트**
2017.07.18 4,523 0
프런트엔드를 공부할 때 테스트 코드를 실행해야 하는 경우가 자주 있습니다. 당시에는 주로 Chinaz의 웹마스터 도구와 같은 온라인 도구를 사용했습니다. 이제 프런트엔드 기술을 어느 정도 익혔기에, 더 많은 사람들이 프런트엔드 프로그래밍을 더욱 편리하게 배울 수 있도록 직접 온라인 실행 도구를 만들어 보기로 했습니다. 아래는 도구의 시연 이미지입니다.
**LOGO에 관하여**: 현재 LOGO는 즉흥적으로 디자인한 것이라确실히 조금 못생겼습니다(웃음). 너그럽게 봐 주세요. 이후에 개선할 예정입니다.
## 온라인 도구의 특징
1. **반응형 디자인**
프런트엔드에는 Bootstrap 프레임워크를 사용하여 휴대폰, 태블릿, 컴퓨터에서 페이지가 모두 보기 좋게 표시됩니다.
2. **코드 실시간 실행**
현대적인 프레임워크를 사용해 코드를 실행하므로 기존 도구처럼 페이지를 새로 고쳐 이동할 필요가 없습니다.
3. **코드 구문 강조 표시**
코드 구문 강조 기능을 통합하여 학습과 디버깅을 더욱 편리하게 할 수 있습니다.
4. **오류 알림**
코드 오류를 실시간으로 알려 주어 사용자가 문제를 빠르게 찾아 수정할 수 있도록 돕습니다.
## 스타일 및 기술 스택
- 페이지 스타일은 주로 Bootstrap 프레임워크를 사용하여 간결하고 확장하기 쉽습니다.
- 다양한 언어 코드의 구문 강조를 지원합니다(HTML, CSS, JavaScript).
- 오류 감지 기능에는 간단하고 효과적인 오류 보고 모듈이 통합되어 있습니다.
앞으로도 기능과 인터페이스를 계속 최적화할 예정이니, 많은 제안과 의견 부탁드립니다～
## **댓글**
(0)
아직 댓글이 없습니다
## **댓글 작성**
```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ko#website","@type":"WebSite","description":"근심을 잊는 한 장은 기술 탐구와 일상을 다루는 개인 웹사이트입니다. 웹 개발, 백엔드 및 DevOps 실무를 기록하고 소프트웨어 도구와 디지털 경험, 코드 밖의 견문과 생각을 나눕니다.","inLanguage":"ko-KR","name":"근심을 잊는 한 장","url":"https://www.ikxin.com/ko","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ko/article/online-html-tools#webpage","@type":"WebPage","description":"프런트엔드를 공부할 때 테스트 코드를 실행해야 하는 경우가 자주 있습니다. 당시에는 주로 Chinaz의 웹마스터 도구와 같은 온라인 도구를 사용했습니다. 이제 프런트엔드 기술을 어느 정도 익혔기에, 더 많은 사람들이 프런트엔드 프로그래밍을 더욱 편리하게 배울 수 있도록 직접 온라인 실행","name":"「본 사이트 최초 공개」온라인에서 실행하는 정적 HTML 도구 사이트","url":"https://www.ikxin.com/ko/article/online-html-tools","isPartOf":{"@id":"https://www.ikxin.com/ko#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ko/article/online-html-tools"]}]}]}
```
## Sitemap
See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.