본문 바로가기
My Proect/중개폼 프로젝트 - Carblre

8일차 - header, footer (2) 최종

형디 2024. 11. 1. 10:04

 

 

 

▶ 처음 구현한 페이지는 기존 폰트 색상 검정색에 스크롤을 내리면 흰색으로 바뀌게 구현해 두었는데 메인이 살짝 어두운 느낌이라 폰트 색상을 흰색으로 변경

 

 

▶ 기존 헤더 폰트 색상이 흰색인데 서브 페이지 로그인, 회원가입, 일반 회원가입, 변호사 회원가입 페이지도 배경색이 흰색이라 색상이 안보이는 이슈가 발생

▶ 서브헤더를 새로 만들어서 서브 페이지 로그인, 회원가입, 일반 회원가입, 변호사 회원가입는 서브헤더를 includ

 

 

▶ 헤더에 모바일 메뉴인 햄버거 버튼 구현

▶ 햄버거 버튼을 클릭하면 full 화면으로 채워지게 구성

 

 

▶ 푸터는 기존 색상에서 좀 더 진하게 구성하였다

 

 

header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carblre 카블리</title>
    <link rel="icon" type="image/png" sizes="32x32" href="/image/favicon.ico">
    <link href="/css/header.css" rel="stylesheet">
    <link href="/css/footer.css" rel="stylesheet">
    <link href="/css/common.css" rel="stylesheet">
    <link href="/css/signin.css" rel="stylesheet">
    <link href="/css/notice.css" rel="stylesheet">
    <link href="/css/privacy.css" rel="stylesheet">
    <link href="/css/mypage.css" rel="stylesheet">
    <link href="/css/lawyerList.css" rel="stylesheet">
    <link href="/css/lawyerInfo.css" rel="stylesheet">
    <link href="/css/font.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" el="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
    <script src="/js/jquery-3.6.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<header>
    <div id="in--header">
        <div id="logo">
            <a href="/" alt="헤더 로고"><img src="/image/logo.png"></a>
        </div>

        <ul id="menu--container">
            <li>
                <a href="/board/boardList">의뢰자</a>
            </li>
            <li>
                <a href="/aiounseling">AI 간편상담</a>
            </li>
            <li>
                <a href="/lawyer/lawyers">변호사</a>
            </li>
            <li>
                <a href="/notice/notice">공지사항</a>
            </li>
            <li>
                <a href="/cs/cs">고객센터</a>
            </li>
        </ul>

        <div id="icon--container">
            <ul class="info--container">
                <c:choose>
                    <c:when test="${principal != null}">
                        <li>
                            <a href="/user/logout">로그아웃</a>
                        </li>
                        <li>
                            <a href="/user/myPage">마이페이지</a>
                        </li>
                    </c:when>
                    <c:otherwise>
                        <li>
                            <a href="/user/signIn">로그인</a>
                        </li>
                        <li>
                            <a href="/user/selectSignUp">회원가입</a>
                        </li>
                    </c:otherwise>
                </c:choose>
            </ul>
            <!--div id="search"></div-->
            <div class="hd-menubtn menubtn">
                <div class="m_menu">
                    <div class="menubar">
                        <span class="bar bar01"></span>
                        <span class="bar bar02"></span>
                        <span class="bar bar03"></span>
                    </div>
                    <div class="gnb-all">
                        <div class="all-bg"></div>
                        <div class="all-menu">
                            <ul>
                                <li>
                                    <a href="/board/boardList">의뢰자</a>
                                </li>
                                <li>
                                    <a href="/aiounseling">AI 간편상담</a>
                                </li>
                                <li>
                                    <a href="/lawyer/lawyers">변호사</a>
                                </li>
                                <li>
                                    <a href="/notice/notice">공지사항</a>
                                </li>
                                <li>
                                    <a href="/cs/cs">고객센터</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<script>
    $(function () {
        var $header = $('header');
        var $page = $('section'); 
        var $window = $(window);
        var pageOffsetTop = $page.offset().top;

       
        $header.removeClass('downn');

        $window.resize(function () {
            pageOffsetTop = $page.offset().top;
        });

        $window.on('scroll', function () {
            var scrolled = $window.scrollTop() >= pageOffsetTop;
            $header.toggleClass('downn', scrolled);
        });
    });

    $(document).ready(function () {
        $(".hd-search").click(function () {
            $("header").toggleClass("top");
            $(".hd-search-box").toggleClass("hd-sch-open");
            $(".hd-search").toggleClass("close");
            $(".hd-logo").toggleClass("show");
            $("html,body").toggleClass("scr-none");
        });
        $("header .gnb-wrap .gnb > li > ul").hide();
        $("header .gnb-wrap .gnb > li").mouseover(function () {
            $("header .gnb-wrap .gnb > li").removeClass("on");
            $("header .gnb-wrap .gnb > li > ul").stop().fadeOut(200);
            $(this).addClass("on");
            $(this).find("ul").stop().fadeIn(200);
        });
        $("header").mouseleave(function () {
            $("header .gnb-wrap .gnb > li").removeClass("on");
            $("header .gnb-wrap .gnb > li > ul").stop().fadeOut(200);
        });
        $(".btn-language").mouseover(function () {
            $(".hd-language ul").stop().fadeIn();
        });
        $(".hd-language").mouseleave(function () {
            $(".hd-language ul").stop().fadeOut();
        });

        if (matchMedia("screen and (max-width: 1920px)").matches) {
            //mobile
            $(".menubar").click(function () {
                $("header").toggleClass("gnb-open");
                $("header").toggleClass("top");
                $(".all-bg").toggle();
                $(".all-menu > ul > li:not(.gnb-sns) > ul").slideUp();
                $(".all-menu > ul > li:not(.gnb-sns) > ul").slideUp();
                $(".all-menu > ul > li:not(.gnb-sns) a").removeClass("on");
            });
            $(".all-menu > ul > li:not(.gnb-sns) > ul").addClass("dep2");
            $(".all-menu > ul > li:not(.gnb-sns) > a").click(function () {
                $(".all-menu > ul > li:not(.gnb-sns) a").removeClass("on");
                $(".all-menu > ul > li:not(.gnb-sns) > ul").slideUp();
                $(".all-menu > ul > li:not(.gnb-sns) > ul.dep2 ul").stop().slideUp();
                if (!$(this).parent().find(".dep2").is(":visible")) {
                    $(this).parent().find(".dep2").stop().slideDown();
                    $(this).addClass("on");
                }
            });
            $(".all-menu > ul > li:not(.gnb-sns) > ul > li > a").click(function () {
                $(".all-menu > ul > li:not(.gnb-sns) > ul > li.dep3 > a").removeClass(
                    "on"
                );
                $(".all-menu > ul > li:not(.gnb-sns) > ul.dep2 ul").stop().slideUp();
                if (!$(this).parent().find("ul").is(":visible")) {
                    $(this).parent().find("ul").stop().slideDown();
                    $(this).addClass("on");
                }
            });
        } else {
            $(".menubar").click(function () {
                //pc
                $("header").toggleClass("gnb-open");
                $("header").toggleClass("top");
                $("html,body").toggleClass("scr-none");
            });
        }
    });
