<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
  "translation_date": "2025-08-23T22:36:32+00:00",
  "source_file": "3-terrarium/solution/README.md",
  "language_code": "ko"
}
-->
# 나의 테라리움: HTML, CSS, 그리고 JavaScript를 사용한 DOM 조작 학습 프로젝트 🌵🌱

작고 간단한 드래그 앤 드롭 코드 명상. 약간의 HTML, JS, 그리고 CSS만으로 웹 인터페이스를 만들고, 스타일을 입히고, 상호작용을 추가할 수 있습니다.

![my terrarium](../../../../3-terrarium/images/screenshot_gray.png)

## 크레딧

♥️와 함께 작성한 [Jen Looper](https://www.twitter.com/jenlooper)

CSS로 만들어진 테라리움은 Jakub Mandra의 유리병 [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY)에서 영감을 받았습니다.

아트워크는 [Jen Looper](http://jenlooper.com)가 Procreate를 사용하여 직접 그렸습니다.

## 테라리움 배포하기

Azure Static Web Apps를 사용하여 테라리움을 웹에 배포하거나 게시할 수 있습니다.

1. 이 저장소를 포크하세요.

2. 이 버튼을 누르세요.

[![Azure에 배포 버튼](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)

3. 마법사를 따라 앱을 생성하세요. 앱 루트를 `/solution` 또는 코드베이스의 루트로 설정해야 합니다. 이 앱에는 API가 없으니 걱정하지 않으셔도 됩니다. 포크된 저장소에 .github 폴더가 생성되며, Azure Static Web Apps의 빌드 서비스가 앱을 빌드하고 새 URL에 게시할 수 있도록 도와줍니다.

**면책 조항**:  
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있지만, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서를 해당 언어로 작성된 상태에서 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.