푸터 유형_01을 한번 만들어보자!

푸터 유형_01

홈페이지를 받쳐줄 하단인 푸터 메뉴를 구현해보겠습니다!

---

Figma

우선 피그마를 통해 기초적인 틀을 잡습니다!

---

HTML

html을 통해 기본적인 예제를 만들 뼈대를 구성합니다!

<footer id="footerType" class="footer__wrap nexon section gray">
    <h2 class="blind">푸터 영역</h2>
    <div class="footer__inner container">
        <div class="footer__menu">
            <div>
                <h3>사이트</h3>
                <ul>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                </ul>
            </div>
            <div>
                <h3>사이트</h3>
                <ul>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                </ul>
            </div>
            <div>
                <h3>사이트</h3>
                <ul>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                </ul>
            </div>
            <div>
                <h3>사이트</h3>
                <ul>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                </ul>
            </div>
            <div>
                <h3>사이트</h3>
                <ul>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                </ul>
            </div>
            <div>
                <h3>사이트</h3>
                <ul>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">웹표준 사이트</a></li>
                </ul>
            </div>
        </div>
        <div class="footer__right">
            2022 CODi. Portfolio is power<br>
            All rights reserved.
        </div>
    </div>
</footer>

CSS

이제 완성된 뼈대에 살을 붙여주어 푸터를 완성하기 위해 CSS를 작성해줍시다!

.footer__menu{
    display: flex;
}
.footer__menu > div {
    width: 16%;
    margin-bottom: 70px;
}

.footer__menu > div h3 {
    font-size: 18px;
    margin-bottom: 20px;
}

.footer__menu li a{
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    display: block;
}

.footer__right{
    border-top: 1px solid #d9d9d9;
    text-align: center;
    padding-top: 40px;
    color: #666;
    line-height: 1.5;
}

---

완성예시

---

원본 소스 보기

원본 페이지 보기