과제 설명
요구 사항
Flex Box or Grid Box 사용해서 영화 나열하기- 영화에 마우스로
hover하면 영화 이미지의 사이즈 키우기
폴더 계층
사용 이미지 출처
- 배경 이미지
netflix_bg.jpg 와 넷플릭스 로고 이미지 netflix_logo.png : June님의 티스토리에서 제공하신 이미지 다운 링크를 참고함
- 각 영화 이미지
flex_img1.png ~ flex_img6.png : 넷플릭스 사이트에서 직접 캡처해서 불러옴
제출 소스코드 링크
코드 설명
HTML 과 CSS만을 사용해서 복잡한 부분은 제외하고 과제의 요구사항에 부합하는 부분만을 넣어서 정말 간단히 만든 mock site :>
공부한 내용 & 더 찾아볼 내용
- header layout:
header_div 내의 img를 중앙에, button 우측에 아래 화면과 같이 배치하고자 했으나 flex-box 로 아래와 같이 배치하지 못해서 결국 필요없는 div를 하나 더 추가하고 justify-content: space-between; 방식으로 layout을 완성함 → 결과적으로는 동일하지만 더 나은 방식이 있을 것 같음
<div class="header_div">
<div class="fake_div"></div>
<img src="./img/netflix_logo.png" alt="Logo" class="netflix_logo"/>
<button class="sign_up_button">Sign In</button>
</div>
.header_div {
display: flex;
flex-direction: row;
align-items: center;
padding: 20px;
justify-content: space-between;
align-items: center;
}
.fake_div {
padding: 5px;
padding-left: 15px;
padding-right: 15px;
}
.netflix_logo {
width: 140px;
cursor: pointer;
}
.sign_up_button {
border: none;
background-color: #E50914;
padding: 5px;
padding-left: 15px;
padding-right: 15px;
color: white;
border-radius: 5px;
}
- 배경화면에
netflix_bg.jpg 삽입
<body>
<div class="background">
</div>
</body>
.background {
height: 100vh;
width: 100%;
background:
radial-gradient(
circle,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.8) 70%
),
url('../img/netflix_bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}
100% vs 100vh : 100%는 부모요소의 100%이므로 화면의 100%를 차지하리라는 보장은 없으나, 100vh로 설정할 경우 부모요소의 크기와 무관히 화면의 전체 높이 height 를 차지하도록 설정됨
- 영화에 마우스로
hover하면 영화 이미지의 사이즈 키우기 구현
<div class="flexbox_divs">
<p class="list_title">Today's Top Picks for You</p>
<div class="recommend_list">
<div class="video">
<img src="./img/flex_img1.png"/>
</div>
<div class="video">
<img src="./img/flex_img6.png"/>
</div>
<button class="next_button"> > </button>
</div>
</div>
.video {
position: relative;
cursor: pointer;
width: 230px;
margin-left: 10px;
border-radius: 5px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.video:hover {
transform: scale(1.05);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.8);
}
