<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/705381df09.js" crossorigin="anonymous"></script>
<script src="./js/dropdown.js" defer></script>
<script src="./js/slider.js" defer></script>
<script src="./js/tab.js" defer></script>
<link rel="stylesheet" href="./css/reset.css">
<title>코난의집</title>
</head>
<body>
<header>
<div class="container">
<div class="header">
<!-- 헤더 왼쪽 -->
<div class="ht_left">
<!-- 헤더 왼쪽 로고 -->
<div class="ht_left01">
<a href="#"><img src="./img/logo.png" alt="오늘의집logo"></a>
</div>
<!-- 헤더 왼쪽 메뉴 -->
<div class="ht_left02">
<a href="#">커뮤니티</a>
<a href="https://store.ohou.se/">쇼핑</a>
<a href="https://ohou.se/experts">인테리어/생활</a>
</div>
</div>
<!-- 헤더 오른쪽 -->
<div class="ht_right">
<!-- 헤더 오른쪽 검색창 -->
<div class="ht_right01">
<i class="fa-solid fa-magnifying-glass glass"></i>
<input type="text" placeholder="통합검색">
</div>
<!-- 헤더 오른쪽 메뉴 -->
<div class="ht_right02">
<a href="https://ohou.se/cart"><i class="fa-solid fa-cart-shopping"></i></a>
<a href="https://ohou.se/users/sign_in?redirect_to=%2Fexperts" class="ht_a01">로그인</a>
<a href="https://ohou.se/normal_users/new" class="ht_a02">회원가입</a>
<a href="https://ohou.se/customer_center">고객센터</a>
</div>
<!-- 헤더 오른쪽 드롭다운 -->
<div class="ht_right03">
<ul id="ht_mainList">
<li>글쓰기<i class="fa-solid fa-chevron-down down"></i>
<ul id="ht_subList" class="ht_display_none">
<li><img src="./img/dropicon01.png">
<div>
<h3>사진/동영상 올리기</h3>
<p>우리집의 공간과 나의 일상을 기록해 보세요.</p>
</div>
</li>
<li><img src="./img/dropicon02.png">
<div>
<h3>집들이 글쓰기</h3>
<p>집에 관한 이야기를 글로 작성해 보세요.</p>
</div>
</li>
<li><img src="./img/dropicon03.png">
<div>
<h3>노하우 글쓰기</h3>
<p>다양한 인테리어 노하우를 공유해 주세요.</p>
</div>
</li>
<li><img src="./img/dropicon04.png">
<div>
<h3>상품 리뷰 쓰기</h3>
<p>상품 리뷰를 작성하고 포인트도 받아 보세요.</p>
</div>
</li>
<li><img src="./img/dropicon05.png">
<div>
<h3>시공 전문가 리뷰쓰기</h3>
<p>시공 전문가 리뷰룰 작성하고 포인트도 받아보세요.</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<!-- 메뉴 -->
<section id="nav">
<div class="container">
</div>
</section>
<!-- 메인 -->
<section id="main">
<div class="container">
</div>
</section>
<!-- 서비스 -->
<section id="service">
<div class="container">
</div>
</section>
<section id="popular">
<div class="container">
</div>
</section>
<section id="recommend">
<div class="container">
</div>
</section>
<section id="category">
<div class="container">
</div>
</section>
<section id="deals">
<div class="container">
</div>
</section>
<section id="reviews">
<div class="container">
</div>
</section>
<section id="special">
<div class="container">
</div>
</section>
<section id="best">
<div class="container">
</div>
</section>
<footer>
<div class="container">
</div>
</footer>
</body>
</html>
/* :root {
--main-color: #0AA5FF;
} */
/* 헤더 전체 좌우 자리 정렬 */
.header {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
/* 헤더 왼쪽 자리 정렬 */
.ht_left {
display: flex;
}
/* 헤더 왼쪽 메뉴 */
.ht_left02 {
font-size: 18px;
margin-top: 10px;
margin-left: 45px;
}
.ht_left02 > a {
padding-right: 20px;
}
/* 헤더 오른쪽 자리 정렬 */
.ht_right {
display: flex;
width: 57%;
}
/* 헤더 오른쪽 검색창 스타일 */
.ht_right01 input{
position: relative;
width: 266.172px;
height: 38px;
margin-top: 7px;
padding: 0 40px;
font-size: 16px;
border: 1px solid lightgray;
}
/* 헤더 오른쪽 검생창 내 아이콘 삽입 */
.ht_right01 > i {
position: absolute;
z-index: 1;
padding-top: 16px;
padding-left: 10px;
font-size: 20px;
}
/* 헤더탑 오른쪽 메뉴 자리조정 */
.ht_right02 {
padding-left : 20px;
}
.ht_right02 i {
margin-top: 15px;
font-size: 20px;
}
.ht_right02 > a {
font-size: 14px;
padding: 0 10px;
}
.ht_a01, .ht_a02 {
border-right: 1px solid lightgray;
}
/* 헤더탑 드롭다운 */
#ht_mainList > li {
position: relative;
margin-top: 6px;
padding: 10px 13px;
border-radius: 5px;
font-size: 14px;
background-color: var(--main-color);
color: white;
}
#ht_mainList .down{
padding-left: 7px;
}
/* 서브리스트 자리조정 */
#ht_subList {
position: absolute;
top: 50px;
left: -90px;
width: 340%;
padding: 10px 10px 10px 20px;
background-color: rgb(243, 241, 241);
border-radius: 10px;;
color: black;
}
#ht_subList li {
display: flex;
padding-bottom: 10px;
}
#ht_subList p {
font-size: 11px;
}
/* 헤더탑 드롭다운 서브리스트 숨기기 */
.ht_display_none {
display: none;
}
let main = document.querySelector("#ht_mainList");
let sub = document.querySelector("#ht_subList");
console.log(main);
console.log(sub);
main.addEventListener("click",showSubList);
let cnt = 0;
function showSubList() {
cnt++;
if(cnt % 2 == 1) {
sub.classList.remove("ht_display_none");
} else {
sub.classList.add("ht_display_none");
}
}