</script>

 

 

subHeader.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carblre 카블리</title>
    <link rel="icon" type="image/png" sizes="32x32" href="/image/favicon.ico">
    <link href="/css/header.css" rel="stylesheet">
    <link href="/css/footer.css" rel="stylesheet">
    <link href="/css/common.css" rel="stylesheet">
    <link href="/css/signin.css" rel="stylesheet">
    <link href="/css/notice.css" rel="stylesheet">
    <link href="/css/privacy.css" rel="stylesheet">
    <link href="/css/mypage.css" rel="stylesheet">
    <link href="/css/font.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <script src="/js/jquery-3.6.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<header id="sub--Header">
    <div id="in--header">
        <div id="logo">
            <a href="/" alt="헤더 로고"><img src="/image/logo.png"></a>
        </div>
        
        <ul id="menu--container">
            <li>
                <a href="/board/boardList">의뢰자</a>
            </li>
            <li>
                <a href="/aiounseling">AI 간편상담</a>
            </li>
            <li>
                <a href="/lawyer/lawyers">변호사</a>
            </li>
            <li>
                <a href="/notice/notice">공지사항</a>
            </li>
            <li>
                <a href="/cs/cs">고객센터</a>
            </li>
        </ul>

        <div id="icon--container">
            <ul class="info--container">
                <c:choose>
                    <c:when test="${principal != null}">
                        <li>
                            <a href="/user/logout">로그아웃</a>
                        </li>
                        <li>
                            <a href="/user/myPage">마이페이지</a>
                        </li>
                    </c:when>
                    <c:otherwise>
                        <li>
                            <a href="/user/signIn">로그인</a>
                        </li>
                        <li>
                            <a href="/user/selectSignUp">회원가입</a>
                        </li>
                    </c:otherwise>
                </c:choose>
            </ul>
            <div class="hd-menubtn menubtn">
                <div class="m_menu">
                    <div class="menubar">
                        <span class="bar bar01"></span>
                        <span class="bar bar02"></span>
                        <span class="bar bar03"></span>
                    </div>
                    <div class="gnb-all">
                        <div class="all-bg"></div>
                        <div class="all-menu">
                            <ul>
                                <li>
                                    <a href="/board/boardList">의뢰자</a>
                                </li>
                                <li>
                                    <a href="/aiounseling">AI 간편상담</a>
                                </li>
                                <li>
                                    <a href="/lawyer/lawyers">변호사</a>
                                </li>
                                <li>
                                    <a href="/notice/notice">공지사항</a>
                                </li>
                                <li>
                                    <a href="/cs/cs">고객센터</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<script>
    $(function () {
        var $header = $('header'); // 헤더를 변수에 넣기
        var $page = $('section'); // 색상이 변할 부분
        var $window = $(window);
        var pageOffsetTop = $page.offset().top; // 색상 변할 부분의 top값 구하기

        // 페이지 로드 시 기본 클래스 초기화
        $header.removeClass('downn');

        $window.resize(function () { // 반응형을 대비하여 리사이즈 시 top값을 다시 계산
            pageOffsetTop = $page.offset().top;
        });

        $window.on('scroll', function () { // 스크롤 시
            var scrolled = $window.scrollTop() >= pageOffsetTop; // 스크롤된 상태; true or false
            $header.toggleClass('downn', scrolled); // 클래스 토글
        });
    });

    $(document).ready(function () {
        $(".hd-search").click(function () {
            $("header").toggleClass("top");
            $(".hd-search-box").toggleClass("hd-sch-open");
            $(".hd-search").toggleClass("close");
            $(".hd-logo").toggleClass("show");
            $("html,body").toggleClass("scr-none");
        });
        $("header .gnb-wrap .gnb > li > ul").hide();
        $("header .gnb-wrap .gnb > li").mouseover(function () {
            $("header .gnb-wrap .gnb > li").removeClass("on");
            $("header .gnb-wrap .gnb > li > ul").stop().fadeOut(200);
            $(this).addClass("on");
            $(this).find("ul").stop().fadeIn(200);
        });
        $("header").mouseleave(function () {
            $("header .gnb-wrap .gnb > li").removeClass("on");
            $("header .gnb-wrap .gnb > li > ul").stop().fadeOut(200);
        });
        $(".btn-language").mouseover(function () {
            $(".hd-language ul").stop().fadeIn();
        });
        $(".hd-language").mouseleave(function () {
            $(".hd-language ul").stop().fadeOut();
        });

        if (matchMedia("screen and (max-width: 1920px)").matches) {
            //mobile
            $(".menubar").click(function () {
                $("header").toggleClass("gnb-open");
                $("header").toggleClass("top");
                $(".all-bg").toggle();
                $(".all-menu > ul > li:not(.gnb-sns) > ul").slideUp();
                $(".all-menu > ul > li:not(.gnb-sns) > ul").slideUp();
                $(".all-menu > ul > li:not(.gnb-sns) a").removeClass("on");
            });
            $(".all-menu > ul > li:not(.gnb-sns) > ul").addClass("dep2");
            $(".all-menu > ul > li:not(.gnb-sns) > a").click(function () {
                $(".all-menu > ul > li:not(.gnb-sns) a").removeClass("on");
                $(".all-menu > ul > li:not(.gnb-sns) > ul").slideUp();
                $(".all-menu > ul > li:not(.gnb-sns) > ul.dep2 ul").stop().slideUp();
                if (!$(this).parent().find(".dep2").is(":visible")) {
                    $(this).parent().find(".dep2").stop().slideDown();
                    $(this).addClass("on");
                }
            });
            $(".all-menu > ul > li:not(.gnb-sns) > ul > li > a").click(function () {
                $(".all-menu > ul > li:not(.gnb-sns) > ul > li.dep3 > a").removeClass(
                    "on"
                );
                $(".all-menu > ul > li:not(.gnb-sns) > ul.dep2 ul").stop().slideUp();
                if (!$(this).parent().find("ul").is(":visible")) {
                    $(this).parent().find("ul").stop().slideDown();
                    $(this).addClass("on");
                }
            });
        } else {
            $(".menubar").click(function () {
                //pc
                $("header").toggleClass("gnb-open");
                $("header").toggleClass("top");
                $("html,body").toggleClass("scr-none");
            });
        }
    });
