멋진 기능들은 코딩 학습
그리고 코딩 교육을 쉽고 재미있게 합니다

Thimble은 브라우저에서 바로 실행되는 모든 기능을 갖춘 코드 에디터입니다. 입문자들이 HTML, CSS & JavaScript를 사용하는 웹기반 프로젝트와 자신만의 사이트들을 생성하는데 도움을 주도록 설계되었습니다. 가능한 모든 것은 손끝에서, 가능한 빨리 여러분을 (또는 수업에서) 일어나 달릴수 있도록 해줍니다.

코드 에디터, 웹 서버, 웹 브라우저 & 개발자 도구를 하나로 모았고 —무료입니다!

변경 사항 바로 보기

실시간 미리보기를 사용하여 제작하고 실험 해보세요. 코드 변경 내용을 즉시 보여줍니다.

Thimble 프로젝트 리믹스하기

이 Thimble 프로젝트 처럼요? 리믹스로 여러분만의 버전을 생성해보세요. 프로젝트를 친구나 학생들에게 보낼수도 있습니다 —무엇을 생각해 낼 수 있을까요?

편리한 코드 조각

코드에 추가할 수 있는 편리한 HTML, CSS & JavaScript 코드 조각 목록을 만들어 작업을 더 빠르게 해보세요.

내장 JavaScript 콘솔

JavaScript 작업중이세요? Thimble 내장 콘솔로 테스트와 디버그가 어느때보다 쉬워졌습니다.

파일 추가 및 관리

Thimble은 실제 웹 프로젝트처럼 작동하며, 생성, 이름 변경, 삭제를 할 수 있고 파일 업로드도 가능합니다.

  • 프로젝트 .zip을 다운로드하고 하드 드라이브에서 보기
  • 컴퓨터의 파일을 Thimble로 드래그 앤 드랍하기

조명 켜고 끄기

Thimble에는 어둡고 밝은 테마가 있으니 마음에 드는것으로 선택해보세요. 텍스트 크기와 같은 다른 옵션들도 변경할 수 있습니다.

튜토리얼 따라하고 만들기

프로젝트에는 여러분이 (또는 여러분의 학생들이) 프로젝트를 변경하는 과정에서 학습을 도와줄 튜토리얼을 포함할 수 있습니다.

입력할 때 코드 힌트 보기

많은 규칙과 문법을 기억하려고 애쓰지 않아도 됩니다. Thimble은 HTML, CSS 그리고 심지어 JavaScript 파일에 대한 힌트를 제공합니다.

HTML 페이지에서 바로 CSS 수정하기

작성중인 HTML 페이지에서 벗어나지 않고 요소의 CSS 스타일을 작성하세요. 요소 태그에 텍스트 커서를 놓고 Cmd/Ctrl + E 버튼을 눌러 CSS 스타일 작성을 시작하세요.

빠르게 웹으로 프로젝트 게시하기

클릭 한번으로 웹으로 프로젝트를 게시할 수 있습니다. 나중에, 프로젝트를 수정한 후, 쉽게 업데이트할 수 있습니다.

에디터에서 바로 색상 선택하기

CSS 파일에서 색상 값에 텍스트 커서를 놓고 Cmd/Ctrl + E를 눌러 색상 선택기를 여세요.

모바일 장치에서 프로젝트 테스트

모바일 미리보기 모드로 전환하면 좁은 장치에서의 작업을 보실 수 있습니다. 그리고, 풀스크린 미리보기를 통해 큰 화면을 보실 수도 있습니다.

빠르게 HTML 요소 찾기

DOM 검사기를 켜고 미리보기에서 다른 요소 위로 마우스를 가져가세요. Thimble이 HTML 편집기에서 관련된 코드를 강조 표시합니다.

이미지 필터

이미지에 필터를 추가하여 프로젝트에 재미를 더하세요. 고양이가 이렇게 멋있었던 적이 없었죠!

셀카 찍기

컴퓨터의 웹캡을 사용하는 Thimble의 셀카 도구를 사용하여 작업하는 페이지에 여러분의 사진을 추가하세요. 그냥 <img src= 태그를 HTML 페이지에 입력하면 프롬프트가 나타납니다.