<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)">
</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>
</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 class="nv2">
<nav> <!-- 로그인 -->
<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>
<div></div>
<!-- 슬라이드 쇼 이미지 -->
<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>
<!-- article 4개를 구체적으로 본문내용(베스트 셀러 목록, 자세한 항목) -->
<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" alt = "at-5">
트루케어 시카 인텐시브 밤 20,000원
</figcaption>
</figure>
</div>
<div class = "d2">
<figure>
<img src = "img/at1-img2.png" alt = "at-2">
<figcaption class = "fc2">
<img src = "img/at1-img6.png" alt = "at-6">
자연발효 에너지 오일 28,000원
</figcaption>
</figure>
</div>
<div class = "d3">
<figure>
<img src = "img/at1-img3.png" alt = "at-3">
<figcaption class = "fc3">
<img src = "img/at1-img7.png" alt = "at-7">
제주한란 인텐스 크림 28,000원
</figcaption>
</figure>
</div>
</article>
<article class = "at2">
<h3> Time Sale </h3>
<img src = "img/at1-img8.png">
<div id = "dv1"><h4>온라인 전용 제품 50% 할인 찬스!</h4><br>
<h5>포레스트포맨 핸섬키트</h5><br>
<h6>20,000원 -> 10,000원</h6><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 = "|1"></li>
<li><a href = "#">개인정도 처리방침<a></li>
<li class = "|1"></li>
<li><a href = "#">고객서비스센터<a></li>
<li class = "|1"></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-223-0987</li>
</ul>
</nav>
</footer>
</div>
</body>
/*
기능 : pc상태에서 보여주는 스타일시트 화면(main.css)
작성날짜 : 2023-04-26
작성자 : 홍길동
*/
/* 상단메뉴 부분 좌측상단에 고정 */
* {
margin:0;
padding:0;
background-color:azure;
}
/* 전체 컨테이너 영역(전체 넓이, 양쪽 여백 설정) */
.wrap {
/* width:70%; 양쪽 여백은 15% + 15% = 30% */
width:1000px;
margin:0 auto; /* 상단, 하단의 여백 = 0
좌,우 여백 = 자동으로 배분
*/
}
.hd2, .sc2, .sc3 {display:none;}
/* 로고 (left(x축) 들여쓰기, top(위 -> 아래로 이동한위치)y축) */
h1{
float:left;
position:relative;
left:3%;
top:30px; /* 맨 처음 나오는 이미지의 위치 설정 */
}
.nv1{
width:60%;
height:50px; /*회사로고 이미지와 같은 선을 맞추기 위해서*/
float:left;
border:1px solid black; /* 영역 확인용 */
position:relative; /* nv2 배치하기 때문에 */
left:5%;
top:30px;
z-index:5;
}
ul{
list-style: none; /* 메뉴 왼쪽 마크 없애기 */
}
/* 대상자:hover = 마우스를 가져다 대는 경우(mouseover)
Shopping, Event, About us 색깔 지정(배경색) */
.main1:hover {
background-color:mediumpurple;
color:white;
}
.main2:hover {
background:mediumpurple;
color:white;
}
.main3:hover{
background:mediumpurple;
color:white;
}
/* 1단계 메뉴의 위치 설정
거리감 : 조금 움직이는 경우 %보다는 px로 설정 할 것.
많이 움직이는 경우 %로 설정 할 것.
*/
.main1{
position:absolute; /* Shopping 글자를 배치 */
left:14%; /* 들여쓰기 2~3단계 메뉴와 겹치지 않는 범위 설정 */
top:10px;
}
.main2{
position:absolute; /* relative 사용 시 다른 태그를 참조하기 때문에 사용X */
left:40%;
top:10px;
}
.main3{
position:absolute;
right:17%;
/*left:66%;*/
top:10px;
}
/*
서브메뉴 안나오게 설정
1. absolute 사용 = top:-9999 를 이용해서 위로 배치
2. display:none(block, inline, inline-black)
*/
.sub{
/* display:none; 안보이는 부분은 보이게 설정해서 영역을 확인 후 나중에 최종설정 */
position:absolute; /* left, top을 이용해서 배치하기가 쉬움 */
left:14%;
top:40px;
border:1px solid black;
}
.sub li, .sub li > a{ /* 유형별 제품의 항목의 색깔은 purple */
z-index:15;
color:purple;
}
.sub1 {
float:right;
position:relative;
}