Initial commit: 교육 프로젝트 배포
This commit is contained in:
송대일 committed
commit
be6dccd120
1483 files changed
+5082202
No files matched your search
@@ -0,0 +1,452 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
@@include("_include/_head.html")
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap leadership">
|
||||
@@include("_include/_header.html")
|
||||
|
||||
<!-- container -->
|
||||
<div class="container">
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="leadership-hero" aria-label="리더십 소개">
|
||||
<div class="leadership-inner hero-top hero-breadcrumb">
|
||||
<ul class="breadcrumb" aria-label="breadcrumb">
|
||||
<li><a href="./index.html">홈</a></li>
|
||||
<li><a href="./leadership.html">리더십</a></li>
|
||||
<li><span class="current">리더십 시작하기</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 리더십 고정 배너 3종: PC 1442×460 / 모바일 360×234 -->
|
||||
<div class="hero-banner">
|
||||
<div class="swiper hero-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<!-- 프로필 이미지가 있을 때 -->
|
||||
<div class="swiper-slide">
|
||||
<div class="banner-title">
|
||||
<!--
|
||||
/*인사이트 배너 */
|
||||
Editor’s pick : banner_pick.svg / banner_pick_m.svg
|
||||
Top Learner’s Choice : banner_choice.svg / banner_choice_m.svg
|
||||
Hot Issue : banner_issue.svg / banner_issue_m.svg
|
||||
|
||||
/*리더쉽 배너 */
|
||||
leadership : banner_leadership.svg / banner_leadership_m.svg
|
||||
-->
|
||||
<picture>
|
||||
<source media="(min-width: 1025px)" srcset="./assets/images/insight/banner_choice.svg">
|
||||
<source media="(max-width: 1024px)" srcset="./assets/images/insight/banner_choice_m.svg">
|
||||
<img src="./assets/images/insight/banner_choice.svg" alt="Top Learner’s Choice">
|
||||
</picture>
|
||||
</div>
|
||||
<div class="banner-grid">
|
||||
<div class="banner-left">
|
||||
|
||||
<div class="profile-box">
|
||||
<!-- 프로필 이미지가 있을 때 -->
|
||||
<div class="profile-img">
|
||||
<span class="profile-crown">
|
||||
<img src="./assets/images/insight/crown.svg" alt="" />
|
||||
</span>
|
||||
<span class="img-box">
|
||||
<img src="./assets/images/insight/profile.png" alt="" />
|
||||
</span>
|
||||
</div>
|
||||
<!-- 프로필 이미지가 있을 때 END -->
|
||||
<div class="profile-info">
|
||||
<p class="profile-name">
|
||||
<strong class="name">홍길동 선임</strong>
|
||||
<span class="department">총괄기획실</span>
|
||||
</p>
|
||||
<span class="label"><i class="ico-medal"></i>우수학습자</span>
|
||||
</div>
|
||||
</div>
|
||||
<dl>
|
||||
<dt>회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. 회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. </dt>
|
||||
<dd>회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. 콘텐츠 추천 서비스회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. </dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="banner-right">
|
||||
<div class="banner-img">
|
||||
<img src="./assets/images/insight/img_banner_03.png" alt="배너 1">
|
||||
</div>
|
||||
|
||||
<div class="profile-info">
|
||||
<p class="profile-name">
|
||||
<strong class="name">홍길동 선임</strong>
|
||||
<span class="department">총괄기획실</span>
|
||||
</p>
|
||||
<span class="label"><i class="ico-medal"></i>우수학습자</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 프로필 이미지가 있을 때 END -->
|
||||
<!-- 프로필 이미지가 없을 때 -->
|
||||
<div class="swiper-slide">
|
||||
<div class="banner-title">
|
||||
<picture>
|
||||
<source media="(min-width: 1025px)" srcset="./assets/images/insight/banner_choice.svg">
|
||||
<source media="(max-width: 1024px)" srcset="./assets/images/insight/banner_choice_m.svg">
|
||||
<img src="./assets/images/insight/banner_choice.svg" alt="Top Learner’s Choice">
|
||||
</picture>
|
||||
</div>
|
||||
<div class="banner-grid">
|
||||
<div class="banner-left">
|
||||
<div class="profile-box">
|
||||
<div class="profile-info">
|
||||
<p class="profile-name">
|
||||
<strong class="name">홍길동 선임</strong>
|
||||
<span class="department">총괄기획실</span>
|
||||
</p>
|
||||
<span class="label"><i class="ico-medal"></i>우수학습자</span>
|
||||
</div>
|
||||
</div>
|
||||
<dl>
|
||||
<dt>회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. 회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. </dt>
|
||||
<dd>회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. 콘텐츠 추천 서비스회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. </dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="banner-right">
|
||||
<div class="banner-img">
|
||||
<img src="./assets/images/insight/img_banner_03.png" alt="배너 1">
|
||||
</div>
|
||||
<div class="profile-info">
|
||||
<p class="profile-name">
|
||||
<strong class="name">홍길동 선임</strong>
|
||||
<span class="department">총괄기획실</span>
|
||||
</p>
|
||||
<span class="label"><i class="ico-medal"></i>우수학습자</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 프로필 이미지가 없을 때 END -->
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="banner-title">
|
||||
<picture>
|
||||
<source media="(min-width: 1025px)" srcset="./assets/images/insight/banner_pick.svg">
|
||||
<source media="(max-width: 1024px)" srcset="./assets/images/insight/banner_pick_m.svg">
|
||||
<img src="./assets/images/insight/banner_pick.svg" alt="Editor’s pick!">
|
||||
</picture>
|
||||
</div>
|
||||
<div class="banner-grid">
|
||||
<div class="banner-left">
|
||||
<dl>
|
||||
<dt>회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. 회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. </dt>
|
||||
<dd>회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. 콘텐츠 추천 서비스회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. </dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="banner-right">
|
||||
<div class="banner-img">
|
||||
<img src="./assets/images/insight/img_banner_03.png" alt="배너 1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="banner-title">
|
||||
<picture>
|
||||
<source media="(min-width: 1025px)" srcset="./assets/images/insight/banner_issue.svg">
|
||||
<source media="(max-width: 1024px)" srcset="./assets/images/insight/banner_issue_m.svg">
|
||||
<img src="./assets/images/insight/banner_issue.svg" alt="Editor’s pick!">
|
||||
</picture>
|
||||
</div>
|
||||
<div class="banner-grid">
|
||||
<div class="banner-left">
|
||||
<dl>
|
||||
<dt>회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. 회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. </dt>
|
||||
<dd>회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. 콘텐츠 추천 서비스회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. </dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="banner-right">
|
||||
<div class="banner-img">
|
||||
<img src="./assets/images/insight/img_banner_03.png" alt="배너 1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 리더쉽 -->
|
||||
<div class="swiper-slide">
|
||||
<div class="banner-title">
|
||||
<picture>
|
||||
<source media="(min-width: 1025px)" srcset="./assets/images/leadership/banner_leadership.svg">
|
||||
<source media="(max-width: 1024px)" srcset="./assets/images/leadership/banner_leadership_m.svg">
|
||||
<img src="./assets/images/leadership/banner_leadership.svg" alt="leadership">
|
||||
</picture>
|
||||
</div>
|
||||
<div class="banner-grid">
|
||||
<div class="banner-left">
|
||||
<dl>
|
||||
<dt>회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. 회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. </dt>
|
||||
<dd>회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. 콘텐츠 추천 서비스회사에서 추천하는 영상에
|
||||
대해 왜 봐야하는지 문구를 넣습니다.
|
||||
최대 3줄 입력이 가능합니다. </dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="banner-right">
|
||||
<div class="banner-img">
|
||||
<img src="./assets/images/insight/img_banner_03.png" alt="배너 1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 리더쉽 END -->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="swiper-pagination hero-pagination" aria-hidden="true"></div>
|
||||
</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="./assets/images/ico/ico_leadership_01.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="./assets/images/ico/ico_leadership_02.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="./assets/images/ico/ico_leadership_03.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="./assets/images/ico/ico_leadership_04.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="./assets/images/ico/ico_leadership_05.svg" alt="" /></span>
|
||||
<span class="tab-text">인물탐구</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- List -->
|
||||
<section class="leadership-video-list" aria-label="리더십 콘텐츠 목록">
|
||||
<div class="leadership-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 selected>조회수</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_l1" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l1" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="./assets/images/video/img_thumb_01.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">목표관리, 성과관리의 차이? 더 중요한 것은?</strong>
|
||||
<span class="item-desc">리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l2" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l2" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="./assets/images/video/img_thumb_02.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">[경영 추천도서] 팀장이 처음이신가요? | 팀장 리더십 수업</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l3" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l3" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="./assets/images/video/img_thumb_03.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">경제경영이론을 이용한 동기부여 이론들</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l4" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l4" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="./assets/images/video/img_thumb_04.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">DT시대의 애자일 경영, 비즈니스 어질리티</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l5" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l5" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="./assets/images/video/img_thumb_05.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">조직문화가 저희의 가장 강력한 무기입니다...</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l6" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l6" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="./assets/images/video/img_thumb_06.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">꼰대가 되지 않고 건설적인 피드백을 하는 법</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l7" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l7" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="./assets/images/video/img_thumb_07.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">제대로 된 평가 면담, 어떻게 할 수 있을까? (SAS, 듀폰)</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l8" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l8" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="./assets/images/video/img_thumb_04.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">성장 마인드셋 실패에서 배우기</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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,
|
||||
},
|
||||
});
|
||||
|
||||
// Tabs
|
||||
const tabs = Array.from(document.querySelectorAll('.leadership-tab'));
|
||||
if (!tabs.length) return;
|
||||
|
||||
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>
|
||||
|
||||
</div>
|
||||
<!-- // container -->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user