[미니프로젝트] html, css로 만드는 여행 계획표 - 2
2023. 3. 6. 10:09
본문
<!--day1.html-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>첫날</title>
<link rel="stylesheet" href="css/plan.css">
</head>
<body>
<header>
<button type="button" class="gobackbutton" onclick="location.href='main.html'"><img src="image/gobackbutton.png" alt="gobackbutton"></button>
<h1>첫날</h1>
</header>
<main>
<section>
<h2>아침</h2>
<table>
<thead>
<tr>
<th>시간</th>
<th>내용</th>
</tr>
</thead>
<tbody>
<tr>
<td>09:55</td>
<td>김해 공항 출발(7시 까지 공항 도착할것)<br>(<a href="https://www.wifidosirak.com/v3/reserv_delieverplace.aspx#" target="_blank">포켓 와이파이 수령</a>)</td>
</tr>
<tr>
<td>10:50</td>
<td>후쿠오카 공항 도착(<a href="https://kepper.tistory.com/802" target="_blank">교통카드 발급</a>)</td>
</tr>
<tr>
<td></td>
<td><a href="https://www.google.co.kr/maps/place/%EB%9D%BC%EB%9D%BC%ED%8F%AC%ED%8A%B8+%ED%9B%84%EC%BF%A0%EC%98%A4%EC%B9%B4/@33.5706687,130.4453428,15.46z/data=!3m1!5s0x35419057a60ac58d:0xa399b820d4dcbaca!4m6!3m5!1s0x354191e79a67d911:0xe57737261ee4d100!8m2!3d33.5646548!4d130.4400024!16s%2Fg%2F11sr8rncn7?hl=ko" target="_blank">라라포트</a>까지 걸어가기. 라라포트 구경</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>점심</h2>
<table>
<thead>
<tr>
<th>시간</th>
<th>내용</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>라라포트에서 숙소까지 버스로</td>
</tr>
<tr>
<td>12:00</td>
<td>숙소에 짐놓고 오기. 점심 식사(<a href="https://www.google.com/maps/place/Curry+Kinoshita/@33.5782824,130.4046118,18z/data=!3m1!5s0x3541919c205afc13:0xb86ef3ed8b0a501d!4m15!1m8!2m7!1z7J2M7Iud7KCQ!3m5!2z64-I7YKk7Zi47YWMIO2bhOy_oOyYpOy5tCDthZDsp4Qg67O47KCQ!3s0x35419185aa94d88f:0x785492614544715a!4m2!1d130.3979517!2d33.5864667!3m5!1s0x3541919c20fc1db5:0xf8e4e37ab860cda3!8m2!3d33.5796272!4d130.4056217!16s%2Fg%2F1tdgs567" target="_blank">카레 키노시타</a>)</td>
</tr>
<tr>
<td></td>
<td>버스타고 텐진역으로 가기. 텐진 구경<br><a href="https://www.google.co.kr/maps/place/%ED%8C%8C%EB%A5%B4%EC%BD%94%EB%B0%B1%ED%99%94%EC%A0%90/@33.5906883,130.3983943,19.25z/data=!3m1!5s0x3541918fefb4e511:0x1308381a969e72e0!4m6!3m5!1s0x3541918f00155555:0x468bf115d33eede0!8m2!3d33.5907445!4d130.3986652!16s%2Fg%2F12qbhb677?hl=ko" target="_blank">파르코 백화점</a>, <a href="https://twitter.com/claboforeign/status/926286872661422080" target="_blank">카드라보</a></td>
</tr>
<tr>
<td></td>
<td> 텐진에서 지하철타고 하카타로 가기. 하카타 구경<br><a href="https://www.google.co.kr/maps/place/%EC%95%84%EB%AE%A4%ED%94%8C%EB%9D%BC%EC%9E%90+%ED%95%98%EC%B9%B4%ED%83%80/@33.5899855,130.4199318,18.63z/data=!3m1!5s0x354191b808122eff:0xdb78b1ed04a82d0!4m6!3m5!1s0x354191c7ea885905:0x56198a5b265cebf4!8m2!3d33.58981!4d130.4204315!16s%2Fg%2F1td5zht6?hl=ko" target="_blank">포켓몬 센터(아뮤플라자 8층)</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>저녁</h2>
<table>
<thead>
<tr>
<th>시간</th>
<th>내용</th>
</tr>
</thead>
<tbody>
<tr>
<td>18:00</td>
<td>저녁 식사(<a href="https://www.google.co.kr/maps/place/%EB%A9%98%EC%95%BC%ED%83%80%EC%9D%B4%EC%8A%A8/@33.5875041,130.4144721,19z/data=!3m1!5s0x354191be97bcf615:0xc10b8feee4e232cf!4m6!3m5!1s0x3541910b6fbc2799:0x34903e9ef4ab1b41!8m2!3d33.5874225!4d130.4147189!16s%2Fg%2F11fptz7qt1?hl=ko" target="_blank">멘야 타이슨</a>)</td>
</tr>
<tr>
<td></td>
<td><a href="https://www.google.co.kr/maps/place/%EC%BA%90%EB%84%90+%EC%8B%9C%ED%8B%B0+%ED%95%98%EC%B9%B4%ED%83%80/@33.5898327,130.4113612,18z/data=!4m6!3m5!1s0x354191958981c361:0xe0edba177a7419d1!8m2!3d33.5897944!4d130.4111028!16s%2Fm%2F04zxt4t?hl=ko" target="_blank">캐널시티</a>로 걸어가기. 캐널시티 구경<br></td>
</tr>
<tr>
<td></td>
<td>편의점 들러서 간식사서 숙소까지 걸어가기</td>
</tr>
</tbody>
</table>
</section>
</main>
</body>
</html>
<!--day2-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>둘째 날</title>
<link rel="stylesheet" href="css/plan.css">
</head>
<body>
<header>
<button type="button" class="gobackbutton" onclick="location.href='main.html'"><img src="image/gobackbutton.png" alt="gobackbutton"></button>
<h1>둘째 날</h1>
</header>
<main>
<section>
<h2>아침</h2>
<table>
<thead>
<tr>
<th>시간</th>
<th>내용</th>
</tr>
</thead>
<tbody>
<tr>
<td>08:00</td>
<td>아침 식사(편의점 도시락)</td>
</tr>
<tr>
<td></td>
<td>버스타고 <a href="https://www.google.co.kr/maps/search/%ED%9B%84%EC%BF%A0%EC%98%A4%EC%B9%B4+%EC%98%A4%ED%98%B8%EB%A6%AC+%EA%B3%B5%EC%9B%90/@33.5862905,130.3744406,16.25z?hl=ko" target="_blank">오호리 공원</a>으로(입장료 250엔)</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>점심</h2>
<table>
<thead>
<tr>
<th>시간</th>
<th>내용</th>
</tr>
</thead>
<tbody>
<tr>
<td>12:00</td>
<td>점심 식사(<a href="https://www.google.co.kr/maps/place/%EC%8B%9C%EB%82%98%EB%A6%AC/@33.5909,130.3789415,17z/data=!4m14!1m7!3m6!1s0x3541922e08cf93b5:0x61e920b8b91649d8!2z7Iuc64KY66as!8m2!3d33.5908956!4d130.3811302!16s%2Fg%2F1vcjk0j2!3m5!1s0x3541922e08cf93b5:0x61e920b8b91649d8!8m2!3d33.5908956!4d130.3811302!16s%2Fg%2F1vcjk0j2?hl=ko" target="_blank">시나리</a>, <a href="https://www.google.co.kr/maps/place/%EC%9D%B4%EC%B9%98%EC%A0%A0%EB%A9%94%EC%8B%9C+%EC%95%84%EC%98%A4%ED%82%A4%EB%8F%84/@33.586811,130.3944682,18z/data=!4m6!3m5!1s0x3541918685f1cd19:0xfb063c989022de4a!8m2!3d33.5871122!4d130.3950134!16s%2Fg%2F1tfb_t2t?hl=ko" target="_blank">이치젠메시 아오키도</a>, <a href="https://www.google.co.kr/maps/place/%EC%95%84%EC%82%AC%EC%95%BC%EB%A7%88/@33.5877162,130.3948466,18z/data=!3m1!4b1!4m6!3m5!1s0x35419185da079c1b:0x783c9ee8ce439171!8m2!3d33.587714!4d130.3959409!16s%2Fg%2F1td3ct7k?hl=ko" target="_blank">아사야마</a>. 시나리 웨이팅 심함.)</td>
</tr>
<tr>
<td></td>
<td><a href="https://www.google.co.kr/maps/place/%EC%88%98%EC%9A%94%EC%9D%BC%EC%9D%98+%EC%95%A8%EB%A6%AC%EC%8A%A4+%ED%9B%84%EC%BF%A0%EC%98%A4%EC%B9%B4%EC%A0%90/@33.5863588,130.3950742,18z/data=!3m1!5s0x3541918680277cfb:0x3039b15c936da87e!4m6!3m5!1s0x3541918698d40001:0x802d5d3e970cfe68!8m2!3d33.586361!4d130.395219!16s%2Fg%2F11byxf39_r?hl=ko" target="_blank">수요일의 앨리스</a>, <a href="https://www.google.co.kr/maps/place/Irie+Books/@33.5876355,130.3951311,18z/data=!4m6!3m5!1s0x354191867c6c34c5:0xf7c5ba150d340557!8m2!3d33.587669!4d130.395174!16s%2Fg%2F1vxfxyq6?hl=ko" target="_blank">Irie books</a>, 주변 거리 구경</td>
</tr>
<tr>
<td></td>
<td>버스 타고 일단 숙소.<br>수건+샤워타올+칫솔+치약 챙겨서 나오기</td>
</tr>
<tr>
<td></td>
<td>지하철타고 오하시역으로 가기<br>(니시테츠 텐진오무타선 히라오->오하시).</td>
</tr>
<tr>
<td></td>
<td>오하시역에서 세이류 온천 셔틀버스 타기.<br>(<a href="https://www.nakagawaseiryu.jp/pdf/bus_stop_20221223.pdf" target="_blank">버스 정류장</a>, <a href="https://www.nakagawaseiryu.jp/pdf/bus_time_20221223.pdf" target="_blank">버스 시간표</a>)</td>
</tr>
<tr>
<td></td>
<td>온천 즐기기~</td>
</tr>
<tr>
<td></td>
<td>온천에서 셔틀버스 타고 오하시역으로 돌아오기</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>저녁</h2>
<table>
<thead>
<tr>
<th>시간</th>
<th>내용</th>
</tr>
</thead>
<tbody>
<tr>
<td>18:30</td>
<td>저녁 식사(<a href="https://www.google.co.kr/maps/place/Takamoto/@33.5565749,130.4284333,19z/data=!4m14!1m7!3m6!1s0x3541910351384671:0x77ac114b5de7d31f!2z7Jik7ZWY7IucIOyXrQ!8m2!3d33.559134!4d130.4265606!16s%2Fm%2F04jdsbf!3m5!1s0x3541911d1e3f6477:0x110c63cae72dd300!8m2!3d33.5564453!4d130.4287904!16s%2Fg%2F1q64f405d?hl=ko" target="_blank">타카모토</a>)</td>
</tr>
<tr>
<td></td>
<td>숙소로 돌아가기</td>
</tr>
<tr>
<td></td>
<td>숙소 근처 <a href="https://www.google.com/maps/place/%E9%AB%98%E7%A0%82%E6%B8%B8%E5%BF%83/@33.5790318,130.4066592,17.5z/data=!4m6!3m5!1s0x3541919ebb2137b9:0xc8ae031a926dedd0!8m2!3d33.579922!4d130.40651!16s%2Fg%2F1tjkckrg" target="_blank">이자카야</a></td>
</tr>
</tbody>
</table>
</section>
</main>
</body>
</html>
<!--day3.html-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>셋째 날</title>
<link rel="stylesheet" href="css/plan.css">
</head>
<body>
<header>
<button type="button" class="gobackbutton" onclick="location.href='main.html'"><img src="image/gobackbutton.png" alt="gobackbutton"></button>
<h1>셋째 날</h1>
</header>
<main>
<section>
<h2>아침</h2>
<table>
<thead>
<tr>
<th>시간</th>
<th>내용</th>
</tr>
</thead>
<tbody>
<tr>
<td>08:00</td>
<td>아침 식사(편의점 도시락)</td>
</tr>
<tr>
<td></td>
<td>버스타고 <a href="https://www.google.co.kr/maps/place/%EC%B9%B4%EC%99%80%EB%B0%94%ED%83%80+%EC%83%81%EC%A0%90%EA%B0%80/@33.5936692,130.40792,18.25z/data=!4m6!3m5!1s0x354191eb4d562889:0x7cb17c65cc4038a8!8m2!3d33.5935617!4d130.4083601!16s%2Fg%2F1232v3r2?hl=ko" target="_blank">카와바타 상점가</a>로.</td>
</tr>
<tr>
<td></td>
<td>카와바타 상점가 구경. <br>구경하면서 점심 식사 고르기</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>점심</h2>
<table>
<thead>
<tr>
<th>시간</th>
<th>내용</th>
</tr>
</thead>
<tbody>
<tr>
<td>12:00</td>
<td>점심 식사(카와바타 상점가에서 즉흥으로)</td>
</tr>
<tr>
<td></td>
<td>카와바타 상점가에서 하카타역으로 가기.<br>(공항선 나카스카와바타 -> 하카타)</td>
</tr>
<tr>
<td></td>
<td>하카타역에서 다자이후행 버스 타기.<br>(<a href="https://sungjapan.tistory.com/171" target="_blank">가는 법 상세</a>)</td>
</tr>
<tr>
<td></td>
<td>다자이후 구경</td>
</tr>
<tr>
<td></td>
<td>버스 타고 하카타역으로 오기.</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>저녁</h2>
<table>
<thead>
<tr>
<th>시간</th>
<th>내용</th>
</tr>
</thead>
<tbody>
<tr>
<td>18:00</td>
<td>저녁 식사(<a href="https://www.google.co.kr/maps/place/%EC%9D%B4%EC%B9%98%EC%9D%B4%EC%8A%A4%EC%8B%9C/@33.5820054,130.402823,17.75z/data=!3m1!5s0x3541919b9b1bfdc5:0xd9d982794d7f5f7!4m6!3m5!1s0x3541919b9b0f3261:0xd14e3c3d2174201f!8m2!3d33.5823346!4d130.4036521!16s%2Fg%2F12qfdnth_?hl=ko" target="_blank">이치이 스시</a>)</td>
</tr>
<tr>
<td></td>
<td>집가기 전 자유시간</td>
</tr>
</tbody>
</table>
</section>
</main>
</body>
</html>
<!--day4.html-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>넷째 날</title>
<link rel="stylesheet" href="css/plan.css">
</head>
<body>
<header>
<button type="button" class="gobackbutton" onclick="location.href='main.html'"><img src="image/gobackbutton.png" alt="gobackbutton"></button>
<h1>넷째 날</h1>
</header>
<main>
<section>
<h2>아침</h2>
<table>
<thead>
<tr>
<th>시간</th>
<th>내용</th>
</tr>
</thead>
<tbody>
<tr>
<td>06:00</td>
<td>아침 식사(편의점 도시락)</td>
</tr>
<tr>
<td></td>
<td>숙소에서 야쿠인역까지 걸어가기.<br>(숙소에서 야쿠인역까지 걸어서 10분)</td>
</tr>
<tr>
<td></td>
<td>야쿠인역에서 하카타역으로 가기.<br>(나나쿠마선 야쿠인 -> 공항선 하카타)<br>(15분 정도 소요 예상)</td>
</tr>
<tr>
<td></td>
<td>하카타역에서 후쿠오카 공항역으로 가기.<br>(공항선 하카타 -> 후쿠오카공항)<br>(5분 정도 소요)</td>
</tr>
<tr>
<td>07:25</td>
<td>공항 도착</td>
</tr>
<tr>
<td>09:25</td>
<td>집으로~~~~</td>
</tr>
</tbody>
</table>
</section>
</main>
</body>
</html>
<!--etc.html-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>참고</title>
<link rel="stylesheet" href="css/etc.css">
</head>
<body>
<header>
<button type="button" class="gobackbutton" onclick="location.href='main.html'"><img src="image/gobackbutton.png" alt="gobackbutton"></button>
<h1>참고</h1>
</header>
<main>
<section>
<ul>
<li><a href="https://www.wifidosirak.com/v3/oversea_reservation.aspx?connet=con" target="_blank">와이파이 도시락 쓰기전 확인</a></li>
<li><a href="https://www.vjw.digital.go.jp/main/#/vjwpco001" target="_blank">visit japab web</a></li>
<li><a href="https://www.google.co.kr/maps/place/1-ch%C5%8Dme-15-10+Takasago,+Chuo+Ward,+Fukuoka,+810-0011+%EC%9D%BC%EB%B3%B8/@33.5790746,130.4071524,19.75z/data=!4m10!1m2!2m1!1zSmFwYW4sIOOAkjgxMC0wMDExIEZ1a3Vva2Eta2VuLCBGdWt1b2thLXNoaSwgQ2jFq8WNLWt1LCBUYWthc2FnbywgMSBDaG9tZeKIkjE14oiS77yR77yQIOODq-ODjeODg-OCteODs-OCue-8ku-8keiWrOmZouOCteOCpuOCuQ!3m6!1s0x3541919ec1fea8db:0x17525c950fd416f!8m2!3d33.5792005!4d130.4073118!15sCn9KYXBhbiwg44CSODEwLTAwMTEgRnVrdW9rYS1rZW4sIEZ1a3Vva2Etc2hpLCBDaMWrxY0ta3UsIFRha2FzYWdvLCAxIENob21l4oiSMTXiiJLvvJHvvJAg44Or44ON44OD44K144Oz44K577yS77yR6Jas6Zmi44K144Km44K5kgEQZ2VvY29kZWRfYWRkcmVzc-ABAA!16s%2Fg%2F11clmys06_?hl=ko" target="_blank">숙소 위치</a></li>
<li>예상 여행 경비 = 교통비 1680엔 + 식비 8300엔 + 교통카드 보증금 500엔 + 오호리 공원 입장료 250엔 = 10730엔</li>
<li>멘야 타이슨 - 屋台(やたい), 濃厚(のうこう), 煮玉子(にたまご), 替玉(かえだま)</li>
<li>아오키도 - 炒め(いため)</li>
<li>돈키호테에서 간식 + 동전 파스 사올 것</li>
</ul>
</section>
</main>
</body>
</html>
/*plan.css*/
@charset "utf-8";
*, *::after, *::before {
box-sizing: border-box;
}
@media screen and (max-width: 767px) {
body {
margin: 0;
font-family: '나눔 고딕', NanumGothic, '돋움', Dotum, sans-serif;
background-color: #53b9f9;
}
header {
height: 50px;
background-color: white;
}
.gobackbutton {
display: inline-block;
background-color: black;
background: inherit;
border:none;
box-shadow:none;
border-radius:0;
margin-left: 20px;
padding:0;
overflow:visible;
cursor:pointer;
vertical-align: -6px;
}
.gobackbutton img {
width: 20px;
height: 20px;
}
h1 {
display: inline-block;
margin: 0px;
font-size: 12px;
color: #025c94;
text-align: left;
line-height: 50px;
text-indent: 10px;
}
section {
margin: 20px 20px 40px;
}
section h2 {
margin: 15px 0;
font-size: 15px;
color: white;
}
table {
border-top: 1px solid white;
border-bottom: 1px solid white;
border-collapse: collapse;
font-size: 12px;
color: white;
text-align: center;
}
table a {
color: white;
}
tr {
height: 30px;
}
th:first-child, td:first-child {
width: 10%;
}
th, td {
width: 100%;
padding: 0;
}
td {
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding: 6px;
}
}
/*etc.css*/
@charset "utf-8";
*, *::after, *::before {
box-sizing: border-box;
}
@media screen and (max-width: 767px) {
body {
margin: 0;
font-family: '나눔 고딕', NanumGothic, '돋움', Dotum, sans-serif;
background-color: #53b9f9;
}
header {
height: 50px;
background-color: white;
}
.gobackbutton {
display: inline-block;
background-color: black;
background: inherit;
border:none;
box-shadow:none;
border-radius:0;
margin-left: 20px;
padding:0;
overflow:visible;
cursor:pointer;
vertical-align: -6px;
}
.gobackbutton img {
width: 20px;
height: 20px;
}
h1 {
display: inline-block;
margin: 0px;
font-size: 12px;
color: #025c94;
text-align: left;
line-height: 50px;
text-indent: 10px;
}
section {
margin: 20px;
}
ul {
margin: 0;
padding-left: 20px;
}
li {
font-size: 13px;
color: white;
margin-bottom: 10px;
}
li a {
color: white;
}
}
n일차 여행계획들은 처음 계획했던대로 테이블을 사용해서 정리했다.
스크롤이 너무 길어지면 위로 올라가는 버튼도 만드려고 했는데 딱히 필요없는 것 같아서 따로 만들진 않았다.
body {overflow: hidden} 은 있어도 의미가 없어보여서 css 코드에서 제외했다.
특히 둘째날 같은 경우에 해당 속성을 추가하면 스크롤 자체가 안되서 불편했다.
참고는 ul를 사용해서 간단하게 표현했다.
나는 html과 css파일, image파일이 같은 곳에만 있으면 모바일이라도 서버 없이
크롬이나 삼성 인터넷 브라우저로 구현한 모습 그대로 볼 수 있을 거라 생각했는데 그게 아니었다.
어찌됐든 서버가 필요하게 돼서 구글 플레이에서 HTTP File Server라는 앱을 설치받았다.
내 휴대폰을 웹 서버로 해서 파일들을 열 수 있게 했다.
복잡한 html 코드도 아니고 css로 화려하게 디자인한 것은 아니지만
내 손으로 만든걸 유용하게 쓸 수 있어서 기분이 좋다.
'프로젝트' 카테고리의 다른 글
| [부스트코스/웹 UI 개발] 프로젝트 C (0) | 2023.04.11 |
|---|---|
| [부스트코스/웹 UI 개발] 프로젝트 B (0) | 2023.04.03 |
| [미니프로젝트] html, css로 만드는 여행 계획표 - 1 (0) | 2023.02.28 |
| [미니프로젝트] html, css로 만드는 여행 계획표 - 0 (0) | 2023.02.28 |
| [부스트코스/웹 UI 개발] 프로젝트 A (0) | 2023.02.15 |
