CSS & HTML 기초(8)

min_chan·2024년 3월 25일

CSS & HTML

목록 보기

8/10

20. 코리아 리서치 인터내셔널(반응형,2단가로메뉴,video,css캐싱방지)

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <meta name="viewport" content="width=1260"> -->
    <meta name="format-detection" content="telephone=no" />
    <meta
      name="description"
      content="사람을 이해하고 연결하는 통합 리서치 전문기업. 마케팅/퍼블릭 조사, 플랫폼 사업"
    />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="http://ossamuiux.com/test/" />
    <meta property="og:title" content="KRi | 코리아리서치인터내셔널" />
    <meta
      property="og:description"
      content="사람을 이해하고 연결하는 통합 리서치 전문기업. 마케팅/퍼블릭 조사, 플랫폼 사업"
    />
    <meta
      property="og:image"
      content="http://ossamuiux.com/test/images/common/20230315195155CAKTKJ.jpg"
    />
    <title>KRi | 코리아리서치인터내셔널</title>
    <link rel="icon" href="images/common/favicon.ico" />
    <link rel="apple-touch-icon-precomposed" href="images/common/favicon.jpg" />
    <!-- <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="stylesheet" href="css/common.css?v=<?php echo time(); ?>" />
    <link rel="stylesheet" href="css/main.css?v=<?php echo time(); ?>" />
  </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"><span class="blind">kri</span></a>
          </h1>
          <nav class="gnb_wrap">
            <ul class="gnb">
              <li>
                <a href="#">회사소개</a>
                <ul class="depth2">
                  <li><a href="/sub/outline.html">회사 개요</a></li>
                  <li><a href="/sub/leadership/list.html">리더십</a></li>
                  <li><a href="/sub/growth.html">성장 가치</a></li>
                  <li><a href="/sub/subsidiary.html">계열사</a></li>
                </ul>
              </li>
              <li>
                <a href="#">서비스라인</a>
                <ul class="depth2">
                  <li><a href="/sub/marketing.html">마케팅 리서치</a></li>
                  <li><a href="/sub/public.html">퍼블릭 리서치</a></li>
                  <li><a href="/sub/tech.html">리서치 Tech.</a></li>
                  <li><a href="/sub/diy.html">DIY/애자일 리서치</a></li>
                  <li><a href="/sub/ai.html"> AI 빅데이터</a></li>
                  <li><a href="/sub/client.html">클라이언트</a></li>
                </ul>
              </li>
              <li>
                <a href="#">콘텐츠라이브러리</a>
                <ul class="depth2">
                  <li><a href="/sub/contents/list.html">리서치 콘텐츠</a></li>
                  <li><a href="/sub/news/list.html">뉴스/미디어룸</a></li>
                  <li><a href="/sub/kring/list.html">커뮤니티</a></li>
                </ul>
              </li>
              <li>
                <a href="#">문의하기</a>
                <ul class="depth2">
                  <li><a href="/sub/inquiry/form.html">조사 문의</a></li>
                  <li><a href="/sub/direction.html">오시는 길</a></li>
                </ul>
              </li>
              <li>
                <a href="#">채용</a>
                <ul class="depth2">
                  <li><a href="/sub/culture.html">회사 문화</a></li>
                  <li><a href="/sub/duty.html">직무 소개</a></li>
                  <li><a href="/sub/recruit/list.html">채용 안내</a></li>
                </ul>
              </li>
            </ul>
          </nav>
          <div class="lang_wrap">
            <ul class="lang">
              <li class="active"><a href="#">KOR</a></li>
              <li><a href="#">ENG</a></li>
            </ul>
            <a class="btn inquiry_btn" href="#">조사문의</a>
            <!-- 열기와 닫기가 따로일경우 열기버튼 누른후 포커스를 이동해야 할 수 있으므로
          a태그로 넣고, 열고 닫기가 하나일 경우(토글) button태그 -->
            <a class="open_btn" href="#">
              <span class="blind">메뉴열기</span>
              <i></i>
              <i></i>
              <i></i>
              <i></i>
            </a>
          </div>
        </div>
        <!-- 모바일: m_ 테블릿: t_ 데스크탑: pc_ -->
        <aside class="m_gnb_wrap">
          <button class="close_btn" type="button">
            <span class="blind">닫기</span>
            <i></i>
            <i></i>
          </button>
          <ul class="m_gnb">
            <li>
              <a href="#">회사소개</a>
              <ul class="depth2">
                <li><a href="/sub/outline.html">회사 개요</a></li>
                <li><a href="/sub/leadership/list.html">리더십</a></li>
                <li><a href="/sub/growth.html">성장 가치</a></li>
                <li><a href="/sub/subsidiary.html">계열사</a></li>
              </ul>
            </li>
            <li>
              <a href="#">서비스라인</a>
              <ul class="depth2">
                <li><a href="/sub/marketing.html">마케팅 리서치</a></li>
                <li><a href="/sub/public.html">퍼블릭 리서치</a></li>
                <li><a href="/sub/tech.html">리서치 Tech.</a></li>
                <li><a href="/sub/diy.html">DIY/애자일 리서치</a></li>
                <li><a href="/sub/ai.html"> AI 빅데이터</a></li>
                <li><a href="/sub/client.html">클라이언트</a></li>
              </ul>
            </li>
            <li>
              <a href="#">콘텐츠라이브러리</a>
              <ul class="depth2">
                <li><a href="/sub/contents/list.html">리서치 콘텐츠</a></li>
                <li><a href="/sub/news/list.html">뉴스/미디어룸</a></li>
                <li><a href="/sub/kring/list.html">커뮤니티</a></li>
              </ul>
            </li>
            <li>
              <a href="#">문의하기</a>
              <ul class="depth2">
                <li><a href="/sub/inquiry/form.html">조사 문의</a></li>
                <li><a href="/sub/direction.html">오시는 길</a></li>
              </ul>
            </li>
            <li>
              <a href="#">채용</a>
              <ul class="depth2">
                <li><a href="/sub/culture.html">회사 문화</a></li>
                <li><a href="/sub/duty.html">직무 소개</a></li>
                <li><a href="/sub/recruit/list.html">채용 안내</a></li>
              </ul>
            </li>
          </ul>
        </aside>
      </header>
      <main id="container">
        <section class="main_slider">
          <h2 class="blind">메인비디오</h2>
          <video
            src="video/main_visual001.mp4"
            autoplay
            muted
            loop
            playsinline
          ></video>
          <div class="slider_bottom">
            <img src="images/main_slider_bottom.svg" alt="" />
          </div>
        </section>
      </main>
    </div>
  </body>
