프로그래머 도전기 82일차

오늘은

 

요즘에는 팀 프로젝트를 본격적으로 시작하여 정신이 없습니다

쉬는시간 없이 세네시간을 회의하기도 하고

앉은자리에서 자료수집을 하고 아이디어를 내느라 시간가는줄도 모르는 경우가 많아졌습니다

그리고 그만큼 집에오면 피로감이 몰려와 언제 잠들었는지도 모르게

다음날에 눈을 뜬답니다

꾸준히 블로그에 글을 올려야 하는데 어려워지고 있습니다...

글을 매일 쓰지는 못하지만 그래도 매일 나아가고 있다고 생각하기때문에..

조금은 변명이 되지 않을까... 합니다

 

 

 

반려동물 온라인 쇼핑몰 페이지 만들기

 

저와 다른 친구 한명, 이렇게 둘이서 프론트를 맡게 되어

회의를 한 후에 메인 화면 디자인을 정했습니다

그에 따른 코드 수정과 메뉴 기능을 추가해 보았습니다

 

 

 

<header 부분>

 

html

<div id="top">
    <div class="top-top">
        <div class="tt-box">
            <div class="mini-shortcut"> <!-- 상단 좌측 링크 아이콘 -->
                <ul class="ms-list">
                    <li><a href="https://www.youtube.com" target="_blank">youtube</a></li>
                    <li><a href="https://www.instagram.com/" targer="_blank">instagram</a></li>
                    <li><a href="https://www.twitter.com/" targer="_blank">twitter</a></li>
                </ul>
            </div>

            <div class="top-top-menu"> <!-- 상단 미니메뉴 -->
                <ul class="ttm-list">
                    <li><a href="#">JOIN</a></li>
                    <li><a href="#">LOG-IN</a></li>
                    <li><a href="#">MY-PAGE</a></li>
                    <li><a href="#">BASKET</a></li>
                    <li><a href="#">ORDER-INQUIRY</a></li>
                    <li><a href="#">BOARD</a></li>
                    <li><input type="text" id="search"> 🔍</li> <!-- 상단 검색창 -->
                </ul>
            </div>
        </div>
    </div>  

    <div class="top-mid">   <!-- 메인 로고, 사진 -->
        <a href=""><img class="logo-pic" src="logoimg.jpg" alt=""></a>
    </div>

    <div class="top-btm">   <!-- 사이트 내 각종 메뉴 모음 -->
        <nav class="top-btm-menu">
            <ul class="tbm-list">
                <li class="tbm-list-li"><a href="#"><i class="fa-solid fa-bars"></i> 전체 메뉴</a>
                    <ul class="sub_all_menu">
                        <ul><a href="">강아지 먹거리</a>
                            <li><a href="">사료</li></a>
                            <li><a href="">간식</li></a>
                            <li><a href="">영양제</li></a>
                        </ul>
                        <ul><a href="">강아지 용품</a>
                            <li><a href="">강아지 집</li></a>
                            <li><a href="">강아지 옷</li></a>
                            <li><a href="">강아지 장난감</li></a>
                            <li><a href="">강아지 밥그릇</li></a>
                            <li><a href="">강아지 산책용품</li></a>
                        </ul>
                        <ul><a href="">고양이 먹거리</a>
                            <li><a href="">사료</li></a>
                            <li><a href="">간식</li></a>
                            <li><a href="">영양제</li></a>
                        </ul>
                        <ul><a href="">고양이 용품</a>
                            <li><a href="">고양이 집</li></a>
                            <li><a href="">고양이 옷</li></a>
                            <li><a href="">고양이 장난감</li></a>
                            <li><a href="">고양이 밥그릇</li></a>
                            <li><a href="">고양이 방콕용품</li></a>
                        </ul>
                        <ul><a href="">햄스터 먹거리</a>
                            <li><a href="">사료</li></a>
                            <li><a href="">간식</li></a>
                            <li><a href="">영양제</li></a>
                        </ul>
                        <ul><a href="">햄스터 용품</a>
                            <li><a href="">햄스터 집</li></a>
                            <li><a href="">햄스터 장난감</li></a>
                            <li><a href="">햄스터 밥그릇</li></a>
                            <li><a href="">햄스터 챗바퀴</li></a>
                            <li><a href="">햄스터 이갈이</li></a>
                        </ul>
                        <ul><a href="">이벤트 상품</a>
                            <li><a href="">기간 할인 상품</li></a>
                            <li><a href="">신상품 할인 이벤트</li></a>
                            <li><a href="">시즌 한정 상품</li></a>
                        </ul>
                    </ul>
                </li>
                <li class="tbm-list-li"><a href="#">강아지 먹거리</a>
                    <ul class="sub_menu">
                        <li><a href="">사료</li></a>
                        <li><a href="">간식</li></a>
                        <li><a href="">영양제</li></a>
                    </ul>
                </li>
                <li class="tbm-list-li"><a href="#">강아지 용품</a>
                    <ul class="sub_menu">
                        <li><a href="">강아지 집</li></a>
                        <li><a href="">강아지 옷</li></a>
                        <li><a href="">강아지 장난감</li></a>
                        <li><a href="">강아지 밥그릇</li></a>
                        <li><a href="">강아지 산책용품</li></a>
                    </ul>
                </li>
                <li class="tbm-list-li"><a href="#">고양이 먹거리</a>
                    <ul class="sub_menu">
                        <li><a href="">사료</li></a>
                        <li><a href="">간식</li></a>
                        <li><a href="">영양제</li></a>
                    </ul>
                </li>
                <li class="tbm-list-li"><a href="#">고양이 용품</a>
                    <ul class="sub_menu">
                        <li><a href="">고양이 집</li></a>
                        <li><a href="">고양이 옷</li></a>
                        <li><a href="">고양이 장난감</li></a>
                        <li><a href="">고양이 밥그릇</li></a>
                        <li><a href="">고양이 방콕용품</li></a>
                    </ul>
                </li>
                <li class="tbm-list-li"><a href="#">햄스터 먹거리</a>
                    <ul class="sub_menu">
                        <li><a href="">사료</li></a>
                        <li><a href="">간식</li></a>
                        <li><a href="">영양제</li></a>
                    </ul>
                </li>
                <li class="tbm-list-li"><a href="#">햄스터 용품</a>
                    <ul class="sub_menu">
                        <li><a href="">햄스터 집</li></a>
                        <li><a href="">햄스터 장난감</li></a>
                        <li><a href="">햄스터 밥그릇</li></a>
                        <li><a href="">햄스터 챗바퀴</li></a>
                        <li><a href="">햄스터 이갈이</li></a>
                    </ul>
                </li>
                <li class="tbm-list-li"><a href="#">이벤트 상품</a>
                    <ul class="sub_menu">
                        <li><a href="">기간 할인 상품</li></a>
                        <li><a href="">신상품 할인 이벤트</li></a>
                        <li><a href="">시즌 한정 상품</li></a>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</div>

 

