「본 사이트 최초 공개」온라인에서 실행하는 정적 HTML 도구 사이트

4,422 0

프런트엔드를 공부할 때 테스트 코드를 실행해야 하는 경우가 자주 있습니다. 당시에는 주로 Chinaz의 웹마스터 도구와 같은 온라인 도구를 사용했습니다. 이제 프런트엔드 기술을 어느 정도 익혔기에, 더 많은 사람들이 프런트엔드 프로그래밍을 더욱 편리하게 배울 수 있도록 직접 온라인 실행 도구를 만들어 보기로 했습니다. 아래는 도구의 시연 이미지입니다.

온라인 실행 도구 예시

LOGO에 관하여: 현재 LOGO는 즉흥적으로 디자인한 것이라确실히 조금 못생겼습니다(웃음). 너그럽게 봐 주세요. 이후에 개선할 예정입니다.

온라인 도구의 특징

  1. 반응형 디자인
    프런트엔드에는 Bootstrap 프레임워크를 사용하여 휴대폰, 태블릿, 컴퓨터에서 페이지가 모두 보기 좋게 표시됩니다.
  2. 코드 실시간 실행
    현대적인 프레임워크를 사용해 코드를 실행하므로 기존 도구처럼 페이지를 새로 고쳐 이동할 필요가 없습니다.
  3. 코드 구문 강조 표시
    코드 구문 강조 기능을 통합하여 학습과 디버깅을 더욱 편리하게 할 수 있습니다.
  4. 오류 알림
    코드 오류를 실시간으로 알려 주어 사용자가 문제를 빠르게 찾아 수정할 수 있도록 돕습니다.

스타일 및 기술 스택

  • 페이지 스타일은 주로 Bootstrap 프레임워크를 사용하여 간결하고 확장하기 쉽습니다.
  • 다양한 언어 코드의 구문 강조를 지원합니다(HTML, CSS, JavaScript).
  • 오류 감지 기능에는 간단하고 효과적인 오류 보고 모듈이 통합되어 있습니다.

앞으로도 기능과 인터페이스를 계속 최적화할 예정이니, 많은 제안과 의견 부탁드립니다~

댓글

(0)

아직 댓글이 없습니다

댓글 작성