</html>

css

/* 컬러 변수 */
:root {
  --point-color1: #F8C900;
  --point-color2: #907354;
  --txt-color-400: #8F98AC;
  --txt-color-500: #77797E;
  --txt-color-600: #212121;
}

#wrap {
  height: 3500px;
}

#header {
  position: fixed;
  left:0;
  top:0;
  width:100%;
  z-index: 9999;
}
#header .inner {
  /* 1920은 일반적으로 안적어도되지만 큰모니터에서 좌우가 너무 넓어지는것을 방지해줌 */
  max-width:1920px;
  /* 테블릿 여백 미리줘서 창 줄었을때 안붙게 */
  padding:0 20px;
  height: 100px;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#header .logo {
  width:146px;
  /* 제자리띄우기 */
  position: relative;
  z-index: 10;
}
#header .logo a {
  display: block;
  height: 35px;
  background: url(../images/logo_w.svg) no-repeat left top / 100%;
}

/* 헤더기준 가운데 정렬 */
#header .gnb_wrap {
  position: absolute;
  left:0;
  top:0;
  /* 서브메뉴의 기준이므로 100%로 늘려야 서브를 늘릴수있음 */
  width:100%;
  /* gnb 가운데 정렬 */
  display: flex;
  justify-content: center;
}
#header .gnb {
  display:flex;
}
#header .gnb>li {
  padding:0 45px;
}
#header .gnb>li>a {
  color:#fff;
  display: block;
  line-height: 100px;
  font-size: 18px;
  position: relative;
}
#header .gnb>li>a::after {
  content: '';
  position: absolute;
  left:50%;
  bottom: -12px;
  /* scale효과가 있으므로 transform대신 마진으로 중앙정렬 */
  margin-left:-12px;
  width:24px;
  height: 24px;
  background: url(../images/on.png) no-repeat left top / 100%;
  transition: all 0.5s;
  /* 크기를 0%로 안보이게 */
  transform:scale(0);
  z-index: 10;
}
#header .gnb>li:hover>a::after {
  /* transform 기준은 요소의 중심 */
  transform: scale(1);
}

#header .gnb>li:hover .depth2 {
  /* flex로 보여줌 */
  display: flex;
}
#header .gnb .depth2 {
  position: absolute;
  left:0;
  top:100px;
  width:100%;
  height: 100px;
  justify-content: center;
  align-items: center;
  background: #F9F9F9;
  gap: 0 50px;
  display: none;
}
#header .gnb .depth2 a {
  transition: all 0.3s;
  color:rgba(0,0,0,0.5);
  font-weight: 500;
}
#header .gnb .depth2 a:hover {
  color:rgba(0,0,0,1);
}


#header .lang_wrap {
  /* 제자리띄우기 */
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap:0 50px;
}
#header .lang {
  display: flex;
}

/* 메뉴사이 구분선은 글자보다 높이가 작은경우가 많으므로 before로 띄워서 처리 */
#header .lang li + li {
  margin-left: 15px;
  padding-left: 15px;
  position: relative;
}
#header .lang li + li::before {
  content: '';
  position: absolute;
  left:0;
  top:4px;
  width:1px;
  height: 12px;
  background: #fff;
}
#header .lang a {
  color:rgba(255,255,255,0.3);
}
#header .lang li.active a {
  color:#fff;
  position: relative;
}
#header .lang li.active a::before {
  content: '';
  position: absolute;
  left:50%;
  top:-10px;
  transform: translateX(-50%);
  width:6px;
  height: 6px;
  background: #fff;
  /* 정원 */
  border-radius: 50%;
}
#header .inquiry_btn {
  height: 50px;
  color:#fff;
  border-color:#fff;
  border-radius: 25px;
  width:148px;
  font-size: 18px;
  font-weight: 500;
  gap:0 10px;
}

