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

7일차 - header, footer (1)

형디 2024. 10. 21. 09:22
header.jsp
<!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 href="/css/header.css" rel="stylesheet">
    <link href="/css/footer.css" rel="stylesheet">
    <link href="/css/common.css" rel="stylesheet">
    <script src="/js/jquery-3.6.3.min.js"></script>
</head>
<body>
    
    <header>
        <div id="in--header">
            <div id="logo">
                <a href="" alt="헤더 로고">logo</a>
            </div>

            <ul id="menu--container">
                <li>메뉴1</li>
                <li>메뉴2</li>
                <li>메뉴3</li>
                <li>메뉴4</li>
                <li>메뉴5</li>
            </ul>

            <div id="icon--container">
                <div id="search"></div>
                <div id="moblie--menu"></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);
            });
        });

    </script>

 

 

 

header.css
header{
    width: 100%;
    position: fixed;
}
#in--header{
    width: 90%;
    height: 100px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#logo{
    width: 200px;
    height: 70px;
    background-color: palevioletred;
}
#menu--container {
    display: flex;
    gap: 80px;
}
#icon--container{
    display: flex;
    gap: 30px;
}
#search{
    width: 30px;
    height: 30px;
    background-color: #ffddfd;
}
#moblie--menu{
    width: 30px;
    height: 30px;
    background-color: #000;
}
section{
    width: 100%;
    height: 100vh;
    position: relative;
}
.downn {
    background-color: rgba(0, 0, 0, 0.2);
    color: rgb(255, 255, 255);
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.4s;
    transition-timing-function: ease;
}

 

 

footer.jsp
<!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 href="/css/header.css" rel="stylesheet">
    <link href="/css/footer.css" rel="stylesheet">
    <link href="/css/common.css" rel="stylesheet">
    <script src="/js/jquery-3.6.3.min.js"></script>
</head>
<body>
    
    <header>
        <div id="in--header">
            <div id="logo">
                <a href="" alt="헤더 로고">logo</a>
            </div>

            <ul id="menu--container">
                <li>메뉴1</li>
                <li>메뉴2</li>
                <li>메뉴3</li>
                <li>메뉴4</li>
                <li>메뉴5</li>
            </ul>

            <div id="icon--container">
                <div id="search"></div>
                <div id="moblie--menu"></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); // 클래스 토글
            });
        });

    </script>

 

 

footer.css
footer{
    width: 100%;
    padding: 100px 0;
    background-color: #999;
}
#in--footer{
    width: 90%;
    margin: auto;
}
#footer--logo{
    width: 200px;
    height: 70px;
    background-color: #fff;
    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;
    border-radius: 50%;
    z-index: 99;
    background: #743e05 url(/images/top.png);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

 

 

공통 css
/* 공통 기능 */
*{
    margin: 0;
    padding: 0;
}
ul,li{
    list-style: none;
}
a{
    color: inherit;
    text-decoration: none;
}
img{
    border: 0;
}
button{
    cursor: pointer;
}

 

 

▶ 햄버거 메뉴와 검색 버튼, hover시 메뉴 바뀌는 거 제외 하고는 구현 완료

▶ header, footer logo는 만들어지면 바꿀 예정

▶ 스크롤시 상단 버튼 생성 (메인 컬러 정해지면 바꿀 예정)

▶ 스크롤시 헤더 배경색 변경

 

header

 

 

footer

 

728x90

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

9일차 - 의뢰자 페이지 화면 구현 (목록, 글쓰기)  (2) 2024.11.01
8일차 - header, footer (2) 최종  (2) 2024.11.01
6일차 - DB 활용한 chart.js 차트 그리기(2)  (0) 2024.10.21
5일차 - DB 활용한 chart.js 차트 그리기(1)  (2) 2024.10.18
4일차 - 공공 API 데이터 DB에 밀어 넣기  (1) 2024.10.17

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

티스토리툴바