[코딩 공부_73] 반응형 웹, 넷플릭스 실습하기

반응형 웹, 넷플릭스 실습을 하였다

근데 화면 크기를 조정할 때마다 header:after로 그라데이션 준 부분이 자꾸 움직이는 것이었다.. 그래서 거의 3시간 넘게 그거 가지고 씨름하다가 도저히 못풀겠어서 그냥 잘래 하구 잤다 ㅎㅎㅋㅋ

오늘 승부를 보자하고 키고 10분도 안되서 해결했다,, 생각보다 너무 허무했다 ,,, 그냥 height를 100%줬으면 된건데 난 뭣하러 ......... ㅠㅠㅠ???? 그랬을까 싶다 .. 그래도 후련하다 하하

---

<넷플릭스 실습 결과화면>

 

<style.css>

<style>
@charset "utf-8";
/* reset */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    /* 16px * 62.5% = 10px => html */
    font-size: 62.5%;
}
body {
    font-size: 1.4rem;
    background: #111;
    color: #999;

}
ul {
    list-style: none;
}
img {
    max-width: 100%;
    vertical-align: top;
}
.inner {
    max-width: 1140px;
    margin: 0 auto;
}
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

/* layout / common */

/* grid system */
/* 
    class name: 엘리먼트의 명찰과 같은 것
    l-col-1-12
    layout을 잡을때 쓰인다
    column: 열을 정의
    1-12: 총 12개 column이고 그 중에 1등분
*/
.l-col-1-12 { width: 8.33333333%; }
.l-col-2-12 { width: 16.66666667%; }
.l-col-3-12 { width: 25%; }
.l-col-4-12 { width: 33.33333333%; }
.l-col-5-12 { width: 41.66666667%; }
.l-col-6-12 { width: 50%; }
.l-col-7-12 { width: 58.33333333%; }
.l-col-8-12 { width: 66.66666667%; }
.l-col-9-12 { width: 75%; }
.l-col-10-12 { width: 83.33333333%; }
.l-col-11-12 { width: 91.66666667%; }
.l-col-12-12 { width: 100%;}

/* tablet responsive */
@media (max-width: 768px) {
    .l-col-tablet-1-12 { width: 8.33333333%; }
    .l-col-tablet-2-12 { width: 16.66666667%; }
    .l-col-tablet-3-12 { width: 25%; }
    .l-col-tablet-4-12 { width: 33.33333333%; }
    .l-col-tablet-5-12 { width: 41.66666667%; }
    .l-col-tablet-6-12 { width: 50%; }
    .l-col-tablet-7-12 { width: 58.33333333%; }
    .l-col-tablet-8-12 { width: 66.66666667%; }
    .l-col-tablet-9-12 { width: 75%; }
    .l-col-tablet-10-12 { width: 83.33333333%; }
    .l-col-tablet-11-12 { width: 91.66666667%; }
    .l-col-tablet-12-12 { width: 100%;}
    header {
        padding-top: 20%;
    }
    .logo {
        padding-left: 1rem;
    }
}

/* mobile responsive */
@media (max-width: 480px) {
    .l-col-mobile-1-12 { width: 8.33333333%; }
    .l-col-mobile-2-12 { width: 16.66666667%; }
    .l-col-mobile-3-12 { width: 25%; }
    .l-col-mobile-4-12 { width: 33.33333333%; }
    .l-col-mobile-5-12 { width: 41.66666667%; }
    .l-col-mobile-6-12 { width: 50%; }
    .l-col-mobile-7-12 { width: 58.33333333%; }
    .l-col-mobile-8-12 { width: 66.66666667%; }
    .l-col-mobile-9-12 { width: 75%; }
    .l-col-mobile-10-12 { width: 83.33333333%; }
    .l-col-mobile-11-12 { width: 91.66666667%; }
    .l-col-mobile-12-12 { width: 100%;}
    header {
        padding-top: 20%;
    }
    .logo {
        padding-left: 1rem;
    }
}

header {
    background: url(./image/netflix-bg.jpg);
    padding-top: 10% ;
    height: 0;
    position: relative;
    /* overflow: hidden; */
}
header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.logo {
    padding-left: 1rem;
    color: red;
    line-height: 1;
    margin-top: -5rem;
    font-size: 5rem;
    text-transform: uppercase;
    position: relative;
    font-weight: bold;
}
.l-row h1 {
    padding: 1rem;
    margin-top: 1rem;
    color: #fff;
}
.l-col {
    float: left;
}
.l-col .cover {
    padding-top: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 0;
    margin: 1rem;
}
.movie-photo {
    height: 50%;
    top: 0;
    left: 0;
    right: 0;
    position: absolute;

}
.movie-photo img {
    width: 100%;
    height: 100%;
}
.movie-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    padding: .5rem;
}
.movie-content h1 {
    display: inline-block;
}
.movie-content p {
    overflow: hidden;
    line-height: 1.2;
    height: 6em;
    padding: 1rem;
    
}
.movie-content p::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
</style>

 

