Skip to content

Commit

Permalink
Merge pull request #46 from weniv/feat/ads-banner
Browse files Browse the repository at this point in the history 
📝 PR: 광고 배너 동적 처리
  • Loading branch information
@gyeongbaek
gyeongbaek authored Dec 4, 2023
2 parents b8f349c + 7bac7a2 commit cb42024
Show file tree
Hide file tree
Showing 14 changed files with 837 additions and 916 deletions.
2 changes: 2 additions & 0 deletions .prettierignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
index.html
*.md
87 changes: 11 additions & 76 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,83 +232,18 @@ <h4 class="sr-only">인공지능에게 질문하기</h4>
</button>
</article>

<div id="kg-carousel">
<!-- ad image -->
<ul id="kg-inner">
<li class="kg-img">
<a href="https://inf.run/6grz" target="_blank">
<img src="./src/img/kg0.webp" loading="lazy" alt="JavaScript 알고리즘 베스트 10 강의 바로가기" />
</a>
</li>
<li class="kg-img">
<a href="https://scholarship.weniv.co.kr/" target="_blank">
<img src="./src/img/kg1.webp" loading="lazy" alt="위니브 청년 ICT 부스트 장학금 바로가기">
</a>
</li>
<!-- <li>
<a href="https://techit.education/school/kdt-frontend-5th" target="_blank">
<img src="./src/img/kg2.webp" loading="lazy" alt="테킷 프론트엔드스쿨 바로가기">
</a>
</li>
<li>
<a href="https://techit.education/school/kdt-dataanalysis-1st" target="_blank">
<img src="./src/img/kg3.webp" loading="lazy" alt="테킷 데이터분석스쿨 바로가기">
</a>
</li> -->
<li>
<a href="https://www.inflearn.com/course/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EB%B6%80%ED%8A%B8%EC%BA%A0%ED%94%84" target="_blank">
<img src="./src/img/kg4.webp" loading="lazy" alt="파이썬 부트캠프 바로가기">
</a>
</li>
<li>
<a href="https://inf.run/RCuz" target="_blank">
<img src="./src/img/kg5.webp" loading="lazy" alt="눈떠보니 코딩테스트 전날 바로가기">
</a>
</li>
<!-- <li>
<a href="https://estfamily.career.greetinghr.com/kdtest" target="_blank">
<img src="./src/img/kg6.webp" loading="lazy" alt="이스트소프트 오르미 1기 백엔드 개발자 부트캠프 바로가기">
</a>
</li> -->
<!-- 배너 추가 삭제시 아래 radio 및 js.css 수정 필요 -->
</ul>

<!-- pagination -->
<button id="kg-before">
<img src="./src/img/chevron-prev.webp" alt="광고 뒤로가기"/>
</button>
<input type="radio" checked class="kg-pagination" name="radio-btn" id="radio1">
<input type="radio" class="kg-pagination" name="radio-btn" id="radio2">
<input type="radio" class="kg-pagination" name="radio-btn" id="radio3">
<input type="radio" class="kg-pagination" name="radio-btn" id="radio4">
<!-- <input type="radio" class="kg-pagination" name="radio-btn" id="radio5"> -->
<!-- <input type="radio" class="kg-pagination" name="radio-btn" id="radio6"> -->
<!-- <input type="radio" class="kg-pagination" name="radio-btn" id="radio7"> -->
<button id="kg-next">
<img src="./src/img/chevron-prev.webp" alt="광고 넘어가기"/>
</button>

<div id="kg-nav">
<div id="nav-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div>
<!-- <div class="auto-btn5"></div> -->
<!-- <div class="auto-btn6"></div> -->
<!-- <div class="auto-btn7"></div> -->
</div>

<div id="nav-maunal">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label>
<!-- <label for="radio5" class="manual-btn"></label> -->
<!-- <label for="radio6" class="manual-btn"></label> -->
<!-- <label for="radio7" class="manual-btn"></label> -->
</div>
<div class="kg-carousel">
<ul class="kg-list"></ul>
<div class="btn-cont">
<button class="prev-btn">
<img src="./src/img/chevron-prev.webp" alt="광고 뒤로가기"/>
</button>
<button class="next-btn">
<img src="./src/img/chevron-next.webp" alt="광고 넘어가기"/>
</button>
</div>
<ul class="page-list">
</ul>
</div>

<py-script>
Expand Down
47 changes: 15 additions & 32 deletions src/css/js.css
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,40 @@
/* 개별 */
nav ol li a.active {
color: var(--ColorMain);
color: var(--ColorMain);
}
.cta-btn {
color: var(--ColorDeep);
color: var(--ColorDeep);
}
.chatroom .chat-list li.chat-bot {
background-color: #fbe8a6;
background-color: #fbe8a6;
}
.cont-chat .inp-chat button {
color: var(--ColorDeep);
color: var(--ColorDeep);
}
.description a {
color: var(--ColorMain);
color: var(--ColorMain);
}
.editor .btn-contain #btn-run {
color: var(--ColorDeep);
color: var(--ColorDeep);
}

#kg-carousel #kg-nav #nav-auto div {
border: 1.5px solid var(--ColorDeep);
}

#kg-carousel #radio1:checked ~ #kg-nav #nav-auto .auto-btn1,
#kg-carousel #radio2:checked ~ #kg-nav #nav-auto .auto-btn2,
#kg-carousel #radio3:checked ~ #kg-nav #nav-auto .auto-btn3,
#kg-carousel #radio4:checked ~ #kg-nav #nav-auto .auto-btn4,
#kg-carousel #radio5:checked ~ #kg-nav #nav-auto .auto-btn5,
#kg-carousel #radio6:checked ~ #kg-nav #nav-auto .auto-btn6,
/* #kg-carousel #radio7:checked ~ #kg-nav #nav-auto .auto-btn7, */
#kg-carousel #kg-nav #nav-maunal .manual-btn:hover {
background-color: var(--ColorDeep);
}
#kg-carousel #kg-nav #nav-maunal > .manual-btn {
border: 1.5px solid var(--ColorDeep);
}
.menu-list .menu-item a,
.menu-list .menu-item button {
color: var(--ColorMain);
color: var(--ColorMain);
}
/* class */
.question {
color: black;
font-size: 12px;
color: black;
font-size: 12px;
}

.btn-exec {
padding: 0.8rem 1.3rem;
background: var(--ColorMain);
color: var(--ColorDeep);
font-weight: bold;
border-radius: 3px;
padding: 0.8rem 1.3rem;
background: var(--ColorMain);
color: var(--ColorDeep);
font-weight: bold;
border-radius: 3px;
}
#kg-carousel #kg-next {
transform: rotate(180deg);
transform: rotate(180deg);
}
Loading

0 comments on commit cb42024

Please sign in to comment.