나는 정보국 웹 특수작전팀을 이끄는 HTML 요원이다.
우리는 도로랜드의 '미래형 테마파크' 전환 작전을 진행중이다.
'도로랜드 스마트 안내 시스템 웹페이지'를 만드는 게 임무지?
항상 기반이 제일 중요한 법, 우선 뼈대부터 배워보자고!
우측 훈련 단말기에 아래 미션들을 차례대로 수행하도록.
📘 정보국 1급 기밀 (HTML 태그 백과사전)
테마파크 간판 달기
방문객이 가장 먼저 볼 수 있도록 웹페이지의 가장 큰 제목을 생성하라.
힌트: <h1> 태그 사용<h1>도로랜드에 오신 것을 환영합니다!</h1>
💡 추가 미션: <h1>를 <h2>로 바꾸면 글자가 작아지는 것을 확인하라.
소개글 작성하기
도로랜드의 정체를 알리는 짧은 소개글을 작성한다.
힌트: <p> 태그 사용<p>이곳은 공공데이터로 움직이는 미래형 테마파크입니다. 스마트 어트랙션을 즐겨보세요!</p>
글자 강조하기 (인라인 요소)
텍스트 안에서 중요한 단어를 강조하며 줄이 바뀌지 않는 '인라인 요소'를 확인하라.
힌트: <b> 또는 <i> 태그 사용<b>특별한</b> 세상을 <i>경험</i>해 보세요.
주요 시설 목록 만들기
테마파크의 3대 어트랙션을 점이 찍힌 목록으로 정리하라.
힌트: <ul> 또는 <ol>과 <li> 태그 사용<ul>
<li>스마트 사파리</li>
<li>기상 조절 돔</li>
<li>대기 오염 정화탑</li>
</ul>
💡 추가 미션: <ul>를 <ol>로 바꾸면 숫자 목록으로 변하는 것을 확인하라.
멋진 사진 걸기
시각적인 임팩트를 위해 테마파크의 전경 이미지를 삽입하라.
(주의: img 요소는 닫는 태그가 없는 '빈 요소'이다!)
<img src="https://images.unsplash.com/photo-1656647657563-ae3274b59492?q=80&w=250&auto=format&fit=crop" alt="테마파크 사진">
💡 추가 미션: src 속성의 이미지 주소를 변경하여 다른 사진을 띄워보라.
✨ 팁: Unsplash에서 검색 후 사진에 우클릭하여 '이미지 주소 복사'하여 변경하라.
✨ 팁: Unsplash 주소 내 w=250 부분은 불러올 이미지의 너비를 의미한다.
예약 페이지로 가는 문 만들기
클릭 시 지정된 구역으로 이동하는 하이퍼링크를 구축하라.
힌트: <a> 태그 사용<a href="https://doroedu.net/">👉 티켓 예약하러 가기</a>
💡 추가 미션: href 속성의 주소를 원하는 다른 웹사이트 주소로 변경하라.
✨ 팁: target="_blank" 속성을 추가하면 새 탭에서 열리게 할 수 있다.
✨ 팁: rel="noopener noreferrer" 속성은 보안을 위해 추가를 권장한다.
방문자 이름 묻기
방문객이 자신의 이름을 직접 입력할 수 있는 텍스트 필드를 생성하라.
(주의: input 요소는 닫는 태그가 없는 '빈 요소'이다!)
<input type="text" placeholder="이름을 입력하세요">
💡 추가 미션: 아래 표를 참고하여 type 속성값을 다양하게 변경해 보라.
| type 속성값 | 설명 및 역할 |
|---|---|
text | 일반적인 짧은 텍스트(이름 등)를 입력받습니다. |
password | 비밀번호 (입력 시 글자가 가려집니다) |
color | 원하는 색상을 고를 수 있는 팔레트가 나옵니다. |
date | 날짜를 선택할 수 있는 달력이 나타납니다. |
number | 숫자만 입력할 수 있습니다. |
checkbox | 선택/해제가 가능한 네모난 체크박스 |
radio | 동그란 라디오 버튼 (보통 여러 개 중 하나 선택 시 사용) |
방명록 남기기
대량의 텍스트를 입력할 수 있는 다중행 입력창을 확보하라.
힌트: <textarea> 태그 사용<textarea placeholder="도로랜드 기대평을 남겨주세요!" rows="4"></textarea>
💡 추가 미션: placeholder 속성의 내용을 나만의 재치 있는 문구로 바꾸어 보라.
제출 버튼 만들기
작성된 데이터를 서버로 전송하기 위한 실행 버튼을 구축하라.
힌트: <button> 태그 사용<button>제출하기</button>
소개 영역 박스 만들기 (섹션)
지금까지 만든 내용들을 예쁘게 하나로 묶을 수 있는 투명한 상자(구역)를 만들어라.
힌트: <div> 또는 <section> 태그 사용<div class="intro-box">
여기에 여러 내용들을 담을 수 있다!
</div>