728x90
반응형

 

완성 화면

 

 

 

 

 

푸터 유형 사이트

 

 

 

 

 

 

코드 보기 / HTML

  <footer class="footer__wrap section nexon">
        <div class="container">
            <h2 class="blind">footer</h2>
            <div class="footer__inner">
                <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>
                        </ul>
                    </div>
                    <div>
                        <h3>은하수의 종류</h3>
                        <ul>
                            <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>
                        </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>
                        </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>
                        </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>
                        </ul>
                    </div>
                </div>
                <address class="footer__right">
                    2023 Byun Woo Hyun 은하수 사이트 Portfolio is Power <br>All Right Reserved 
                </address>
            </div>
        </div>
    </footer>

 

 

 

 

 

코드 보기 / CSS

 /* reset */
         * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
            color:#000;
        }
        h1,h2,h3,h4,h5,h6 {
            font-weight: normal;
        }
        img {
            vertical-align: top;
            width: 100%;
        }
        .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: #AC43FF;
            color: #fff;
            padding: 1px 23px;
            text-transform: uppercase;
            margin-bottom: 20px;
            display: inline-block;
        }
        .section__h2 {
            font-size: 50px;
            color: #000;
            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 {
            background-color: #7B06A4;
            color: #fff;
        }
        .footer__menu{
            display: flex;
        }
        .footer__menu >  div {
            width: 16.6666%;
        }
        .footer__menu >  div h3 {
            margin-bottom: 13px;
            font-size: 18px;
            font-weight: bold;
        }
        .footer__menu >  div li {
            line-height: 1.5;
            font-size: 14px;
        }
        .footer__menu >  div li a{
            color:#fff;
        }
        .footer__right {
            text-align: center;
            margin-top: 50px;
            border-top: 3px solid #fff;
            padding-top: 50px;
            font-style: normal;
            line-height: 1.55;
        }

 

.footer__wrap

: footer__wrap 클래스를 가진 요소에 대한 스타일링이다.

푸터 전체의 배경색과 글자 색상을 지정한다. 배경 색상은 #7B06A4이며, 글자 색상은 #fff이다.

 

 

 

.footer__menu > div  (> 는 자식 선택자로 footer__menu의 자식 요소인 div에만 속성을 적용)

: footer__menu 클래스를 가진 요소의 자식 요소들에 대한 스타일링이다. display 속성을 flex로 지정하여 자식 요소(내부의 메뉴항목)들을 가로 정렬하게 만든다.

자식 요소들의 너비를 16.6666%로 일정하게 지정하여 총 6개의 자식 요소가 동일한 너비를 갖게 한다.

 

 

 

.footer__menu > div h3

: 각 메뉴 항목의 제목에 대한 스타일을 지정한다.

요소의 아래 여백을 13px로 설정하여 h3 요소 아래쪽 여백을 만든다.

글자 크기는 18px로, 글자 굵기를 굵게 설정한다.

 

 

 

.footer__menu > div li

: 각 메뉴 항목 내부의 리스트 항목에 대한 스타일을 지정한다.

줄간격 속성을 1.5만큼 설정하여 li 요소의 라인 높이를 조절하고, 글자 크기를 14px로 지정한다.

 

 

 

.footer__menu > div li a

: 각 리스트 항목에 대한 링크의 스타일을 지정한다.

a 태그로 감싸진 글자들의 색상을 흰색(#fff)로 설정하여 하이퍼링크나 글자의 색상을 변경한다.

 

 

 

.footer__right

: 푸터의 오른쪽 영역에 대한 스타일을 지정한다.

이 영역은 텍스트 정렬을 가운데로 지정하고, 상단에 3px 두께의 흰색 선을 그려낸다.

그리고 위쪽 패딩값을 50px 지정하며, 폰트 스타일과 줄간격(line-height)에 대한 스타일을 지정한다.

 

 

 

 

 

 

 

 

 

 

+ Recent posts