코딩헤딩

2023.09.12 인스타그램 클론 프로젝트 1일차 본문

프로젝트

2023.09.12 인스타그램 클론 프로젝트 1일차

멈머이 2023. 9. 13. 00:04
728x90

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

 

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

 

아직 미완성이지만 대략적인 틀이 잡혔다.

 

먼저 HTML 코드 

<body>

    <ul>
        <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="15%">&nbsp;&nbsp;탐색 탭</a></li>
        <li><a href="#"><img src="릴스.png" width="15%">&nbsp;&nbsp;릴스</a></li>
        <li><a href="#"><img src="메시지.png" width="15%">&nbsp;&nbsp;메시지</a></li>
        <li><a href="#"><img src="알림.png" width="15%">&nbsp;&nbsp;알림</a></li>
        <li><a href="#"><img src="만들기.png" width="15%">&nbsp;&nbsp;만들기</a></li>
        <li><a href="#"><img src="프로필.png" width="18%">&nbsp;&nbsp;프로필</a></li>
        <br><br><br><br>
        <li><a href="#"><img src="더보기.png" width="15%">&nbsp;&nbsp;더보기</a></li>
    </ul>

</body>

아이콘과 글씨를 함께넣었다.

 

다음으로 CSS코드

 <style>
        body {
            margin-top:  80px;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 250px;
            background-color: #ffffff;
            position: fixed;
            height: 100%;
            overflow: auto;
        }

        li a {
            display: block;
            color: #000;
            padding: 20px 65px;
            text-decoration: none;
        }

        li a.active {
            background-color: #555;
            color: white;
        }

        li a:hover:not(.active) {
            background-color: #555;
            color: black;
            /* font-display: ; */
        }
    </style>

CSS코드는 아직 미완성이지만 마우스가 올라갔을때 효과로 일단은 배경색이 바뀌게 했지만 글씨 크기를 조절할 계획이다.

728x90

'프로젝트' 카테고리의 다른 글

2차 프로젝트 최종  (0) 2023.10.17
2차 프로젝트 (회원가입)  (0) 2023.10.11
2차 프로젝트 (백엔드)  (0) 2023.10.11
인스타그램 클론 프로젝트 최종  (0) 2023.10.02
2023.09.13 인스타그램 클론 프로젝트 2일차  (0) 2023.09.14
'프로젝트' Related Articles more