<index.html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<title>netfliex clone</title>
</head>
<body>

    <header>
        
    </header>
    <div class="inner">
    <h1 class="logo">
        netflix
    </h1>
    </div>
    <section class="wrap">
        <div class="inner">
            <ul class="l-row clearfix">
                <li class="l-col l-col-3-12 l-col-tablet-6-12 l-col-mobile-12-12">
                    <div class="cover">
                        <div class="movie-photo">
                            <img src="./image/movie01.png" alt="">
                        </div>
                        <div class="movie-content">
                            <h1>강철부대</h1>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem hic sapiente unde culpa asperiores repudiandae quas, voluptate voluptatem veritatis non placeat eaque minus. Ad animi doloremque reprehenderit fuga vero illo.
                            </p>
                        </div>
                    </div>
                </li>
                <li class="l-col l-col-3-12 l-col-tablet-6-12 l-col-mobile-12-12">
                    <div class="cover">
                        <div class="movie-photo">
                            <img src="./image/movie02.png" alt="">
                        </div>
                        <div class="movie-content">
                            <h1>응답하라1994</h1>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem hic sapiente unde culpa asperiores repudiandae quas, voluptate voluptatem veritatis non placeat eaque minus. Ad animi doloremque reprehenderit fuga vero illo.
                            </p>
                        </div>
                    </div>
                </li>
                <li class="l-col l-col-3-12 l-col-tablet-6-12 l-col-mobile-12-12">
                    <div class="cover">
                        <div class="movie-photo">
                            <img src="./image/movie03.png" alt="">
                        </div>
                        <div class="movie-content">
                            <h1>진격의 거인</h1>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem hic sapiente unde culpa asperiores repudiandae quas, voluptate voluptatem veritatis non placeat eaque minus. Ad animi doloremque reprehenderit fuga vero illo.
                            </p>
                        </div>
                    </div>
                </li>
                <li class="l-col l-col-3-12 l-col-tablet-6-12 l-col-mobile-12-12">
                    <div class="cover">
                        <div class="movie-photo">
                            <img src="./image/movie04.png" alt="">
                        </div>
                        <div class="movie-content">
                            <h1>스파이더맨</h1>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem hic sapiente unde culpa asperiores repudiandae quas, voluptate voluptatem veritatis non placeat eaque minus. Ad animi doloremque reprehenderit fuga vero illo.
                            </p>
                        </div>
                    </div>
                </li>
                <li class="l-col l-col-3-12 l-col-tablet-6-12 l-col-mobile-12-12">
                    <div class="cover">
                        <div class="movie-photo">
                            <img src="./image/movie05.png" alt="">
                        </div>
                        <div class="movie-content">
                            <h1>하이큐</h1>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem hic sapiente unde culpa asperiores repudiandae quas, voluptate voluptatem veritatis non placeat eaque minus. Ad animi doloremque reprehenderit fuga vero illo.
                            </p>
                        </div>
                    </div>
                </li>
                <li class="l-col l-col-3-12 l-col-tablet-6-12 l-col-mobile-12-12">
                    <div class="cover">
                        <div class="movie-photo">
                            <img src="./image/movie06.png" alt="">
                        </div>
                        <div class="movie-content">
                            <h1>삼국지</h1>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem hic sapiente unde culpa asperiores repudiandae quas, voluptate voluptatem veritatis non placeat eaque minus. Ad animi doloremque reprehenderit fuga vero illo.
                            </p>
                        </div>
                    </div>
                </li>
                <li class="l-col l-col-3-12 l-col-tablet-6-12 l-col-mobile-12-12">
                    <div class="cover">
                        <div class="movie-photo">
                            <img src="./image/movie07.png" alt="">
                        </div>
                        <div class="movie-content">
                            <h1>수트</h1>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem hic sapiente unde culpa asperiores repudiandae quas, voluptate voluptatem veritatis non placeat eaque minus. Ad animi doloremque reprehenderit fuga vero illo.
                            </p>
                        </div>
                    </div>
                </li>
                <li class="l-col l-col-3-12 l-col-tablet-6-12 l-col-mobile-12-12">
                    <div class="cover">
                        <div class="movie-photo">
                            <img src="./image/movie08.png" alt="">
                        </div>
                        <div class="movie-content">
                            <h1>퀸스갬빗</h1>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem hic sapiente unde culpa asperiores repudiandae quas, voluptate voluptatem veritatis non placeat eaque minus. Ad animi doloremque reprehenderit fuga vero illo.
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </section>
</html>