Initial commit: 교육 프로젝트 배포
This commit is contained in:
송대일
@@ -0,0 +1,255 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<?php include(__DIR__ . "/_include/_head.php") ?>
|
||||
<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=Caveat:wght@700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap insight">
|
||||
<?php include(__DIR__ . "/_include/_header.php") ?>
|
||||
<!-- container -->
|
||||
<div class="container">
|
||||
<!-- editor's pick -->
|
||||
<section class="insight-hero">
|
||||
<div class="insight-inner hero-top hero-breadcrumb">
|
||||
<ul class="breadcrumb" aria-label="breadcrumb">
|
||||
<li><a href="./index.html">홈</a></li>
|
||||
<li><a href="./insight.html">인사이트</a></li>
|
||||
<li><span class="current">경제와 사회</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- editor's pick -->
|
||||
<div class="hero-banner">
|
||||
<div class="swiper hero-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="banner-img">
|
||||
<picture>
|
||||
<source media="(min-width: 769px)" srcset="/img/insight/img_banner_01.png">
|
||||
<source media="(max-width: 768px)" srcset="/img/insight/img_banner_01_m.png">
|
||||
<img src="/img/insight/img_banner_01.png" alt="배너 1">
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="banner-img">
|
||||
<picture>
|
||||
<source media="(min-width: 769px)" srcset="/img/insight/img_banner_02.png">
|
||||
<source media="(max-width: 768px)" srcset="/img/insight/img_banner_02_m.png">
|
||||
<img src="/img/insight/img_banner_02.png" alt="배너 2">
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="swiper-pagination hero-pagination" aria-hidden="true"></div>
|
||||
<button type="button" class="swiper-button-prev hero-prev btn-prev" aria-label="이전 슬라이드"></button>
|
||||
<button type="button" class="swiper-button-next hero-next btn-next" aria-label="다음 슬라이드"></button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="leadership-tabs" aria-label="인사이트 카테고리">
|
||||
<div class="leadership-inner">
|
||||
<div class="leadership-tabs-list" role="tablist" aria-label="리더십 카테고리 탭">
|
||||
<button class="leadership-tab" type="button" role="tab" aria-selected="false">
|
||||
<span class="tab-icon"><img src="/img/ico/ico_economy.svg" alt="" /></span>
|
||||
<span class="tab-text">경제와 사회</span>
|
||||
</button>
|
||||
<button class="leadership-tab is-active" type="button" role="tab" aria-selected="true">
|
||||
<span class="tab-icon"><img src="/img/ico/ico_future.svg" alt="" /></span>
|
||||
<span class="tab-text">기술과미래</span>
|
||||
</button>
|
||||
<button class="leadership-tab" type="button" role="tab" aria-selected="false">
|
||||
<span class="tab-icon"><img src="/img/ico/ico_trend.svg" alt="" /></span>
|
||||
<span class="tab-text">트렌드업</span>
|
||||
</button>
|
||||
<button class="leadership-tab" type="button" role="tab" aria-selected="false">
|
||||
<span class="tab-icon"><img src="/img/ico/ico_health.svg" alt="" /></span>
|
||||
<span class="tab-text">행복과 건강</span>
|
||||
</button>
|
||||
<button class="leadership-tab" type="button" role="tab" aria-selected="false">
|
||||
<span class="tab-icon"><img src="/img/ico/ico_people.svg" alt="" /></span>
|
||||
<span class="tab-text">피플스토리</span>
|
||||
</button>
|
||||
<button class="leadership-tab" type="button" role="tab" aria-selected="false">
|
||||
<span class="tab-icon"><img src="/img/ico/ico_life.svg" alt="" /></span>
|
||||
<span class="tab-text">라이프</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- video list -->
|
||||
|
||||
<section class="insight-video-list">
|
||||
<div class="insight-inner">
|
||||
<div class="list-head">
|
||||
<span class="total">TOTAL <em>8</em></span>
|
||||
<div class="list-options">
|
||||
<div class="select-wrap">
|
||||
<select class="select-sort" title="정렬">
|
||||
<option>조회수</option>
|
||||
<option>업데이트</option>
|
||||
<option>내가본컨텐츠</option>
|
||||
<option>안본컨텐츠</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="video-grid">
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_i1" onclick="event.stopPropagation();"><input type="checkbox" id="like_chk_i1" title="좋아요"></label>
|
||||
<div class="item-thumb"><img src="/img/video/img_thumb_01.png" alt="" /></div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">TPU가 GPU 제압할까? 데이터센터 전력전쟁이 온다</strong>
|
||||
<div class="tag-list">
|
||||
<span class="tag">웰니스</span>
|
||||
<span class="tag">협업</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_i2" onclick="event.stopPropagation();"><input type="checkbox" id="like_chk_i2" checked title="좋아요 취소"></label>
|
||||
<div class="item-thumb"><img src="/img/video/img_thumb_02.png" alt="" /></div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">한국에서 가장 유명한 회계사의 조언</strong>
|
||||
<div class="tag-list">
|
||||
<span class="tag">웰니스</span>
|
||||
<span class="tag">협업</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_i3" onclick="event.stopPropagation();"><input type="checkbox" id="like_chk_i3" title="좋아요"></label>
|
||||
<div class="item-thumb"><img src="/img/video/img_thumb_03.png" alt="" /></div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">일자리 멸종하는 AI 시대를 대비하라</strong>
|
||||
<div class="tag-list">
|
||||
<span class="tag">웰니스</span>
|
||||
<span class="tag">협업</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_i4" onclick="event.stopPropagation();"><input type="checkbox" id="like_chk_i4" title="좋아요"></label>
|
||||
<div class="item-thumb"><img src="/img/video/img_thumb_04.png" alt="" /></div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">상대의 숨은 욕구를 찾아내는 것, 거기서 시작해야 됩니다</strong>
|
||||
<div class="tag-list">
|
||||
<span class="tag">웰니스</span>
|
||||
<span class="tag">협업</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_i5" onclick="event.stopPropagation();"><input type="checkbox" id="like_chk_i5" title="좋아요"></label>
|
||||
<div class="item-thumb"><img src="/img/video/img_thumb_05.png" alt="" /></div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">20년만에 구글검색의 최대강적이 나타났다</strong>
|
||||
<div class="tag-list">
|
||||
<span class="tag">웰니스</span>
|
||||
<span class="tag">협업</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_i6" onclick="event.stopPropagation();"><input type="checkbox" id="like_chk_i6" title="좋아요"></label>
|
||||
<div class="item-thumb"><img src="/img/video/img_thumb_06.png" alt="" /></div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">사람의 속마음을 한눈에 꿰뚫어보는 18가지 심리법칙</strong>
|
||||
<div class="tag-list">
|
||||
<span class="tag">웰니스</span>
|
||||
<span class="tag">협업</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_i7" onclick="event.stopPropagation();"><input type="checkbox" id="like_chk_i7" title="좋아요"></label>
|
||||
<div class="item-thumb"><img src="/img/video/img_thumb_07.png" alt="" /></div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">직장인이 쉬운 일만 하면 안되는 이유</strong>
|
||||
<div class="tag-list">
|
||||
<span class="tag">웰니스</span>
|
||||
<span class="tag">협업</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_i8" onclick="event.stopPropagation();"><input type="checkbox" id="like_chk_i8" title="좋아요"></label>
|
||||
<div class="item-thumb"><img src="/img/video/img_learning_thumb_01.png" alt="" /></div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">대학 부적응자가 일본 건너가 만든 일본 국민앱 '타임트리'</strong>
|
||||
<div class="tag-list">
|
||||
<span class="tag">웰니스</span>
|
||||
<span class="tag">협업</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- // container -->
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Hero Swiper (리더십과 동일)
|
||||
new Swiper('.hero-swiper', {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 4000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
speed: 600,
|
||||
pagination: {
|
||||
el: '.hero-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.hero-next',
|
||||
prevEl: '.hero-prev',
|
||||
},
|
||||
});
|
||||
|
||||
// Tabs (리더십과 동일)
|
||||
const tabs = Array.from(document.querySelectorAll('.leadership-tab'));
|
||||
if (tabs.length) {
|
||||
tabs.forEach(function (tab) {
|
||||
tab.addEventListener('click', function () {
|
||||
tabs.forEach(function (t) {
|
||||
t.classList.remove('is-active');
|
||||
t.setAttribute('aria-selected', 'false');
|
||||
});
|
||||
tab.classList.add('is-active');
|
||||
tab.setAttribute('aria-selected', 'true');
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user