/* flex아이템이므로 블럭임 */
#header .inquiry_btn::after {
  content: '';
  width:22px;
  height: 21px;
  -webkit-mask: url(../images/power_icon.svg) no-repeat left top / 100%;
  mask: url(../images/power_icon.svg) no-repeat left top / 100%;
  background: #ffcc00;
  transform: rotateZ(-135deg);
  transition: all 0.5s;
}
#header .inquiry_btn:hover {
  background: #333;
  border-color:#333;
}
#header .inquiry_btn:hover::after {
  background: #fff;
  transform: rotateZ(0);
}

/* 모바일메뉴버튼 */
#header .open_btn {
  display: none;
}
/* 모바일 메뉴 */
#header .m_gnb_wrap {
  display: none;
}



.main_slider {
  height: 1000px;
  position: relative;
}
.main_slider video {
  /* background-size: cover 기능을 html요소에 적용 */
  width:100%;
  height: 100%;
  object-fit: cover;
}
.main_slider .slider_bottom {
  position: absolute;
  left:0;
  bottom: 0;
  width:100%;
}
.main_slider .slider_bottom img {
  width:100%;
}


/* 헤더 분기점 */
@media (max-width:1550px) {
  #header .gnb>li {
    padding:0 25px;
  }
  #header .gnb>li>a {
    font-size: 16px;
  }
  #header .lang_wrap {
    gap:0 20px;
  }
}



/* 테블릿 분기점 */
@media (max-width:1200px) {
  #header .inner {
    height: 80px;
  }
  #header .logo {
    width:127px;
  }
  #header .logo a {
    height: 30px;
  }
  #header .gnb_wrap {
    display: none;
  }

  #header .open_btn {
    width:26px;
    height: 26px;
    display: flex;
    flex-wrap: wrap;
    gap:2px;
  }
  #header .open_btn i {
    width:12px;
    height: 12px;
    background: #fff;
  }

  #header .m_gnb_wrap {
    /* transform: translateX(100%); */
    display: block;
    position: fixed;
    right:0;
    top:0;
    z-index: 20;
    width:320px;
    /* fixed는 창기준이므로 height 100%가능 */
    height: 100%;
    background: #fff;
    /* 스크롤 */
    /* overflow: auto; */
    /* 세로스크롤영역 강제로 만들기 */
    overflow-y:scroll;
    padding:140px 0 60px 50px;
  }
  #header .m_gnb_wrap .close_btn {
    position: absolute;
    right:20px;
    top:20px;
    width:28px;
    height: 28px;
    background: none;
    border:none;
  }
  #header .m_gnb_wrap .close_btn i {
    position: absolute;
    left:0;
    top:50%;
    width:100%;
    height: 2px;
    background: #5b606a;
    margin-top:-1px;
    transform: rotateZ(45deg);
  }
  /* nth-child는 모든형제요소에서 n번째 */
  /* nth-of-type은 다른형제요소가 있어도 동일 태그중에서 n번째 */
  #header .m_gnb_wrap .close_btn i:nth-of-type(2) {
    transform: rotateZ(-45deg);
  }
  #header .m_gnb>li {
    margin-bottom: 30px;
    position: relative;
  }
  #header .m_gnb>li::before {
    content: '';
    position: absolute;
    left:-50px;
    top:8px;
    width:0;
    height: 2px;
    background: #142345;
  }
  #header .m_gnb>li:hover::before {
    /* hover에 transition걸면 hover시에만 애니메이션 작동 */
    transition: all 0.5s;
    width:30px;
  }
  #header .m_gnb>li>a {
    display: block;
    color:#313741;
    font-weight: 500;
  }
  #header .m_gnb>li:hover .depth2 {
    display: block;
  }
  #header .m_gnb .depth2 {
    display: none;
    margin-top:20px;
  }
  #header .m_gnb .depth2 li + li {
    margin-top:12px;
  }
  #header .m_gnb .depth2 a {
    color:#494d54;
    opacity: 0.6;
    transition: all 0.4s;
  }
  #header .m_gnb .depth2 a:hover {
    opacity: 1;
  }
}






@media (max-width:767px) {
  #header .inner {
    height: 60px;
  }
  #header .logo {
    width: 106px;
  }
  #header .logo a {
    height: 25px;
  }
  #header .lang a {
    font-size: 14px;
  }
  #header .lang li.active a::before {
    width:4px;
    height: 4px;
    top:-6px;
  }
  #header .inquiry_btn {
    display: none;
  }

  #header .m_gnb_wrap {
    width:80%;
  }

  .main_slider {
    height: 630px;
  }
}

min_chan

이전 포스트

CSS & HTML 기초(7)

다음 포스트

CSS & HTML 기초(8)

CSS & HTML

20. 코리아 리서치 인터내셔널(반응형,2단가로메뉴,video,css캐싱방지)

CSS & HTML 기초(7)

CSS & HTML 기초(9)

0개의 댓글