HTML <footer> 태그로 웹 페이지 마무리하기

HTML <footer> 태그로 웹 페이지 마무리하기

웹 페이지에서 바닥글(footer)은 중요한 정보를 제공하는 역할을 합니다. 사이트의 저작권 정보, 연락처, 네비게이션 링크, 소셜 미디어 아이콘 등 다양한 요소를 포함할 수 있습니다. 이 글에서는 HTML5의 <footer> 태그를 사용하여 웹 페이지의 바닥글을 효과적으로 구성하는 방법을 기본부터 고급 활용까지 다루겠습니다.

 

 

• 1. <footer> 태그 소개
• 2. 기본 사용법
• 3. <footer> 태그의 고급 활용
• 4. 결론

 

1. <footer> 태그 소개

<footer> 태그는 HTML5에서 도입된 시맨틱 요소로, 웹 페이지의 바닥글을 정의하는 데 사용됩니다. 주로 사이트나 페이지의 저작권 정보, 법적 고지, 연락처 정보, 사이트맵, 소셜 미디어 링크 등을 포함합니다.

 

 

2. 기본 사용법

<footer> 태그를 사용하는 기본적인 방법은 다음과 같습니다.

<footer>
    <p>© 2024 Your Website. All rights reserved.</p>
    <p>Contact us: <a href="mailto:info@yourwebsite.com">info@yourwebsite.com</a></p>
</footer>

위 예제는 간단한 저작권 정보와 연락처 정보를 포함하는 바닥글을 생성합니다.

 

 

 

3. <footer> 태그의 고급 활용

<footer> 태그는 다양한 요소를 포함하여 더 복잡한 레이아웃을 만들 수 있습니다. 예를 들어, 네비게이션 링크, 소셜 미디어 아이콘, 추가 연락처 정보를 포함할 수 있습니다.

3.1 네비게이션 링크 포함하기

<footer>
    <nav>
        <ul>
            <li><a href="/about">About Us</a></li>
            <li><a href="/services">Services</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</footer>

위 예제는 바닥글에 네비게이션 링크를 추가하는 방법을 보여줍니다.

3.2 소셜 미디어 아이콘 포함하기

<footer>
    <div>
        <a href="https://twitter.com/yourprofile">Twitter</a>
        <a href="https://facebook.com/yourprofile">Facebook</a>
        <a href="https://instagram.com/yourprofile">Instagram</a>
    </div>
</footer>

위 예제는 바닥글에 소셜 미디어 링크를 추가하는 방법을 보여줍니다.

3.3 복합 예제

다양한 요소를 포함한 복잡한 바닥글의 예제입니다.

<footer>
    <div class="footer-content">
        <nav>
            <ul>
                <li><a href="/about">About Us</a></li>
                <li><a href="/services">Services</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
        <div class="social-media">
            <a href="https://twitter.com/yourprofile">Twitter</a>
            <a href="https://facebook.com/yourprofile">Facebook</a>
            <a href="https://instagram.com/yourprofile">Instagram</a>
        </div>
        <div class="contact-info">
            <p>© 2024 Your Website. All rights reserved.</p>
            <p>Contact us: <a href="mailto:info@yourwebsite.com">info@yourwebsite.com</a></p>
        </div>
    </div>
</footer>

 

 

결론

<footer> 태그는 웹 페이지의 바닥글을 정의하는 데 매우 유용한 HTML5 요소입니다. 기본적인 정보부터 복잡한 레이아웃까지 다양한 요소를 포함하여 웹 페이지를 더 유용하고 사용자 친화적으로 만들 수 있습니다. 이 글에서 소개한 방법들을 활용하여 자신의 웹 페이지에 맞는 바닥글을 설계해보세요.