</script>

 

 

footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" ageEncoding="UTF-8"%>

<footer>
    <div id="in--footer">
        <div id="footer--logo">
            <a href="/" alt="푸터 로고"><img src="/image/footerlogo.png"></a>
        </div>

        <div id="footer--container">
            <p>
                <strong>주소</strong> 부산 부산진구 중앙대로 749
            </p>
            <p>
                <strong>대표자 </strong>배병호 &nbsp; | &nbsp;
                <strong>사업자등록번호 </strong>123-68-01286 &nbsp; | &nbsp;
                <strong>법률상담접수 </strong>1688-8282&nbsp; | &nbsp;
                <strong>대표책임변호사 </strong>박태현
            </p>
            <p>Copyright © 2024, CARBLRE. All Rights Reserved.</p>
            <p>
                <a href="/privacy/disclaimer">면책공고</a>&nbsp; | &nbsp;
                <a href="/privacy/liability">유한책임</a>&nbsp; | &nbsp;
                <a href="/privacy/policy">개인정보처리방침</a>&nbsp; | &nbsp;
                <a href="/privacy/refusal">이메일무단수집거부</a>
            </p>
        </div>
    </div>
    
    <div id="scroll--top" onclick="window.scrollTo(0,0);">
        <a href="#">
            <div>></div>
            <span>TOP</span>
        </a>
    </div>
