hideNotionTitle: true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>롤링 슬라이드 쇼</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.slider {
position: fixed; /* 화면 상단에 고정 */
top: 0; /* 페이지 상단에 고정 */
left: 0;
width: 100vw; /* 화면 너비에 맞춤 */
height: 20vh; /* 슬라이드 높이 */
overflow: hidden; /* 스크롤 숨기기 */
z-index: 1; /* 텍스트보다 앞에 오도록 설정 */
}
.slides {
display: flex;
height: 100%;
transition: transform 1s; /* 롤링 시 전환 효과 */
}
.slides img {
min-width: 100%; /* 최소 너비 100% */
height: 100%;
object-fit: contain; /* 비율을 유지하면서 이미지 표시 */
cursor: pointer; /* 클릭 가능 표시 */
}
nav.navbar {
position: fixed;
top: 20vh; /* 슬라이더 높이만큼 아래로 이동 */
z-index: 2; /* 슬라이더보다 앞에 오도록 설정 */
background-color: white; /* 배경색 설정 */
width: 100%;
}
nav.navbar a, nav.navbar ul, nav.navbar li {
display: none; /* 텍스트를 숨김 */
}
@media (max-width: 768px) {
.slider, nav.navbar {
display: none; /* 화면 크기가 작아졌을 때 슬라이더와 네비게이션 바 숨기기 */
}
}
</style>
</head>
<body>
<div class="slider">
<div class="slides">
<img src="<https://ifh.cc/g/dSLSK5.jpg>" alt="Slide 1" class="slide-link" data-link="<https://orangeplanet.or.kr/main>">
<img src="<https://ifh.cc/g/DNN8Lz.jpg>" alt="Slide 2" class="slide-link" data-link="<https://orangepark.oopy.io/0b0b987f-b645-43f7-8290-b7410dbc0220>">
<img src="<https://ifh.cc/g/VRzp0q.jpg>" alt="Slide 3" class="slide-link" data-link="<https://www.instagram.com/orangeplanet_official/>">
</div>
</div>
<nav class="navbar">
<div class="container">
<a href="/" class="navbar-brand">My Website</a>
<ul class="navbar-nav">
<li class="nav-item"><a href="/home" class="nav-link">Home</a></li>
<li class="nav-item"><a href="/about" class="nav-link">About</a></li>
<li class="nav-item"><a href="/services" class="nav-link">Services</a></li>
<li class="nav-item"><a href="/contact" class="nav-link">Contact</a></li>
</ul>
</div>
</nav>
<script type="text/javascript">
const slides = document.querySelector('.slides');
const slideImages = slides.querySelectorAll('.slide-link');
const slideCount = slides.children.length;
let currentIndex = 0;
// 슬라이드 클릭 시 링크로 이동하는 함수
slideImages.forEach(slide => {
slide.addEventListener('click', (event) => {
const link = event.currentTarget.dataset.link;
if (link) {
window.open(link, '_blank');
}
});
});
function showSlide(index) {
const offset = -index * 100;
slides.style.transform = `translateX(${offset}%)`;
}
function startSlider() {
setInterval(() => {
currentIndex = (currentIndex + 1) % slideCount;
showSlide(currentIndex);
}, 4000); // 4초 간격으로 슬라이드 변경
}
window.onload = () => {
showSlide(currentIndex);
setTimeout(startSlider, 3000); // 첫 슬라이드 3초간 정지 후 시작
};
// 창 크기가 변경될 때 슬라이더 크기 재설정
window.onresize = () => {
showSlide(currentIndex);
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>금주의 컨텐츠 롤링 슬라이드 쇼</title>
<style>
@import url('<https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap>');
@import url('<https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap>');
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.custom-slider {
position: relative;
width: 100%;
height: auto; /* 자동 높이 설정 */
overflow: hidden; /* 슬라이드가 넘치지 않도록 설정 */
}
.custom-slides {
display: flex;
width: 200%; /* 슬라이드 수에 맞게 조정 */
animation: custom-slide 8s infinite; /* 8초 동안 무한 반복 */
}
.custom-slide-item {
flex: 0 0 50%; /* 슬라이드 수에 맞게 조정 */
display: flex;
justify-content: center;
align-items: center;
height: auto; /* 자동 높이 설정 */
cursor: pointer; /* 클릭 가능하도록 커서 변경 */
}
.custom-slide-item img {
width: 100%;
height: auto; /* 이미지 높이 자동 조정 */
object-fit: contain; /* 비율을 유지하면서 이미지 표시 */
}
.dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 5px;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
transition: background-color 0.3s;
}
.dot.active {
background-color: rgba(255, 255, 255, 1);
}
@keyframes custom-slide {
0%, 50% { transform: translateX(0); }
55%, 100% { transform: translateX(-50%); }
}
/* 모바일 버전에서 이미지를 변경하는 미디어 쿼리 */
@media (max-width: 768px) {
.custom-slide-item:nth-child(1) img {
content: url('<https://ifh.cc/g/sD3bnt.jpg>');
}
.custom-slide-item:nth-child(2) img {
content: url('<https://ifh.cc/g/L4wz9T.png>');
}
}
</style>
</head>
<body>
<div class="custom-slider">
<div class="custom-slides">
<div class="custom-slide-item" onclick="navigateTo('<https://opfoptest.oopy.io/eaa1feb3-7d2e-43af-933c-23a5f0da2ee2>')">
<img src="<https://ifh.cc/g/9xXGnM.jpg>" alt="Slide 1">
</div>
<div class="custom-slide-item" onclick="navigateTo('<https://opfoptest.oopy.io/eaa1feb3-7d2e-43af-933c-23a5f0da2ee2>')">
<img src="<https://ifh.cc/g/f9qZ80.jpg>" alt="Slide 2">
</div>
</div>
<div class="dots">
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<script>
function navigateTo(url) {
window.location.href = url;
}
</script>
</body>
</html>
https://www.instagram.com/p/Cye78sUp19n/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==
출시하지 말아야하는 프러덕트? 실험 문화를 구축하는 방법, 실험을 이해하는 방법, 우선 순위에 따라 실험 로드맵을 설정하는 방법 등이 궁금하다면
https://www.instagram.com/p/Cyzfp12JLJC/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==
성공을 찾는 선배 창업가의 이야기 스타트업 대표님들은 항상 고민이 많죠. 답이 없어 보이는 고민에 대한 실마리를 어디서 찾을까요? 바로 책입니다.
https://www.instagram.com/p/Cy4lLzwpn6A/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==
흥미로운 게임 아트 이야기 하상석 대표님께서 여러가지 게임 개발 사례를 통해 게임 개발에서 아티스트와 기획자 간의 협력이 얼마나 중요한지 강조했습니다.
https://orangepark.oopy.io/7a7472eb-6455-4569-aa3c-faa686a7e6c3
https://orangepark.oopy.io/7a7472eb-6455-4569-aa3c-faa686a7e6c3