알아두자 HTML, CSS
[HTML/CSS][Ch9][스타벅스] 헤더와 드롭다운 메뉴 - 서브 메뉴
써치킴
2022. 1. 10. 20:00
# (해시)
URL 해시(Hash)는 몇가지 쓰임이 있지만, 그 중 CSS ID 선택자를 이용해 페이지 내 특정 위치로 이동할 수 있다.
javascript:void(0)
자바스크립트에서 동작을 하는데 그 동작이 void(아무것도 없다는 뜻)이다. => 아무 기능이 동작하지 않는다는 선언
(해시보다는 javascript:void(0) 권장)
!HTML 구조적인 부분을 CSS 파일에 옮겨놓은 후 스타일을 추가하는 것이 좋은 방법이다!
index.html
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>startbucks Coffee Korea</title>
<!-- 오픈그래프 -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Starbucks" />
<meta property="og:title" content="Starbucks Coffee Korea" />
<meta property="og:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
<meta property="og:image" content="./images/starbucks_seo.jpg" />
<meta property="og:url" content="https://starbucks.co.kr" />
<!-- 트위터카트 -->
<meta property="twitter:card" content="summary" />
<meta property="twitter:site" content="Starbucks" />
<meta property="twitter:title" content="Starbucks Coffee Korea" />
<meta property="twitter:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
<meta property="twitter:image" content="./images/starbucks_seo.jpg" />
<meta property="twitter:url" content="https://starbucks.co.kr" />
<!-- 파비콘 -->
<link rel="icon" href="./favicon.png">
<!-- 브라우저 스타일 초기화 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<!-- 폰트 태그 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap" rel="stylesheet">
<!-- google meterial icons 추가 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- css 연결 -->
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<!-- HEADER -->
<header>
<div class="inner">
<a href="/" class="logo">
<img src="./images/starbucks_logo.png" alt="STARBUCKS">
</a>
<div class="sub-menu">
<ul class="menu">
<li>
<a href="/signin">Sign In</a>
</li>
<li>
<a href="javascript:void(0)">My Starbucks</a>
</li>
<li>
<a href="javascript:void(0)">Customer Service & Ideas</a>
</li>
<li>
<a href="javascript:void(0)">Find a Store</a>
</li>
</ul>
<div class="search">
<input type="text">
<div class="material-icons">search</div>
</div>
</div>
</div>
</header>
</body>
</html>main.css
/* COMMON */
body{
color: #333;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
font-family: 'Nanum Gothic', sans-serif;
}
/* 이미지는 하나의 블록(상자)처럼 취급됨 */
img {
display: block;
}
/* a 태그는 선 사용 X */
a {
text-decoration: none;
}
/* HEADER */
header {
background-color: royalblue;
}
header .inner {
width: 1100px;
height: 120px;
margin: 0 auto;
background-color: orange;
position: relative; /* 자신 기준 */
}
header .logo {
height: 75px;
position: absolute; /* 부모 기준 */
top: 0 ;
bottom: 0;
left: 0;
margin: auto;
}
header .sub-menu {
}
header .sub-menu ul.menu {
font-family: Arial, sans-serif; /* Arial가 있으면 적용, 없으면 sans-serif 적용 */
display: flex; /* 수직 -> 수평으로 변경 */
}
header .sub-menu ul.menu li {
position: relative;
}
/* 가상요소 선택자(구분선 만들기) */
header .sub-menu ul.menu li::before {
content: "";
width: 1px;
height: 12px;
background-color: #e5e5e5;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
/* 제일 왼쪽 구분선 display : none 처리 */
header .sub-menu ul.menu li:first-child:before {
display: none;
}
/* a 태그가 인라인 요소이기 때문에 display: block을 추가해서 블록요소로 사용 */
header .sub-menu ul.menu li a {
font-size: 12px;
padding: 11px 16px;
display: block;
color: #656565;
}
/* 서브 메뉴에 마우스 올리면 검정색으로 변경됨 */
header .sub-menu ul.menu li a:hover {
color: #000;
}
header .sub-menu .search {
}
header .sub-menu .search input {
}
header .sub-menu .search .material-icons {
}
출력
