728x90
반응형
이번에 따라 만들어본 홈페이지는 스타벅스 홈페이지이다.
그중에서 상단 메뉴 영역을 만들어 보았다.
실제로 스타벅스 홈페이지는 flex를 사용하지 않고 float와 position으로 거의 하드코딩 되어있다 시피 되어있다.
나는 flex를 이용하여 만들어보았다.
실제 스타벅스홈페이지 메뉴 (www.starbucks.co.kr/index.do)
따라 만든 스타벅스 홈페이지 메뉴
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>스타벅스</title>
</head>
<body>
<header>
<div class="head-wrap">
<div class="head-wrap-inner">
<img class="head-logo" src="img/logo.png">
<nav class="head-menu-top-nav">
<ul>
<li class="top-nav01"><a href="#">Sign In</a></li>
<li class="top-nav02"><a href="#">My Starbucks</a></li>
<li class="top-nav03"><a href="#">Customer Service & Ideas</a></li>
<li class="top-nav04"><a href="#">Find a Store</a></li>
</ul>
</nav>
<div class="search-btn">
<img src="img/icon_magnifier_black.png">
</div>
</div>
<div class="head-wrap-sub">
<nav class="head-menu-main-nav">
<ul>
<li class="main-nav01"><a href="#">Coffee</a></li>
<li class="main-nav02"><a href="#">Menu</a></li>
<li class="main-nav03"><a href="#">Store</a></li>
<li class="main-nav04"><a href="#">Responsibility</a></li>
<li class="main-nav05"><a href="#">My Starbucks Rewards</a></li>
<li class="main-nav06"><a href="#">What's New</a></li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
CSS
:root {
--color-beige:#f6f5ee;
--color-font-black: #333;
--color-font-light-black: #555;
--color-font-green: #669900;
--temp-border :solid 0px black;
--font-family : normal Avenir, Arial, georgia;
}
* {
margin: 0;
padding: 0;
color:var(--color-font-black);
font-family: var(--font-family);
}
header{
border-top: solid 2px black;
background: var(--color-beige);
position: fixed;
top:0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
header .head-wrap .head-wrap-inner .search-btn{
position: absolute;
top:10px;
right: 40px;
background: white;
border: solid 1px gray;
border-radius: 5px;
width:34px;
height: 34px;
}
header .head-wrap .head-wrap-inner .search-btn img{
position: absolute;
top: 7px;
left: 7px;
}
header .head-wrap{
border:var( --temp-border);
height: 120px;
width: 1100px;
}
header .head-wrap .head-wrap-inner{
height: 120px;
width: 1100px;
position: relative;
border:var( --temp-border);
}
header .head-wrap .head-wrap-inner .head-logo{
position: absolute;
top:20px;
width:75px;
height:75px;
}
header .head-wrap .head-wrap-inner .head-menu-top-nav{
position: absolute;
left:552px;
top:21px;
}
header .head-wrap .head-wrap-inner .head-menu-top-nav ul{
list-style: none;
}
header .head-wrap .head-wrap-inner .head-menu-top-nav ul li{
float: left;
color: var( --color-font-light-black);
font-size: 13px;
text-align: center;
height: 20px;
border:var( --temp-border);
}
header .head-wrap .head-wrap-inner .head-menu-top-nav ul li a{
text-decoration: none;
}
header .head-wrap .head-wrap-inner .head-menu-top-nav ul li a:hover{
text-decoration: underline;
}
header .head-wrap .head-wrap-inner .head-menu-top-nav ul .top-nav01
{
width:76px;
}
header .head-wrap .head-wrap-inner .head-menu-top-nav ul .top-nav02
{
width:106px;
}
header .head-wrap .head-wrap-inner .head-menu-top-nav ul .top-nav03
{
width:181px;
}
header .head-wrap .head-wrap-inner .head-menu-top-nav ul .top-nav04
{
width:97px;
}
header .head-wrap-sub{
position: absolute;
top:60px;
width: 1100px;
height: 66px;
border:var( --temp-border);
}
header .head-wrap-sub{
display: flex;
justify-content: flex-end;
}
header .head-wrap-sub ul{
list-style: none;
width: 737px;
display: flex;
justify-content:space-between;
border:var( --temp-border);
}
header .head-wrap-sub ul li{
text-align: center;
flex: auto;
}
header .head-wrap-sub ul li a{
text-decoration: none;
display: block;
border:var( --temp-border);
text-transform: uppercase;
font-size: 13px;
padding-top: 10px;
height: 66px;
}
header .head-wrap-sub ul li a:hover{
text-decoration: underline;
background-color: #2c2a29;
color:var( --color-font-green);
}
728x90
반응형
'개발 > HTML_CSS' 카테고리의 다른 글
| [HTML/CSS] 로그인 페이지 만들기 / css 그림자, 그라데이션 (0) | 2020.09.01 |
|---|---|
| [HTML/CSS] 트위터 로그인 화면 따라 만들기 (0) | 2020.08.31 |
| [HTML/CSS] 네이버 로그인 화면 따라 만들기 (3) | 2020.08.27 |
| [HTML/CSS] google 따라 만들기 (0) | 2020.08.27 |
| CSS flex, justify-content 옵션 비교 (0) | 2020.04.28 |
댓글