HTML 보물찾기
HTML을 사용해 단서를 풀고 숨겨진 메시지를 찾아 보세요
HTML 보물찾기은(는) CoddyKit의 무료 HTML for Kids 강의입니다. 이것은 2개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML for Kids 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML for Kids 강의에는 총 2개의 강의가 포함되어 있습니다.
보물찾기 시작하기
HTML 보물찾기
HTML 보물찾기에 오신 것을 환영합니다! 여러분의 임무는 HTML 코드에 숨겨진 단서를 풀어 숨겨진 보물을 찾는 것입니다. 각 단계를 주의 깊게 따라 코드를 수정하며 진행하세요.
목표: 각 과제를 완료하여 보물을 찾으세요!
보물 지도 설정하기
1단계: 보물 지도 설정하기
첫 번째 단서는 주석 안에 숨겨져 있습니다. HTML 코드를 열고 단서를 찾아보세요!
시작 HTML 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>Treasure Hunt</title>
</head>
<body>
<h1>Welcome to the Treasure Hunt!</h1>
<p>Follow the clues to find the treasure.</p>
<!-- Clue 1: Add an image to this page with a description of "Treasure Map". -->
</body>
</html>
보물 지도 추가하기
2단계: 보물 지도 추가하기
보물 지도를 추가했나요? 다음은 예시입니다.
<img src="treasure-map.jpg" alt="Treasure Map" />도구 챙기기
3단계: 도구 챙기기
계속하려면 보물찾기에 가져갈 도구 목록을 만드세요. <ul> 및 <li> 태그를 사용하세요.
예:
<ul>
<li>Compass</li>
<li>Flashlight</li>
<li>Map</li>
</ul>
추가 정보 찾기
4단계: 추가 정보 찾기
<a> 태그를 사용하여 보물찾기에 관한 웹사이트 링크를 추가하세요.
예:
<a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>
마지막 도전
5단계: 마지막 도전
보물이 거의 손에 들어왔습니다! 보물을 잠금 해제하려면 클릭했을 때 숨겨진 메시지를 표시하는 버튼을 만드세요.
다음 예시를 참고하세요.
<p id="hidden-message" style="display: none;">You found the treasure! 🎉</p>
<button onclick="document.getElementById('hidden-message').style.display='block';">
Reveal the Treasure
</button>
페이지 테스트하기
6단계: 페이지 테스트하기
이제 모든 요소를 추가했으니 페이지를 테스트해 보세요. 다음 사항을 확인하세요.
- 이미지가 올바르게 표시됩니다.
- 도구 목록이 표시됩니다.
- 링크를 클릭하면 새 탭에서 웹사이트가 열립니다.
- 버튼을 클릭하면 보물 메시지가 표시됩니다.
모든 항목이 제대로 작동한다면 축하합니다. 보물찾기를 완료했습니다!
최종 보물
최종 페이지는 다음과 같은 모습일 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Treasure Hunt</title>
</head>
<body>
<h1>Welcome to the Treasure Hunt!</h1>
<p>Follow the clues to find the treasure.</p>
<!-- Step 1: Added the treasure map -->
<img src="treasure-map.jpg" alt="Treasure Map" />
<!-- Step 2: Listed tools for treasure hunting -->
<h2>My Treasure Hunting Tools</h2>
<ul>
<li>Compass</li>
<li>Flashlight</li>
<li>Map</li>
</ul>
<!-- Step 3: Added a useful link -->
<h2>Learn More</h2>
<a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>
<!-- Step 4: Added the hidden treasure -->
<h2>Your Treasure</h2>
<p id="hidden-message" style="display: none;">You found the treasure! 🎉</p>
<button onclick="document.getElementById('hidden-message').style.display='block';">
Reveal the Treasure
</button>
</body>
</html>
보물찾기 복습
Great Job!
Congratulations! You’ve completed the HTML Treasure Hunt. You’ve practiced working with images, lists, links, and buttons—all essential elements of web development. Keep exploring and creating amazing projects!
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 16
- 레슨
- 35
자주 묻는 질문
“HTML 보물찾기” 강의는 무료인가요?
네 — “HTML 보물찾기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML for Kids 강의 전체를 잠금 해제할 수 있습니다. HTML for Kids 강의에는 총 2개의 강의가 포함되어 있습니다.
“HTML 보물찾기”에서 뭘 배우나요?
HTML을 사용해 단서를 풀고 숨겨진 메시지를 찾아 보세요 브라우저에서 직접 실행하는 실습 코드로 HTML for Kids을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML for Kids을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML for Kids은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 2개 중 2번째 강의입니다.
“HTML 보물찾기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML for Kids 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML for Kids 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 따라 하며 코딩하기: 간단한 웹 페이지 만들기
- HTML 보물찾기