HTML 프로그램 삽입하는 완벽 가이드

1. 프로그램 코드 준비 (HTML / CSS / JS)

코딩이 처음이신가요? 프로그램을 만드는 것은 '집을 짓는 과정'과 아주 비슷합니다. 아래 세 가지가 합쳐져 하나의 멋진 기능이 탄생합니다.

🏗️ HTML (뼈대) 집의 구조를 잡는 벽과 기둥입니다. 버튼, 글자, 입력칸 등을 배치합니다.

🎨 CSS (인테리어) 벽지 색상과 조명입니다. 크기, 색상, 정렬 등 예쁘게 꾸미는 역할을 합니다.

⚡ JS (전기/수도) 스위치를 켜면 불이 들어오게 하는 기능입니다. 클릭하면 계산이 되는 '동작'을 담당합니다.

💡 팁: 초보자라면 세 코드를 따로 관리하기보다 하나로 합쳐진 소스를 복사해 사용하는 것이 훨씬 오류가 적습니다!

---

2. 티스토리 에디터에서 'HTML 모드' 진입

일반적인 글쓰기 화면에서는 코드를 넣어도 그냥 '글자'로만 보입니다. 컴퓨터가 이 코드를 실행하게 하려면 뒷면(HTML 모드)으로 들어가야 합니다.

1. 티스토리 글쓰기 페이지 우측 상단의 [기본모드] 버튼을 찾으세요.
2. 메뉴에서 [HTML]을 선택하면 화면이 검게 변하며 코드를 넣을 준비가 됩니다.
3. 원하는 위치에 준비한 소스를 Ctrl+V로 붙여넣고 다시 [기본모드]로 돌아오세요.

✅ 정상적으로 들어갔는지 확인하는 법

기본모드로 돌아왔을 때 박스 형태가 깨져 보여도 당황하지 마세요! 하단의 [미리보기] 버튼을 눌렀을 때 프로그램이 잘 작동한다면 성공입니다. 발행 후에는 완벽하게 작동할 거예요.