푸터 유형의 페이지를 만들어봅시다~!!

푸터 유형 페이지 만들기

피그마에서 만든 디자인을 그대로 코딩해보도록 하겠습니다.

기본 CSS 리셋값 설정하기

CSS리셋 (CSS Reset)은 웹사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다. 초기 설정을 해두면 폰트라던지 마진, 패딩값이 먹혀서 편하겠죠??

<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__small {
        font-size: 14px;
        border-radius: 50px;
        background-color: #ff4191;
        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;
    }
</style>

푸터 섹션 구성해주기

<body>
    <footer class="footer__wrap section nexon">
        <div class="container">
            <h2 class="blind">푸터</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>
                            <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>조향 TIP</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>
                <address class="footer__right">
                    2023 여다슬 향수 사이트 Portfolio is Power<br>All Right Reserved
                </address>
            </div>
        </div>
    </footer>
</body>

footer__inner를 정해준 뒤, footer__menu에 ui li를 설정해주고 내용들을 적어줍니다.

그리고 맨 밑에 들어가는 address 태그를 사용해 footer__right라는 이름을 붙여줍니다.

구조를 잘 짜주기만 해도 소스가 깔끔하고 CSS도 설정해주기 편해집니당 >__<!

푸터 구역 CSS 설정해주기

/* 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.7;
    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.6;
    color: #666;
    font-size: 14px;

}

이번엔 각각 footer__menu에 display: flex;로 정렬을 해줍니다.

그리고 div박스의 width값을 16.6666%로 나눠줍니다. 그리고 여기서 중요한 건 li태그를 썼기 때문에 li list style을 none으로 바꿔줍니다.

CSS 사전

text-align	속성은 텍스트 정렬 방식을 설정합니다.
vertical-align	인라인 요소의 수직 정렬 방법을 설정하는 속성입니다.
justify-content	CSS Flexbox 레이아웃에서 주 축(main axis)을 따라 플렉스 아이템(flex item)을 정렬하는 속성입니다.
background-repeat	배경 이미지의 반복 여부를 지정하는 속성입니다.
background-position	배경 이미지의 위치를 지정하는 속성입니다.
background-image	요소의 배경 이미지를 설정하는 속성입니다.
display	요소의 표시 방법(display method)을 설정하는 속성입니다.

완성된 페이지와 링크

코드 보기 / 완성 화면

다른 유형의 페이지 보러가기

카드 유형 : https://duektmf34.tistory.com/32

이미지 유형 : https://duektmf34.tistory.com/37

이미지텍스트 유형 : https://duektmf34.tistory.com/42

슬라이드 유형 : https://duektmf34.tistory.com/43

텍스트 유형 : https://duektmf34.tistory.com/48

배너 유형 : https://duektmf34.tistory.com/59

728x90

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

푸터 유형의 페이지를 만들어봅시다~!!

푸터 유형 페이지 만들기

기본 CSS 리셋값 설정하기

푸터 섹션 구성해주기

푸터 구역 CSS 설정해주기

CSS 사전

완성된 페이지와 링크

다른 유형의 페이지 보러가기

푸터 유형 페이지 만들기

기본 CSS 리셋값 설정하기

푸터 섹션 구성해주기

푸터 구역 CSS 설정해주기

CSS 사전

완성된 페이지와 링크

다른 유형의 페이지 보러가기

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

푸터 유형 페이지 만들기

기본 CSS 리셋값 설정하기

푸터 섹션 구성해주기

푸터 구역 CSS 설정해주기

CSS 사전

완성된 페이지와 링크

다른 유형의 페이지 보러가기

푸터 유형 페이지 만들기

기본 CSS 리셋값 설정하기

푸터 섹션 구성해주기

푸터 구역 CSS 설정해주기

CSS 사전

완성된 페이지와 링크

다른 유형의 페이지 보러가기

개인정보

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역