<footer class="oopy-my-footer">
    <div class="oopy-my-footer-mobile-toggle" id="footer-toggle">
        <h4>주식회사우피 - 푸터상세보기</h4>
        <span class="oopy-my-footer-mobile-toggle-button">▼</span>
    </div>
    
    <div class="oopy-my-footer-container" id="footer-content">
        <div class="oopy-my-footer-column">
            <h3>주식회사우피</h3>
            <p>대표자: 최종욱</p>
            <p>사업자등록번호: 230-87-01940</p>
            <p>통신판매업신고번호: 2024-서울종로-0289</p>
            <p>주소: 서울특별시 종로구 세종대로23길 47, 603-제이82호</p>
            <p>문의: support@oopy.io</p>
        </div>
        
        <div class="oopy-my-footer-column">
            <h3>바로가기</h3>
            <ul>
                <li><a href="/ko/terms-of-use">이용약관</a></li>
                <li><a href="/ko/privacy">개인정보처리방침</a></li>
                <li><a href="/ko/guides/tips-and-tricks/oopy-my-footer">이런 푸터 만드는 방법</a></li>
            </ul>
        </div>
    </div>
    
    <div class="oopy-my-footer-copyright">
        <p>&copy; 2025 Oopy Inc. All Rights Reserved.</p>
    </div>
</footer>

<script>
    // 모바일 푸터 토글 기능을 위한 스크립트
    // 데스크톱에서는 이 스크립트가 영향을 주지 않습니다.
    const footerToggle = document.getElementById('footer-toggle');
    const footerContent = document.getElementById('footer-content');

    if (footerToggle && footerContent) {
        footerToggle.addEventListener('click', () => {
            // is-open 클래스를 컨테이너와 버튼 자체에 토글합니다.
            footerContent.classList.toggle('is-open');
            footerToggle.classList.toggle('is-open');
        });

        // 초기 상태 설정 (데스크톱에서는 항상 열려 있도록)
        function checkFooterView() {
            if (window.innerWidth > 768) {
                footerContent.classList.add('is-open');
                // 데스크톱 뷰에서는 토글 버튼에 is-open 클래스를 제거하여 화살표 방향을 초기화합니다.
                footerToggle.classList.remove('is-open');
            } else {
                 // 모바일 뷰로 전환될 때 기본적으로 닫힌 상태로 만듭니다.
                 footerContent.classList.remove('is-open');
                 footerToggle.classList.remove('is-open');
            }
        }
        
        // 페이지 로드 시 및 창 크기 변경 시 뷰 체크
        checkFooterView();
        window.addEventListener('resize', checkFooterView);
    }
</script>

www.oopy.io

게시일

이름

우피는 노션 페이지를 최적화된 웹사이트로 바꿔드립니다. 원하는 주소를 연결하여 나만의 홈페이지를 시작해 보세요

공유 이미지 설정, 푸터 가이드를 추가했어요

공유 이미지 설정 가이드(베스트 프랙티스)를 추가했어요

HTML 기능을 이용해서 간단히 푸터를 만들 수 있어요