5주차 과제
Home 부분 페이지 만들기
현재는 테스트를 위해 아무 사진이나 넣어둠.
다음 계획
- 사진에 마우스 갔다대면 블러처리하고 사진에 대한 정보 나오게.
- 사진 누르고 들어가면 해당 사진과 비슷한 분위기로 묶은 사진들 나오게.
- 비슷한 분위기로 묶은 사진들의 페이지는 홈부분 왼쪽 팔레트 카테고리에 추가하기
- 팔레트 카테고리에 있는 사진들은 누르면 전체 사진 볼 수 있도록
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>MyView</title>
<style>
body {
margin: 0;
font-family: 'Georgia', serif;
background-color: #eae4dc;
display: flex;
}
.sidebar {
width: 220px;
padding: 30px;
background-color: #eae4dc;
position: fixed;
height: 100%;
box-sizing: border-box;
}
.sidebar h1 {
font-size: 26px;
margin-bottom: 40px;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar li {
margin-bottom: 20px;
color: #555;
cursor: pointer;
}
.sidebar li:hover {
color: #000;
text-decoration: underline;
}
.main {
margin-left: 240px;
padding: 40px;
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
align-items: flex-start;
}
.photo {
width: 300px;
height: 400px;
overflow: hidden;
border-radius: 40px;
}
.photo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 40px;
}
</style>
</head>
<body>
<div class="sidebar">
<h1>MyView</h1>
<ul>
<li>Home</li>
<li>Palette</li>
</ul>
</div>
<div class="main">
<div class="photo">
<img src="1.jpg" alt="사진1">
</div>
<div class="photo">
<img src="2.jpg" alt="사진2">
</div>
<div class="photo">
<img src="3.jpg" alt="사진3">
</div>
<div class="photo">
<img src="4.jpg" alt="사진4">
</div>
<div class="photo">
<img src="5.jpg" alt="사진5">
</div>
<div class="photo">
<img src="6.jpg" alt="사진6">
</div>
<div class="photo">
<img src="7.jpg" alt="사진7">
</div>
<div class="photo">
<img src="8.jpg" alt="사진8">
</div>
<div class="photo">
<img src="9.jpg" alt="사진9">
</div>
</div>
</body>
</html>