2023.09.13 인스타그램 클론 프로젝트 2일차

인스타그램 클론 프로젝트 2일차.

 

어제에 이어 사이드메뉴를 만들고 있다.

 

조금 계획이 변경되어 왼쪽과 오른쪽의 사이드 메뉴로 나누게 되었다.

 

 

먼저 왼쪽 HTML 코드

 <ul id="left_menu">
        <br><br>
        <div>
            &nbsp;&nbsp;<a href="#"><img src="상단.png" width="50%"></a>
        </div>
        <br><br>

        <li><a href="#"><img src="홈.png" width="12%">&nbsp;&nbsp;홈</a></li>
        <li><a href="#"><img src="검색.png" width="12%">&nbsp;&nbsp;검색</a></li>
        <li><a href="#"><img src="탐색.png" width="12%">&nbsp;&nbsp;탐색 탭</a></li>
        <li><a href="#"><img src="릴스.png" width="12%">&nbsp;&nbsp;릴스</a></li>
        <li><a href="#"><img src="메시지.png" width="11%">&nbsp;&nbsp;메시지</a></li>
        <li><a href="#"><img src="알림.png" width="14%">&nbsp;&nbsp;알림</a></li>
        <li><a href="#"><img src="만들기.png" width="12%">&nbsp;&nbsp;만들기</a></li>
        <li><a href="#"><img src="프로필.png" width="14%">&nbsp;&nbsp;프로필</a></li>
        <br><br><br><br><br><br><br><br><br>
            

    </ul>

 

왼쪽 CSS 코드

.left_menu {
        margin-top: 0px;
        margin-bottom: 0%;
    }

    #left_menu {
        list-style-type: none;
        margin-top: 0%;
        margin-bottom: 0%;
        padding: 0;
        width: 290px;
        background-color: #ffffff;
        position: fixed;
        height: 110%;
        overflow: initial;
        border-top: 1px solid lightgray;
        border-right: 1px solid lightgray;
        border-bottom: 1px solid lightgray;
    }

    .left_menu>ul>li a {
        display: block;
        color: #000;
        padding: 12px 25px;
        text-decoration: none;
        font-size: 16px;
        display: flex;
        align-items: center;
        height: 18px;
        margin-bottom: 20px;
    }

    .left_menu>ul>li a.active {
        background-color: #555;
        color: white;
        border-radius: 25px;
        
    }

    .left_menu>ul>li a:hover:not(.active) {
        background-color: lightgray;
        color: black;
        font-weight: bolder;
        transform: scale(1.02);
        border-radius: 15px;
        height: 18px;
    }
    #left_menu>.up>ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

#left_menu>.up li > a{
    font-size: 25px;
   }

   #left_menu>.up ul{
    display: none;
    width: 200px;
    border: 1px solid lightgray;
    border-radius: 15px;
   }

   #left_menu>.up:hover > ul{
    display: block;
   }

   #left_menu>.up li > a{
    font-size: 25px;
   }
</style>

 

왼쪽 메뉴에서는 커서가 호버되면 바탕색이 바뀌며 글씨와 아이콘이 살짝 커지며 강조되도록 했다.

 

 

 

 

오른쪽 HTML 코드

<ul id="right_menu">   
        <br><br><br><br>
        <li class="up">
            <a href="#"><img src="더보기.png" width="12%">&nbsp;&nbsp;더보기</a>   
            <ul>
                <li><a href="#"><img src="설정.png" width="20%">&nbsp;&nbsp;설정</a></li>
                <li><a href="#"><img src="내 활동.png" width="16%">&nbsp;&nbsp;내 활동</a></li>
                <li><a href="#"><img src="저장됨.png" width="15%">&nbsp;&nbsp;저장됨</a></li>
                <li><a href="#"><img src="모드 전환.png" width="19%">&nbsp;&nbsp;모드 전환</a></li>
                <li><a href="#"><img src="문제 신고.png" width="17%">&nbsp;&nbsp;문제 신고</a></li>
                <hr>
                <li><a href="#">계정 전환</a></li>
                <li><a href="#">로그아웃</a></li>
            </ul>     
        </li>
    </ul>

 

 

오른쪽 CSS 코드

 

<style class="right/menu">
    .right_menu {
        margin-top: 0px;
        margin-bottom: 0%;
    }

    #right_menu {      
        list-style-type: none;
        margin-top: 0%;
        margin-bottom: 0%;
        padding: 0;
        width: 290px;
        background-color: #ffffff;
        position: fixed;
        height: 110%;
        overflow: initial;
        border-left: 1px solid lightgray;       
        right: 0;
    }

    .right_menu>ul>li a {
        display: block;
        color: #000;
        padding: 12px 25px;
        text-decoration: none;
        font-size: 16px;
        display: flex;
        align-items: center;
        height: 18px;
        margin-bottom: 20px;
    }

    .right_menu>ul>li a.active {
        
        background-color: #555;
        color: white;
        border-radius: 25px;
        
    }

    .right_menu>ul>li a:hover:not(.active) {
        background-color: lightgray;
        color: black;
        font-weight: bolder;
        transform: scale(1.02);
        border-radius: 15px;
        height: 18px;
    }
</style>

오른쪽은 더보기 탭에 커서가 호버되면 아래로 드롭다운 메뉴가 나타날 수 있도록 구현해봤다.