</footer>

<script>
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 10) {
                $('#scroll--top').fadeIn();
            } else {
                $('#scroll--top').fadeOut();
            }
        });

    });
</script>
</body>
</html>

 

 

 

header.css
header {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 99;
}

#background--black h1 {
    font-size: 62px;
    font-family: 'Spoqa Han Sans', sans-serif;
}

#in--header {
    width: 90%;
    height: 100px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#menu--container {
    display: flex;
    gap: 80px;
    font-size: 18px;
    color: #fff;
}

#icon--container {
    display: flex;
    gap: 30px;
}

.info--container {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #fff;
}

#search {
    width: 30px;
    height: 30px;
    background-color: #ffddfd;
}

#moblie--menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

#moblie--menu div {
    width: 30px;
    height: 2px;
    background-color: #fff;
}

#sub--Header .menubtn .menubar .bar {
    background-color: #000;
}

.downn {
    background-color: rgba(0, 0, 0, 0.4);
    color: rgb(255, 255, 255);
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.4s;
    transition-timing-function: ease;
}

#sub--Header #menu--container, #sub--Header .info--container {
    color: #000;
}

#sub--Header #moblie--menu div {
    background-color: #000;
}

.subdown {
    background-color: rgba(0, 0, 0, 0.1);
    color: rgb(255, 255, 255);
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.4s;
    transition-timing-function: ease;
}

