html 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>롯데월드 어드벤처</title>
<link type="text/css" rel="stylesheet" href="css/main_style.css">
</head>
<body>
<header>
<div id="h_top">
<div id="h_top_wrap">
<nav class="m_nav">
<ul>
<li><a href="#">SEOUL SKY</a></li>
<li><a href="#">롯데월드 아쿠아리움</a></li>
<li><a href="#">롯데워터파크</a></li>
<li><a href="#">롯데월드 어드벤처 부산</a></li>
</ul>
</nav>
<nav class="t_nav">
<ul>
<li><a href="#">민속박물관</a></li>
<li><a href="#">아이스링크</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">회원가입</a></li>
<li><a href="#">KOR</a></li>
</ul>
</nav>
</div>
</div>
<div id="h_bottom">
<h1></h1>
<nav class="h_bottom_wrap">
<ul>
<li><a href="#" class="dbtn">즐길거리</a>
<!-- <div class="dcont">
<a href="#">어트랙션</a>
<a href="#">페스티벌</a>
<a href="#">공연</a>
<a href="#">다이닝/쇼핑</a>
<a href="#">다시만난월드:캐릭터전시회</a>
</div> -->
</li>
<li><a href="#">요금/우대혜택</a></li>
<li><a href="#">참여프로그램</a></li>
<li><a href="#">이용가이드</a></li>
<li><a href="#">소통서비스</a></li>
</ul>
</nav>
<nav class="h_right">
<li><a href="#">상품몰</a></li>
<li><a href="#">기업체</a></li>
<li><a href="#">단체</a></li>
<li><a href="#">예매</a></li>
<li><a href="#">검색</a></li>
</nav>
</div>
</header>
<section>
<div id="s_1">
<div class="slider">
<input type="radio" name="pto" id="pto1" checked>
<input type="radio" name="pto" id="pto2">
<input type="radio" name="pto" id="pto3">
<input type="radio" name="pto" id="pto4">
<input type="radio" name="pto" id="pto5">
<input type="radio" name="pto" id="pto6">
<input type="radio" name="pto" id="pto7">
<ul>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
<li>네번째</li>
<li>다섯번째</li>
<li>여섯번째</li>
<li>일곱번째</li>
</ul>
<p class="pto">
<label for="pto1">1</label>
<label for="pto2">2</label>
<label for="pto3">3</label>
<label for="pto4">4</label>
<label for="pto5">5</label>
<label for="pto5">6</label>
<label for="pto5">7</label>
</p>
</div>
</div>
<div id="time">
<a href="#">
<p>오늘의 파크 운영시간 10:00 ~ 21:00</p>
</a>
</div>
<div id="s_2">
<div class="d_1"><strong>나에게 꼭 맞는 혜택</strong> 알아볼까요? </div>
<div class="d_2">현재 진행 중인 할인혜택을 알아보세요.</div>
<div class="d_3">
<div>롯데월드카드</div>
<div>제휴카드 온라인 프로모션</div>
<div>카카오페이지로 가보자</div>
<div>교복우대</div>
</div>
</div>
<div id="s_3">
<div><a href="#">더 많은 혜택보기</a></div>
</div>
<div id="s_4">
<p>재미있고 즐거운 <strong>다양한 어트랙션!</strong></p>
<div class="s_box1">
<div><a href="#">아이와 함께</a></div>
<div><a href="#">야외에서 신나게</a></div>
<div><a href="#">실내에서 쾌적하게</a></div>
</div>
</div>
<div id="s_5">
<div>언더씨킹덤</div>
<div>유레카</div>
<div>점핑피쉬</div>
<div id="s_6">
<div>매직붕붕카</div>
<div>월드모노레일</div>
<div>키즈토리아</div>
<div id="s_7">
<div><a href="#">더 많은 어트랙션 보기</a></div>
<div><a href="#">윤휴정보 보러가기</a></div>
</div>
</section>
<footer>
</footer>
</body>
</html>html 문서 보기
Web Developer
Adds a toolbar button with various web developer tools.
chrome.google.com
어떤 방식으로 html 문서를 작성해야 하는지 애매했는데,
크롬 확장 프로그램을 사용해서 나름 쉽게 html의 뼈대가 되는 부분들을 리스트 형식으로 볼 수 있었다.
'공부기록 > 실습' 카테고리의 다른 글
| 연습 문제 1. 합격 여부 계산하기 (0) | 2023.03.08 |
|---|---|
| 사이트 그대로 따라 만들기(롯데월드 메인 페이지-css) (0) | 2023.03.04 |
| 교육원 사이트 만들기 정답 (0) | 2023.02.28 |
| 과제 교육원 사이트 만들기(CSS 연습) (0) | 2023.02.28 |
| 영역별로 레이아웃 만들기(이미지 포함) (0) | 2023.02.28 |
