여행사 페이지 만들기
발행: (2026년 1월 12일 오후 06:00 GMT+9)
3 min read
원문: Dev.to
Source: Dev.to
프로젝트 개요
어제 나는 freeCodeCamp의 Responsive Web Design 커리큘럼에 포함된 Travel Agency 페이지 실습을 완료했다. 이 실습은 완성된 제품 예시와 충족해야 할 일련의 사용자 스토리를 제공한다. 나는 지시사항에 사용된 이탈리아 예시 대신 영국 남서부(웨스트 컨트리)를 보여주기로 선택했다.
HTML 보일러플레이트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Travel Agency Page</title>
</head>
<body>
<h1>Visit the West Country</h1>
<p>Explore the hidden gems of South-West England</p>
<section id="packages">
<h2>Packages</h2>
<p>We offer a wide range of travel opportunities</p>
<ul>
<li><a href="https://www.freecodecamp.org/learn">Group Travels</a></li>
<li><a href="https://www.freecodecamp.org/learn">Private Tours</a></li>
</ul>
</section>
<section id="itineraries">
<h2>Top Itineraries</h2>
<figure>
<a href="https://www.freecodecamp.org/learn">
<img src="https://www.exeter-cathedral.org.uk/wp-content/uploads/2024/03/Cathedral0008-1-copy.jpg" alt="A view inside Exeter Cathedral">
</a>
<figcaption>Exeter Cathedral</figcaption>
</figure>
<figure>
<a href="https://www.freecodecamp.org/learn">
<img src="https://www.breakthroughtransformationtrust.org/wp-content/uploads/2022/11/PZ_Misc_14-04-21_AD_LR-32.jpg.webp" alt="Two Giraffes at Paignton Zoo">
</a>
<figcaption>Giraffes at Paignton Zoo</figcaption>
</figure>
<figure>
<a href="https://www.freecodecamp.org/learn">
<img src="https://eastdevonexcellence.co.uk/wp-content/uploads/2023/12/Pecorama2.jpg" alt="Miniature steam train and carriages at Pecorama">
</a>
<figcaption>Miniature Railway at Pecorama</figcaption>
</figure>
</section>
</body>
</html>페이지 내용 요약
- 주요 헤딩: “Visit the West Country”
- 소개 문단: “Explore the hidden gems of South‑West England”
- 패키지 섹션: freeCodeCamp로 연결되는 “Group Travels”와 “Private Tours”를 나열
- Top Itineraries: Exeter Cathedral, Paignton Zoo의 기린, Pecorama의 미니어처 철도를 보여주는 세 개의 figure와 이미지 및 캡션
오디오 및 비디오 이론
실습을 마친 후, 수업에서는 HTML <audio>와 <video> 요소를 다루며, 컨트롤이 포함된 미디어를 삽입하는 방법과 크로스‑브라우저 호환성을 위해 여러 소스 포맷을 제공하는 중요성을 설명했다. 이 이론은 곧 진행될 워크숍에서 HTML 비디오 플레이어와 오디오‑비디오 복합 플레이어를 구축하는 데 필요한 준비가 된다.
계속 코딩하세요, 여러분!