프로젝트
2023.09.12 인스타그램 클론 프로젝트 1일차
멈머이
2023. 9. 13. 00:04
728x90
인스타그램 클론 프로젝트 1일차.
사이드메뉴를 만들고 있다.
아직 미완성이지만 대략적인 틀이 잡혔다.
먼저 HTML 코드
<body>
<ul>
<li><a href="#"><img src="홈.png" width="16%"> 홈</a></li>
<li><a href="#"><img src="검색.png" width="15%"> 검색</a></li>
<li><a href="#"><img src="탐색.png" width="15%"> 탐색 탭</a></li>
<li><a href="#"><img src="릴스.png" width="15%"> 릴스</a></li>
<li><a href="#"><img src="메시지.png" width="15%"> 메시지</a></li>
<li><a href="#"><img src="알림.png" width="15%"> 알림</a></li>
<li><a href="#"><img src="만들기.png" width="15%"> 만들기</a></li>
<li><a href="#"><img src="프로필.png" width="18%"> 프로필</a></li>
<br><br><br><br>
<li><a href="#"><img src="더보기.png" width="15%"> 더보기</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