# main 페이지 완성
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>메인페이지(main(2)).html</title>
<!--
media 속성(반응형) : 웹의 크기를 지정(해상도)
screen and (min-width:768px(최소 해상도))
지정해 놓은 해상도 이하면 main-1.css
-->
<link href = "css/main.css" rel="stylesheet" type = "text/css" media="screen and (min-width:768px)">
<link href = "css/main-1.css" rel="stylesheet" type = "text/css" media="screen and (max-width:768px)">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "js/main.js"></script>
<script src = "js/jquery.cycle2.js"></script>
</head>
<body>
<div class="wrap"><!-- 본문내용 전체를 묶어주는 영역(container) -->
<header class="hd1"><h1>innisfree</h1><!-- 회사로고 이미지 링크 -->
<nav class="nv1">
<div><a href="#" class="main1">Shopping</a>
<!-- -->
<ul class="sub">
<li><a href="#" class="a1">유형별 제품</a>
<!-- -->
<ul class="sub1">
<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>
<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>
<li><a href="#">남성</a></li>
</ul>
<!-- -->
</li>
<li><a href="#">라인별 제품</a></li>
<li><a href="#">온라인 전용</a></li>
<li><a href="#">온라인 핫딜</a></li>
</ul>
<!-- -->
</div>
<div><a href="#" class="main2">Event</a></div>
<div><a href="aboutus.html" class="main3">About Us</a></div>
</nav><!-- 상단메뉴-->
<nav class="nv2">
<ul>
<li><a href="login.html">Login</a></li>
<li><a href="#">My Page</a></li>
</ul>
</nav><!-- 로그인 -->
</header>
<header class="hd2"><img src="img/hd2.png" alt="mb"></header>
<!-- 슬라이드 쇼 이미지(pc) -->
<div class="cycle-slideshow">
<img src="img/sc1-img3.jpg" alt="sc-3">
<img src="img/sc1-img2.jpg" alt="sc-2">
<img src="img/sc1-img1.jpg" alt="sc-1">
</div>
<!-- 소제목이 있는 단락(tablet) -->
<section class="sc2"><img src="img/sc2.png" alt="sc2"></section>
<section class="sc3"><img src="img/sc3.png" alt="sc3"></section>
<!-- article4개를 구체적으로 본문내용(베스트셀러목록,자세한 항목) -->
<article class="at1">
<h3>BEST SELLER</h3>
<div class="d1">
<figure>
<img src="img/at1-img1.png" alt="at-1">
<figcaption class="fc1">
<img src="img/at1-img5.png">
트루케어 시카 인텐시브 밤 20,000원
</figcaption>
</figure>
</div>
<!-- d2 -->
<div class="d2">
<figure>
<img src="img/at1-img2.png" alt="at-2">
<figcaption class="fc2">
<img src="img/at1-img6.png">
자연발효 에너지 오일 28,000원
</figcaption>
</figure>
</div>
<!-- d3 -->
<div class="d3">
<figure>
<img src="img/at1-img3.png" alt="at-3">
<figcaption class="fc3">
<img src="img/at1-img7.png">
제주한란 인텐스크림 28,000원
</figcaption>
</figure>
</div>
</article>
<article class="at2">
<h3>Time Sale</h3>
<img src="img/at1-img8.png">
<div id="dv1">
<h6>온라인 전용 제품 50% 할인 찬스!</h6><br>
<h5>포레스트포맨 핸섬키트</h5><br>
<h4>20,000원 -> 10,000원</h4><br>
<time> 12:00 </time><br>
<button id = "btn1">장바구니</button>
<button id = "btn2">제품 상세 보기</button>
</div>
</article>
<article class="at3">
<embed src="vd/main_vd.mp4" [width:"450px" height:"300px"]>
</article>
<article class="at4">
<img src="img/vd.png" alt="review">
</article>
<!-- footer -->
<footer class="ft1">
<nav class="nv3">
<ul>
<li><a href="#">서비스 이용약관</a></li>
<li class="l1">|</li>
<li><a href="#">개인정보처리방침</a></li>
<li class="l1">|</li>
<li><a href="#">고객서비스센터</a></li>
<li class="l1">|</li>
<li><a href="#">영상정보처리 운영방침</a></li>
</ul>
</nav>
<nav class="nv4">
<ul>
<li>facebook:test@naver.com</li>
<li>e-mail:test@daum.net</li>
<li>Tel:02-123-0987</li>
<li>Fax:02-345-0987</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>'국비학원 > 공부' 카테고리의 다른 글
| 9일차 oracle(2) (0) | 2023.05.04 |
|---|---|
| 8일차 oracle(1) (0) | 2023.05.04 |
| 6일차 jsp(미니 프로젝트) (0) | 2023.04.28 |
| 5일차 jsp(Array) ~ DOM (0) | 2023.04.28 |
| 4일차 jsp(2) (0) | 2023.04.24 |