.menubtn .menubar {
    display: block;
    width: 30px;
    height: 23px;
    cursor: pointer;
    z-index: 9999;
    position: relative;
}

.menubtn .menubar .bar {
    position: absolute;
    right: 0;
    top: 5px;
    height: 2px;
    transition: all ease 0.3s;
    background-color: #fff;
}

.subheader .menubtn .menubar .bar {
    position: absolute;
    right: 0;
    top: 5px;
    height: 2px;
    transition: all ease 0.3s;
    background-color: #000;
}

.menubtn .menubar .bar.bar01 {
    width: 21px;
}

.menubtn .menubar .bar.bar02 {
    top: 15px;
    width: 21px;
}

.menubtn .menubar .bar.bar03 {
    top: 25px;
    width: 30px;
}

.gnb-all {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 0;
    background: #fff;
    z-index: 9;
    overflow: hidden;
    transition: all ease 0.6s;
}

.all-menu {
    height: 100%;
}

.all-menu > ul {
    display: flex;
    height: 100%;
    flex-wrap: wrap;
    max-width: 1300px;
    margin: auto;
    align-content: center;
}

.all-menu > ul > li {
    width: 100%;
    padding: 0 3%;
}

.all-menu > ul > li > a {
    display: block;
    font-size: 36px;
    font-weight: 700;
    position: relative;
    margin-bottom: 60px;
    line-height: 1.2;
    color: #000;
    opacity: 0;
    transition: all ease 1s;
    transition-delay: 0.1s;
    margin-left: -10px;
    font-family: 'Spoqa Han Sans', sans-serif;
}

.all-menu > ul > li > ul > li {
    transition: all ease 1s;
    transition-delay: 0.2s;
    opacity: 0;
    margin-left: -10px;
}

.all-menu > ul > li > ul > li:nth-child(2) {
    transition-delay: 0.3s;
}

.all-menu > ul > li > ul > li:nth-child(3) {
    transition-delay: 0.4s;
}

.all-menu > ul > li > ul > li:nth-child(4) {
    transition-delay: 0.5s;
}

.all-menu > ul > li > ul > li:nth-child(5) {
    transition-delay: 0.6s;
}

.all-menu > ul > li > ul > li:nth-child(6) {
    transition-delay: 0.8s;
}

.all-menu > ul > li:not(.gnb-sns) > a:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    left: 0;
    top: -20px;
    opacity: 0;
    transition: all ease 0.3s;
}

.all-menu > ul > li:not(.gnb-sns):hover > a:before {
    top: -15px;
    opacity: 1;
}

.all-menu > ul > li:not(.gnb-sns) > ul > li {
    margin-bottom: 25px;
}

.all-menu > ul > li:not(.gnb-sns) > ul > li > a {
    font-size: 22px;
    font-weight: 500;
    transition: all ease 0.3s;
    color: #000;
}

.all-menu > ul > li:not(.gnb-sns) > ul > li > a:hover {
    padding-left: 5px;
    color: #000;
    font-weight: 700;
    cursor: pointer;
}

.all-menu > ul > li:not(.gnb-sns) > ul > li:hover > a {
    padding-left: 5px;
    color: #000;
    font-weight: 700;
}

.all-menu > ul > li:not(.gnb-sns) > ul > li > ul {
    padding-left: 5px;
}

