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;
}
}
github.com/kangminchan99