My Melody Kawaii

페이지 제작

페이지 유형 하단에 나오는 푸터를 만들어보자!

younajeong 2023. 3. 22. 23:57

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90

푸터 유형

 

페이지에서 푸터 유형은 맨 밑 하단에 위치해 있으며 정보 및 연락처가 나와 있거나 사이트 링크 섹션, 소셜미디어 섹션,구독섹션,저작권섹션,이전/다음페이지 링크 섹션,페이지 맨위로 링크등이 제공됩니다.

 

 

 

pigma

pigma

  • 피그마를 사용하여 그리드를 이용해서 전체적인 틀을 잡아줍니다.

 

HTML

<body>
    <footer class="footer__wrap section nexon">
        <div class="container">
            <h2 class="blind">푸터</h2>
            <div class="footer__inner">
                <div class="footer__menu">
                    <div>
                        <h3>Festival Ticket</h3>
                        <ul>
                            <li><a href="#">티켓예매</a></li>
                            <li><a href="#">티켓예약</a></li>
                            <li><a href="#">티켓 유의사항</a></li>
                            <li><a href="#">현장 발권</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3>Festival News</h3>
                        <ul>
                            <li><a href="#">DJ 인터뷰</a></li>
                            <li><a href="#">NEW MUSIC</a></li>
                            <li><a href="#">메거진</a></li>
                            <li><a href="#">DJ V LIVE</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3>Festival Music</h3>
                        <ul>
                            <li><a href="#">음원 예약하기</a></li>
                            <li><a href="#"> 음원 구매하기</a></li>
                            <li><a href="#">음악 듣기</a></li>
                            <li><a href="#">음원 및 저작권</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3>Festival F.lab</h3>
                        <ul>
                            <li><a href="#">F.lab 소개</a></li>
                            <li><a href="#"> 페스티벌 즐기는 법</a></li>
                            <li><a href="#"> F.lab 신청하기</a></li>
                            <li><a href="#">F.lab 사람들</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3>Festival world</h3>
                        <ul>
                            <li><a href="#">페스티벌 종류</a></li>
                            <li><a href="#"> 세계 음악 역사</a></li>
                            <li><a href="#">페스티벌 역사</a></li>
                            <li><a href="#">떠나자 Festival</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3>Festival 주의사항 </h3>
                        <ul>
                            <li><a href="#">주의사항</a></li>
                            <li><a href="#">유의사항</a></li>
                            <li><a href="#">에티켓</a></li>
                            <li><a href="#">모두가 즐기기 위한</a></li>
                        </ul>
                    </div>
                </div>
                <div>
                <address class="footer__right">
                    2023 youna의 Festival 사이트 F.lab<br>Enjoy Festival
                </address>
            </div>
        </div>
    </footer>
</body>

pigma

HTML

  • footer 에 class footer__wrap을 설정 해 줍니다. 그리고 그 안에 들어갈 section과 폰트체를 써줍니다.
  • footer__inner를 만들어 주고 그 안에 footer__menu를 설정합니다.
  • menu안에 div박스 6개를 만들어서 footer안에 들어갈 제목과 내용을 6가지로 써주는데 내용은 하나하나 정렬 시키기 위해 ul,li태그를 써줍니다.
  • 마지막 맨 밑에는 간략한 사이트 소개가 들어갈거기 때문에 address를 사용해서 footer__right를 써 준 후 사이트를 써줍니다.

 

CSS

<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
    
    <style>   
            /* reset */
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
            color: #000;
        }
        h1, h2, h3, h4, h5, h6 {
            font-weight: normal;
        }
        img {
            vertical-align: top;
            width: 100%;
        }
        li {
                list-style: none;
            }
        .blind {
            position: absolute;
            clip: rect(0 0 0 0);
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden;
        }
        .mt10 {margin-top: 10px !important;}
        .mt20 {margin-top: 20px !important;}
        .mt30 {margin-top: 30px !important;}
        .mt40 {margin-top: 40px !important;}
        .mt50 {margin-top: 50px !important;}
        .mt60 {margin-top: 60px !important;}
        .mt70 {margin-top: 70px !important;}
        .mb10 {margin-bottom: 10px !important;}
        .mb20 {margin-bottom: 20px !important;}
        .mb30 {margin-bottom: 30px !important;}
        .mb40 {margin-bottom: 40px !important;}
        .mb50 {margin-bottom: 50px !important;}
        .mb60 {margin-bottom: 60px !important;}
        .mb70 {margin-bottom: 70px !important;}
            /* common */
        .container {
            width: 1160px;
            margin: 0 auto;
            padding: 0 20px;
                /* background-color: rgba(0,0,0,0.1); */
        }
        .nexon {
            font-family: 'NexonLv1Gothic';
            font-weight: 400;
        }
        .section {
            padding: 120px 0;
        }
        .section.center {
            text-align: center;
        }
        .section__small {
        font-size: 14px;
        border-radius: 50px;
        background-color: rgba(237, 41, 176, 0.69);
        color: #fff;
        padding: 1px 23px; 
        text-transform: uppercase; 
        margin-bottom: 20px; 
        display: inline-block;        
        }
        .section__h2 {
            font-size: 50px;
            font-weight: 400;
            margin-bottom: 30px;
            line-height: 1;
        }
        .section__desc {
            font-size: 22px;
            color: #666;
            margin-bottom: 70px;
            font-weight: 300;
            line-height: 1.5;
        }
        /* footer__wrap */

        .footer__menu {
            display: flex;
        }
        .footer__menu > div {
            width: 16.666%;
        }
        .footer__menu > div h3 {
            margin-bottom: 13px;
        }
        .footer__menu > div li {
            line-height: 1.9;
            font-size: 14px;
        }
        .footer__menu >div li a {
            color: #666;
        }
        .footer__right {
            margin-top: 50px;
            border-top: 1px solid #d9d9d9;
            padding-top: 50px;
            text-align: center;
            font-style: normal;
            line-height: 1.6em;
            color: #666;
            font-size: 14px;
        }
    </style>

CSS

  • 저번 사이트 wrap부분 전까지 복사해서 가져와서 footer__wrap이라고 지정해 줍니다.
  • footer__menu에 display-flex를 부여해 줍니다.
  • 또한 footer__menu에 들어갈 div width값을 16.666%를 줍니다.
  • 그리고 div h3와 li에 들어갈 속성을 부여해줍니다.
  • right에는 선이 들어가는데 border-top 1px과 solid와 색상을 부여해서 선을 만들어 줍니다.

 

❥코딩으로 완성된 푸터

 

✏️다시한번 정리하는 속성

margin-top 상단 여백
border-top 테두리 상단 (두께,모양,색상) 일괄 지정 단축 
line-height 줄 높이 지정
adress 회사와 연락할 수 잇는 정보를 명시할 때 사용