You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
2.4 KiB
43 lines
2.4 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
|
|
"translation_date": "2025-08-23T22:23:52+00:00",
|
|
"source_file": "3-terrarium/README.md",
|
|
"language_code": "ko"
|
|
}
|
|
-->
|
|
# 내 테라리움: HTML, CSS, 그리고 JavaScript를 사용한 DOM 조작 학습 프로젝트 🌵🌱
|
|
|
|
작고 간단한 드래그 앤 드롭 코드 명상. 약간의 HTML, JS, 그리고 CSS만으로 웹 인터페이스를 만들고, 스타일을 입히며, 원하는 다양한 상호작용을 추가할 수 있습니다.
|
|
|
|
|
|
|
|
# 학습 내용
|
|
|
|
1. [HTML 소개](./1-intro-to-html/README.md)
|
|
2. [CSS 소개](./2-intro-to-css/README.md)
|
|
3. [DOM과 JS 클로저 소개](./3-intro-to-DOM-and-closures/README.md)
|
|
|
|
## 크레딧
|
|
|
|
♥️와 함께 작성한 [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. 이 버튼을 누르세요.
|
|
|
|
[](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)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있지만, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서를 해당 언어로 작성된 상태에서 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다. |