넷플릭스 화면 디자인_HTML/CSS

📂 파일 구조

🗂️project ├─📂assets - 사용할 이미지들 │  └─🖼️images │  ├─📂styles - 적용한 스타일 │  └─🖌️bottom.css │  └─🖌️general.css │  └─🖌️header.css │  └─🗒️index.html

기대 결과

최종 결과

주요기능

• transition & transform 사용하여 이미지에 마우스 호버 시 점차 확대

 .main-bottom img {
    transition: transform 1s ease-out;
}

.main-bottom img:hover {
    transform: scale(1.4);

• linear-gradient를 주어 검정색 opacity를 조절하여 배경과 작품 목록 컨테이너 사이의 경계를 부드럽게 표시

background: linear-gradient(rgba(0, 0, 0, 0) 1%,
            rgba(0, 0, 0, 0.85) 4%,
            rgba(0, 0, 0, 0.95) 20%,
            rgba(0, 0, 0, 1) 100%);

---

Github

GitHub - childevnote/goorm-project-01