19.아웃백 헤더(2단세로메뉴, white-space, nowrap, visiblity hidden 페이드 효과)
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<!-- 반응형 세팅이 아닐경우 (데스크탑) 뷰 포트 크기 고정해야함 기본 그리드 + 80정도-->
<meta name="viewport" content="width = 1260" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
<!-- ios 사파리 전화번호 링크 컬러 변경못하게 -->
<meta name="format-detection" content="telephone=no" />
<meta name="description" content="OUTBACK STEAKHOUSE" />
<title>아웃백 본앤본 프레스티지 스테이크 | 메뉴 | 아웃백</title>
<meta property="og:title" content="아웃백 스테이크하우스" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.outback.co.kr/" />
<meta
property="og:image"
content="https://www.outback.co.kr/asset/images/common/sns.jpg"
/>
<link rel="icon" href="./assets/images/favicon.ico?v=2" />
<meta property="og:description" content="OUTBACK STEAKHOUSE" />
<!-- 웹 폰트 코드 먼저 연결해야함 -->
<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=Noto+Sans+KR:wght@100..900&display=swap"
rel="stylesheet"
/>
<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=Montserrat:wght@100..900&display=swap"
rel="stylesheet"
/>
<!-- 아이콘 폰트 연결 -->
<!-- self closing규칙: </> : html5는 둘 다 적용 가능 -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,0"
/>
<link rel="stylesheet" href="./css/common.css" />
<link rel="stylesheet" href="./css/main.css" />
<!-- main.css가 덮어씀 그래서 큰걸 아래에 배치 해야함-->
<!-- 파비콘 연결 -->
<!-- <link rel="icon" href="./images/favicon.jpeg" />
<link rel="apple-touch-icon-precomposed" href="images/favicon.jpeg" /> -->
<!-- -->
</head>
<body>
<div id="skip_navi">
<a href="#container">본문 바로가기</a>
</div>
<div id="wrap">
<header id="header">
<!-- 내부 크기를 잡아야 할 때 이너 사용 -->
<div class="inner">
<h1 class="logo">
<a href="index.html"
><img src="./assets/images/logo_white_type_02.png" alt="OUTBACK"
/></a>
</h1>
<nav class="gnb_wrap">
<ul class="gnb">
<li>
<a href="#">BRAND</a>
<ul class="depth2">
<li>
<a href="/main.do?menuIdx=38">OUTBACK STORY</a>
</li>
<li>
<a href="/main.do?menuIdx=317">KERRR FAMILY</a>
</li>
<li>
<a href="/main.do?menuIdx=183">BEEF STORY</a>
</li>
<li>
<a href="/main.do?menuIdx=241">STEAK ACADEMY</a>
</li>
<li>
<a href="/main.do?menuIdx=235">OUTBACK CSR</a>
</li>
</ul>
</li>
<li>
<a href="#">MENU</a>
<ul class="depth2">
<li>
<a href="/main.do?menuIdx=314">BONE＆BONE PRESTIGE STEAK</a>
</li>
<li>
<a href="/main.do?menuIdx=292"
>PERFECT BONE-IN STEAK EDITION</a
>
<!-- <span
class="icon"
style="
width: 32px;
height: 14px;
background-image: url(/upload/icon/20230323/20230323145216177001.png);
"
></span> -->
</li>
<li>
<a href="/main.do?menuIdx=228">TOMAHAWK STEAK</a>
</li>
<li>
<a href="/main.do?menuIdx=247">PORTERHOUSE STEAK</a>
</li>
<li>
<a href="/main.do?menuIdx=333">BLACK LABEL CHEF EDITION</a>
<!-- <span
class="icon"
style="
width: 32px;
height: 14px;
background-image: url(/upload/icon/20231102/20231102152438217059.png);
"
></span> -->
</li>
<li>
<a href="/main.do?menuIdx=225">STEAK ＆ FAVORITES</a>
</li>
<li>
<a href="/main.do?menuIdx=224">LUNCH SET</a>
</li>
<li>
<a href="/main.do?menuIdx=223">PASTA ＆ SALADS</a>
</li>
<li>
<a href="/main.do?menuIdx=257">WINES</a>
</li>
<li>
<a href="/main.do?menuIdx=222">DESSERTS ＆ OTHERS</a>
</li>
<li>
<a href="/main.do?menuIdx=244">DELIVERY</a>
</li>
<li>
<a href="/main.do?menuIdx=310"
>LIMITED SPECIAL MENU FOR JEJU</a
>
</li>
</ul>
</li>
<li>
<a href="#">MEMBERSHIP</a>
<ul class="depth2">
<li>
<a href="/main.do?menuIdx=301">BOOMERANG MEMBERSHIP</a>
</li>
<li>
<a href="/main.do?menuIdx=302">MEMBERSHIP BENEFIT</a>
</li>
</ul>
</li>
<li>
<a href="#">BENEFIT</a>
<ul class="depth2">
<li>
<a href="/main.do?menuIdx=51">CREDIT CARDS</a>
</li>
<li>
<a href="/main.do?menuIdx=52">SKT＆KT</a>
</li>
<li>
<a href="/main.do?menuIdx=53">POINT PAYMENT</a>
</li>
<li>
<a href="/main.do?menuIdx=54">VOUCHER</a>
</li>
<li>
<a href="/main.do?menuIdx=186">EVENT</a>
</li>
</ul>
</li>
<li>
<a href="#">STORE</a>
</li>
</ul>
</nav>
<ul class="login">
<li><a href="#">고객의 소리</a></li>
<li><a href="#">채용</a></li>
<li><a href="#">로그인</a></li>
<li class="join"><a href="#">회원가입</a></li>
</ul>
</div>
</header>
<main id="container">
<!-- 스네이크 표기법: _(언더바)로 단어 사이 연결 ,케밥 케이스: -(대시)로 단어 사이 연결-->
<section class="main_slider">
<!-- html validation에서 h2를 넣어주지 않고 사용하면 에러 발생 -->
<h2 class="blind">메인 슬라이더</h2>
<a href="#"
><img src="./assets/images/back_img1.jpeg" alt="bon & bon"
/></a>
</section>
</main>
</div>
</body>
</html>
css
/* 컬러 변수 */
:root {
--point-color1: #c30606;
--point-color2: #907354;
--txt-color-400: #999;
--txt-color-500: #666;
--txt-color-600: #222;
}
#wrap {
/* min-width: 최소 너비를 지정하여 화면이 작아지더라도 짤림 방지 */
/* 반응형이거나 아니거나의 차이는 min-width를 거냐 안거냐 */
/* 반응형일 때는 안검 viewport값과 동일*/
min-width: 1260px;
height: 1500px;
}
#header {
/* 헤더 위치 고정 */
position: fixed;
left: 0;
top: 0;
background: rgba(52, 52, 54, 1);
width: 100%;
z-index: 9999;
/* fixed요소는 창 기준이므로 #wrap의 min-width가 안먹음 */
min-width: 1260px;
}
#header .inner {
width: 1180px;
height: 100px;
margin: 0 auto;
display: flex;
align-items: center;
}
#header .gnb_wrap {
margin-left: 80px;
}
#header .gnb {
display: flex;
}
#header .gnb > li {
padding: 0 15px;
position: relative;
}
#header .gnb > li > a {
display: block;
line-height: 100px;
color: #fff;
font-size: 19px;
font-family: 'Akrobat', sans-serif;
letter-spacing: 0.12em;
/* 하단 바 기준 잡기 */
position: relative;
}
#header .gnb > li > a::after {
content: '';
position: absolute;
left: 0;
bottom: 30px;
width: 100%;
height: 3px;
background: var(--point-color1);
/* 하단 바 끄기 */
display: none;
}
/* 하단 바 켜기 */
#header .gnb > li:hover > a::after {
display: block;
}
#header .gnb > li:hover .depth2 {
opacity: 1;
visibility: visible;
}
/* 헤더 이중 리스트 gnb구조에서 서브 메뉴는 무조건 띄울 것 */
/* 안띄우면 서브 메뉴의 글자가 길기 때문에 주메뉴 작업이 불가 */
#header .gnb .depth2 {
position: absolute;
left: 0;
top: 100px;
background: rgba(0, 0, 0, 0.6);
padding: 28px 30px;
/* 글자가 밑으로 안떨어지게 하기(줄바꿈 X) */
white-space: nowrap;
/* 하단 바 끄기 */
/* display: none;은 transition이 안된다. */
/* display: none; */
/* 페이드 효과 이므로 투명도 사용 */
opacity: 0;
/* 영역이 마우스에 반응하지 않도록 */
visibility: hidden;
transition: all 0.5s;
}
#header .gnb .depth2 li + li {
margin-top: 15px;
}
#header .gnb .depth2 a {
color: #fff;
}
#header .login {
/* flex구조에서 마진 오토 사용 시 반대방향 끝까지 밀림 */
margin-left: auto;
display: flex;
gap: 0 20px;
}
#header .login a {
color: var(--txt-color-400);
font-size: 13px;
display: block;
line-height: 30px;
}
#header .login .join a {
width: 86px;
/* 글자가 길어질 수 있으면 좌우 패딩 처리 */
/* padding: 0 19px */
background: #555;
text-align: center;
color: #fff;
}
/* 헤더가 fixed구조인 경우 main_Slider에 margin-top 사용 시 마진 병합 발생하므로 패딩으로 밀어줌(헤더는 떠있기 때문에 인접이 아님) */
#container {
padding-top: 100px;
}
.main_slider {
overflow: hidden;
/* 안쪽 요소가 포지션으로 떠있으면 높이가 0이되며 높이를 잡아야 다음 섹션이 겹치지 않음 */
height: 900px;
/* 포지션 앱솔의 기준 */
position: relative;
}
.main_slider a {
position: absolute;
left: 50%;
top: 0;
/* 자신 가로 길이 절반만큼 왼쪽으로 이동 */
transform: translateX(-50%);
}
.main_slider img {
/* 창 크기를 줄일 때 이미지가 줄어들지 않도록 */
max-width: none;
}
github.com/kangminchan99