CSS & HTML 기초(7)

min_chan·2024년 3월 22일

CSS & HTML

목록 보기

7/10

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 &amp; 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;
}

min_chan

이전 포스트

CSS & HTML 기초(6)

다음 포스트

CSS & HTML 기초(7)

CSS & HTML

19.아웃백 헤더(2단세로메뉴, white-space, nowrap, visiblity hidden 페이드 효과)

CSS & HTML 기초(6)

CSS & HTML 기초(8)

0개의 댓글