css

/* top */
#top {
    width: 100%;
    height: 300px;
}

/* .top-top */
.top-top {
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-bottom: 2px solid #ededed;
}

.tt-box {
    width: 1100px;
    height: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
}

.mini-shortcut {
    margin-left: 50px;
}

.ms-list li{
    padding: 5px;
    float: left;
    font-size: 0.8rem;
}

.ms-list li a{
    color: #878787;
}

.top-top-menu {
    margin-right: 50px;
}

.ttm-list li {
    float: left;
    padding: 5px;
    font-size: 0.8rem;
}

.ttm-list li a{
    color: #878787;
}

/* .top-mid */
.top-mid {
    width: 100%;
    height: 200px;
    padding: 20px;
    text-align: center;
}

.top-mid a {
    width: 1100px;
    height: 160px;
}

.top-mid a img {
    width: 200px;
    height: 160px;
}

/* .top-btm */
.top-btm {
    width: 100%;
    height: 50px;
    background-color: #edfed6;
}

.top-btm-menu .tbm-list{
    width: 1100px;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.tbm-list-li {
    display: flex;
    align-items: center;
    height: 50px;
}

.top-btm-menu .tbm-list li {
    position: relative;
}

.top-btm-menu .tbm-list li:hover ul{
    display: block;
}

.sub_all_menu {
    width: 1100px;
    height: 200px;
    padding: 5px;
    position: absolute;
    background: #edfed6;
    z-index: 10;
    top: 50px;
    left: -20px;
    display: none;
}

.sub_all_menu ul {
    font-weight: bold;
    font-size: 1rem;
    line-height: 3;
}

.sub_all_menu ul li {
    font-weight: normal;
    font-size: 0.9rem;
    line-height: 1.5;
}

.top-btm-menu .tbm-list li:hover .sub_all_menu{
    display: flex;
}

.sub_menu {
    width: 300px;
    padding: 10px;
    position: absolute;
    background: #edfed6;
    z-index: 10;
    top: 50px;
    left: -10px;
    font-size: 0.9rem;
    line-height: 1.5;
    display: none;
}

.sub_menu li {
    display: block;
    text-align: left;
}

 

 

 

<bottom, footer 부분>

 

html

<div id="bottom">
    <div class="btm-box">
        <div class="cst-center">
            <p class="info-title">CUSTOMER CENTER</p><br>
            <p class="info-content">
                TEL 010-0000-0000 <br>
                Kakao team_2 <br>
                AM 10 ~ PM 6 <br>
                Closed ~ Weekend, Holiday
            </p>
        </div>
        <div class="bank-info">
            <p class="info-title">BANK INFO</p><br>
            <p class="info-content">
                <span>농협 123-1234-1234-12</span> / <span>국민 123456-12-123456</span><br>
                예금주 : (주)team_2
            </p>
        </div>
        <div class="btm-icon">
            <ul class="btm-icon-list">
                <li><a href=""><img class="icon" src="" alt=""></a></li>
                <li><a href=""><img class="icon" src="" alt=""></a></li>
                <li><a href=""><img class="icon" src="" alt=""></a></li>
                <li><a href=""><img class="icon" src="" alt=""></a></li>
                <li><a href=""><img class="icon" src="" alt=""></a></li>
            </ul>
        </div>
    </div>

    <footer id="ftr-box">
        <div class="footer-info">
            <div class="ftr-tags">
                <a href="">HOME</a> |  <a href="">COMPANY</a> | <a href="">AGREEMENT</a> | <a href="">PRIVACY POLICY</a> | <a href="">GUIDE</a>
            </div>
            <p class="span-list">
                <span>team_2 : KHacademy</span>
                <span>address : korea seoul</span>
                <span>tel : 1234-1234</span>
                <span>e-mail : team_2@naver.com</span> <br>
                <span>leader : choi hae won</span>
                <span>member : seok min / dong hyeon / ji seong / je heon / seung beom </span> <br>
                <span>copyright ⓒ team_2. All rights reserved. Design by team_2.</span>
            </p>
        </div>
    </footer>
</div>

 

css

/* #bottom */
#bottom {
    width: 100%;
    height: 300px;
    border-top: 2px solid #BEDAA4;
    background: #ededed;
}

/* .btm-box */
.btm-box {
    width: 1100px;
    height: 150px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
}

.info-title {
    font-weight: bold;
}

.info-content {
    font-size: 0.8rem;
}

.cst-center {
    width: 330px;
    margin-left: 0;
}

.bank-info {
    width: 330px;
}

.btm-icon {
    width: 350px;
    margin: 0;
}

.btm-icon-list{
    display: flex;
    justify-content: space-around;
}

.btm-icon-list img {
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    border-radius: 50%;
}

.btm-icon-list li {
    padding: 10px;
}

/* #ftr-box */
#ftr-box {
    width: 100%;
    height: 150px;
    background: #221A11;
    color: #fff;
    font-size: 0.8rem;
}

.footer-info {
    width: 1100px;
    height: 150px;
    text-align: center;
    line-height: 2;
}

.ftr-tags {
    width: 500px;
    height: 50px;
    display: flex;
    align-items: center;
}

.ftr-tags a {
    color: #fff;
}

 

 

 

 

 

 

 

 

 

 

2023. 12. 09 (토)