.all-menu > ul > li:not(.gnb-sns) > ul > li > ul > li {
    margin: 20px 0;
}

.all-menu > ul > li:not(.gnb-sns) > ul > li > ul > li > a {
    font-size: 18px;
    font-weight: 500;
    transition: all ease 0.3s;
    position: relative;
    color: #000;
}

.all-menu > ul > li:not(.gnb-sns) > ul > li > ul > li > a:after {
    content: "";
    width: 0;
    height: 1px;
    background: #111;
    position: absolute;
    right: 0;
    bottom: -5px;
    transition: all ease 0.3s;
}

.all-menu > ul > li:not(.gnb-sns) > ul > li > ul > li > a:hover:after {
    right: auto;
    left: 0;
    width: 100%;
}

.all-menu .gnb-sns {
    display: flex;
    align-items: end;
}

.all-menu .gnb-sns > ul > li {
    margin: 20px 0;
}

.all-menu .gnb-sns > ul > li > a {
    font-size: 16px;
    position: relative;
    font-weight: 500;
}

.all-menu .gnb-sns > ul > li > a:after {
    content: "";
    width: 0;
    height: 1px;
    background: #111;
    position: absolute;
    right: 0;
    bottom: -2px;
    transition: all ease 0.3s;
}

.all-menu .gnb-sns > ul > li > a:hover:after {
    width: 100%;
    right: auto;
    left: 0;
}

/* hd gnb */
header.gnb-open .all-menu > ul > li > a {
    opacity: 1;
    margin-left: 0;
}

header.gnb-open .all-menu > ul > li > a:hover {
    cursor: pointer;
}

header.gnb-open .all-menu > ul > li > ul > li {
    opacity: 1;
    margin-left: 0;
    width: 100%;
}

header.gnb-open .gnb-all {
    height: 100vh;
}

header.gnb-open.trans {
    position: fixed;
}

header.gnb-open.trans .menubtn .menubar .bar {
    background-color: #fff;
}

header.gnb-open .menubtn .menubar .bar {
    background-color: #000;
}

header.gnb-open .menubtn .menubar .bar.bar01 {
    width: 30px;
    top: 10px;
    transform: rotate(45deg);
}

header.gnb-open .menubtn .menubar .bar.bar02 {
    display: none;
}

header.gnb-open .menubtn .menubar .bar.bar03 {
    width: 30px;
    top: 10px;
    transform: rotate(-45deg);
}

header.trans {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent !important;
    top: 0 !important;
}

 

 

 

footer.css
footer {
    width: 100%;
    padding: 100px 0;
    background-color: #000;
}

#in--footer {
    width: 90%;
    margin: auto;
    color: #bababa;
}

#footer--logo {
    margin-bottom: 30px;
}

#footer--container p {
    margin-bottom: 10px;
}

#footer--container p:last-child {
    margin-bottom: 0;
}

#scroll--top {
    position: fixed;
    right: 50px;
    bottom: 50px;
    width: 60px;
    height: 60px;
    z-index: 99;
    background-color: #ffeb60;
    cursor: pointer;
}

#scroll--top a {
    display: block;
}

#scroll--top span {
    display: block;
    text-align: center;
    font-size: 14px;
}

#scroll--top div {
    font-size: 14px;
    text-align: center;
    transform: rotateZ(270deg);
    margin-top: 12px;
}
728x90

'My Proect > 중개폼 프로젝트 - Carblre' 카테고리의 다른 글

10일차 - AI 간편상담 페이지 구현  (0) 2024.11.01
9일차 - 의뢰자 페이지 화면 구현 (목록, 글쓰기)  (2) 2024.11.01
7일차 - header, footer (1)  (0) 2024.10.21
6일차 - DB 활용한 chart.js 차트 그리기(2)  (0) 2024.10.21
5일차 - DB 활용한 chart.js 차트 그리기(1)  (2) 2024.10.18

'My Proect/중개폼 프로젝트 - Carblre' Related Articles

티스토리툴바