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/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/Cyzfp12JLJC/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==

성공을 찾는 선배 창업가의 이야기 스타트업 대표님들은 항상 고민이 많죠. 답이 없어 보이는 고민에 대한 실마리를 어디서 찾을까요? 바로 책입니다.

https://www.instagram.com/p/Cy4lLzwpn6A/?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


인사/조직문화

컨텐츠 가로형 배너.png

컨텐츠 가로형 배너 (1).png

https://orangepark.oopy.io/7a7472eb-6455-4569-aa3c-faa686a7e6c3

https://orangepark.oopy.io/7a7472eb-6455-4569-aa3c-faa686a7e6c3