# My Terrarium: A project to learn about HTML, CSS, and DOM manipulation using JavaScript 🌵🌱
# My Terrarium : JavaScript를 사용한 HTML, CSS 및 DOM 조작에 대해 배우는 프로젝트 🌵🌱
A small drag and drop code-meditation. With a little HTML, JS and CSS, you can build a web interface, style it, and add an interaction.
작은 드래그 앤 드롭 코드-명상. 약간의 HTML, JS와 CSS를 사용하여 웹 인터페이스를 구축하고, 스타일을 지정하고, 상호 작용을 추가합니다.
![my terrarium](images/screenshot_gray.png)
# Lessons
1. [Intro to HTML](./1-intro-to-html/README.md)
2. [Intro to CSS](./2-intro-to-css/README.md)
3. [Intro to DOM and JS Closures](./3-intro-to-DOM-and-closures/README.md)
1. [HTML 소개](./1-intro-to-html/README.md)
2. [CSS 소개](./2-intro-to-css/README.md)
3. [DOM 및 JS Closures](./3-intro-to-DOM-and-closures/README.md)
## Credits
## 크레딧
Written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
@ -18,17 +18,14 @@ The terrarium created via CSS was inspired by Jakub Mandra's glass jar [codepen]
The artwork was hand drawn by [Jen Looper](http://jenlooper.com) using Procreate.
## Deploy your Terrarium
## Terrarium 배포하기
You can deploy, or publish your terrarium to the web using Azure Static Web Apps.
Azure Static Web Apps를 사용하여 terrarium을 웹에 배포하거나 게시할 수 있습니다.
1. Fork this repo
1. 저장소를 포크합니다
2. Press this button
2. 버튼을 누릅니다
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=cxaall-4621-cxall#create/Microsoft.StaticApp)
3. Walk through the wizard creating your app. Make sure you set the app root to either be `/solution` or the root of your codebase. There's no API in this app, so don't worry about adding that. A .github folder will be created in your forked repo that will help Azure Static Web Apps' build service build and publish your app to a new URL.
3. 앱을 만드는 마법사로 안내합니다. 앱 상위를 `/solution` 또는 코드베이스의 상위로 설정했는지 확인하십시오. 이 앱에는 API가 없으므로 추가할 필요가 없습니다. Azure Static Web Apps의 빌드 서비스로 빌드하고 새 URL에 앱을 게시하는 데 도움이 되는 포크 리포지토리에 .github 폴더가 생성됩니다.