반응형
사진보고 그대로 만드는 실습 실시했습니다 :)
첫 번째 실습. 에버랜드 가이드
에버랜드 이용 안내
- 안전하고 즐거운 이용을 위하여 아래 물품의 반입을 제한합니다.
- 동물에게 음식을 주거나 플래시를 켜고 촬영하지 마세요.
- 가지고 오신 도시락은 피크닉 영역에서 이용해 주세요.
※ 대기 동선에서 기다리기 어려운 장애인 손님을 위하여 탑승 예약을 도와드리고 있으니 근무자에게 문의해 주시기 바랍니다.
대중교통 정보
- 지하철 이용
에버라인 종점에 내려서 셔틀버스(무료)로 에버랜드,
캐리비안 베이까지 이동.
※ 에버라인 운행시간 : 05:30~23:30
- 버스 이용
- 5002번 : 신논현역 - 강남역 - 양재역 경유
- 5700번 : 강변역 - 잠실역 - 송파역 - 수서역 경유
- 66-4번 : 수원역 - 수원 - 동백 - 용인 경유
1번 문제 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Everland Tour Guide</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body> <!-- 목표 시간 10분 --> <!-- 코드 쓸 때는 중간중간에 확인하는 작업이 필요함 -->
<h2> 에버랜드 이용 안내 </h2>
<ul>
<li> 안전하고 즐거운 이용을 위하여 아래 물품의 반입을 제한합니다. </li>
<li> 동물에게 음식을 주거나 플래시를 켜고 촬영하지 마세요. </li>
<li> 가지고 오신 도시락은 피크닉 영역에서 이용해 주세요. </li>
</ul>
<p> ※ 대기 동선에서 기다리기 어려운 장애인 손님을 위하여 탑승 예약을 도와드리고 있으니 근무자에게 문의해 주시기 바랍니다. </p>
<iframe width="400" height="225" src="https://www.youtube.com/embed/4iu9ChAPm3c?si=cNnvwMcP8mkO0b5d" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h2> 대중교통 정보 </h2>
<ol>
<li>
<h3> 지하철 이용 </h3> </li>
<p> 에버라인 종점에 내려서 셔틀버스(무료)로 에버랜드, <br /> <!-- 상속 단계 이해 p -> li -> ol -> body -> html -->
캐리비안 베이까지 이동. <br />
※ 에버라인 운행시간 : 05:30~23:30 </p>
<img src="./Everlandline.png"/>
<li>
<h3> 버스 이용 </h3></li>
<p> - 5002번 : 신논현역 - 강남역 - 양재역 경유 <br />
- 5700번 : 강변역 - 잠실역 - 송파역 - 수서역 경유 <br />
- 66-4번 : 수원역 - 수원 - 동백 - 용인 경유
</p>
</ol>
</body>
</html>
두 번째 실습. 게시판 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<form>
카테고리
<select>
<option>공지사항</option>
<option>자유게시판</option>
<option>익명게시판</option>
<option>Q&A</option>
</select> <br />
<input type="text" placeholder="작성자" />
<input type="password" placeholder="비밀번호" /> <br />
<hr />
<input type="text" maxlength="50" placeholder="게시물 제목 입력" /> <br />
<hr />
<textarea cols="70" rows="20" placeholder="게시물 내용 입력"> </textarea> <br />
공개선택
<input type="radio" name="공개선택" /> 공개글
<input type="radio" name="공개선택" /> 비공개글 <br />
공유선택
<input type="checkbox" /> 카카오톡
<input type="checkbox" /> 트위터
<input type="checkbox" /> 네이버카페 <br />
작성일자
<input type="date" />
작성시간
<input type="time" />
<hr />
첨부파일
<input type="file" /> <br /> <br />
<input type="button" value="목록보기"/> <!-- value 속성으로 버튼에 텍스트 입력 -->
<input type="submit" value="글쓰기"/>
<input type="reset" value="다시쓰기"/>
</form>
</body>
</html>
그럼 내일도 파이팅하겠습니다
반응형