본문 바로가기
블록체인_9기/과제

4강_230303_과제_유튜브 재생화면 제작

weeji 2023. 3. 14.
728x90

과제 내용

  • 수업시간에 제작한 유튜브 목록화면에서 첫 번째 영상을 누르면 이동될 유튜브 재생화면 제작하기

결과물

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./230303_위지원_유튜브 영상선택 화면.css">
</head>
<body>

    <div class="main">

        <ul class="content">
            <li>
                <a href="./230303_위지원_유튜브 재생화면.html">
                    <div class="item">
                        <img class="image" src="https://i.ytimg.com/vi/fvwhcLLeaNo/hq720.jpg?sqp=-oaymwE2CNAFEJQDSFXyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARhlIGUoZTAP&rs=AOn4CLDlkWUG7lvSglXLtnuSwSvZFgcHJA" alt="봄 노래모음">
                        <div class="sub_tag">계속 마우스 오버하여 재생하기</div>
                        <span class="icon"></span>
                        <p class="title">발라드 명곡 모음 광고없음 노래모음 2023 ❤️  좋은노래 일할때 듣기좋은 발라드추천 <br> 노래모음 광고없음 팝송 게시자: 한국 라디오 스트리밍 시간: 9시간 전 11시간 54분 조회수 8,034회</p>
                        <p class="sub_title"> 에션설 <br> 조회수 18만회<span></span>2개월 전</p>
                    </div>
                </a>
                
                
            </li>
            <li>            
                <div class="item">
                    <img class="image" src="https://i.ytimg.com/vi/fvwhcLLeaNo/hq720.jpg?sqp=-oaymwE2CNAFEJQDSFXyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARhlIGUoZTAP&rs=AOn4CLDlkWUG7lvSglXLtnuSwSvZFgcHJA" alt="봄 노래모음">
                    <div class="sub_tag">계속 마우스 오버하여 재생하기</div>
                    <span class="icon"></span>
                    <p class="title">발라드 명곡 모음 광고없음 노래모음 2023 ❤️  좋은노래 일할때 듣기좋은 발라드추천 <br> 노래모음 광고없음 팝송 게시자: 한국 라디오 스트리밍 시간: 9시간 전 11시간 54분 조회수 8,034회</p>
                    <p class="sub_title"> 에션설 <br> 조회수 18만회<span></span>2개월 전</p>
                </div>
            </li>
            <li>            
                <div class="item">
                    <img class="image" src="https://i.ytimg.com/vi/fvwhcLLeaNo/hq720.jpg?sqp=-oaymwE2CNAFEJQDSFXyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARhlIGUoZTAP&rs=AOn4CLDlkWUG7lvSglXLtnuSwSvZFgcHJA" alt="봄 노래모음">
                    <div class="sub_tag">계속 마우스 오버하여 재생하기</div>
                    <span class="icon"></span>
                    <p class="title">발라드 명곡 모음 광고없음 노래모음 2023 ❤️  좋은노래 일할때 듣기좋은 발라드추천 <br> 노래모음 광고없음 팝송 게시자: 한국 라디오 스트리밍 시간: 9시간 전 11시간 54분 조회수 8,034회</p>
                    <p class="sub_title"> 에션설 <br> 조회수 18만회<span></span>2개월 전</p>
                </div>
            </li>
            <li>            
                <div class="item">
                    <img class="image" src="https://i.ytimg.com/vi/fvwhcLLeaNo/hq720.jpg?sqp=-oaymwE2CNAFEJQDSFXyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARhlIGUoZTAP&rs=AOn4CLDlkWUG7lvSglXLtnuSwSvZFgcHJA" alt="봄 노래모음">
                    <div class="sub_tag">계속 마우스 오버하여 재생하기</div>
                    <span class="icon"></span>
                    <p class="title">발라드 명곡 모음 광고없음 노래모음 2023 ❤️  좋은노래 일할때 듣기좋은 발라드추천 <br> 노래모음 광고없음 팝송 게시자: 한국 라디오 스트리밍 시간: 9시간 전 11시간 54분 조회수 8,034회</p>
                    <p class="sub_title"> 에션설 <br> 조회수 18만회<span></span>2개월 전</p>
                </div>
            </li>
        </ul>
    </div>
        

    <div class="main">

        <ul class="content">
            <li>
                    <div class="item">
                        <img class="image" src="https://i.ytimg.com/vi/fvwhcLLeaNo/hq720.jpg?sqp=-oaymwE2CNAFEJQDSFXyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARhlIGUoZTAP&rs=AOn4CLDlkWUG7lvSglXLtnuSwSvZFgcHJA" alt="봄 노래모음">
                        <div class="sub_tag">계속 마우스 오버하여 재생하기</div>
                        <span class="icon"></span>
                        <p class="title">발라드 명곡 모음 광고없음 노래모음 2023 ❤️  좋은노래 일할때 듣기좋은 발라드추천 <br> 노래모음 광고없음 팝송 게시자: 한국 라디오 스트리밍 시간: 9시간 전 11시간 54분 조회수 8,034회</p>
                        <p class="sub_title"> 에션설 <br> 조회수 18만회<span></span>2개월 전</p>
                    </div>
                </a>
                
                
            </li>
            <li>            
                <div class="item">
                    <img class="image" src="https://i.ytimg.com/vi/fvwhcLLeaNo/hq720.jpg?sqp=-oaymwE2CNAFEJQDSFXyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARhlIGUoZTAP&rs=AOn4CLDlkWUG7lvSglXLtnuSwSvZFgcHJA" alt="봄 노래모음">
                    <div class="sub_tag">계속 마우스 오버하여 재생하기</div>
                    <span class="icon"></span>
                    <p class="title">발라드 명곡 모음 광고없음 노래모음 2023 ❤️  좋은노래 일할때 듣기좋은 발라드추천 <br> 노래모음 광고없음 팝송 게시자: 한국 라디오 스트리밍 시간: 9시간 전 11시간 54분 조회수 8,034회</p>
                    <p class="sub_title"> 에션설 <br> 조회수 18만회<span></span>2개월 전</p>
                </div>
            </li>
            <li>            
                <div class="item">
                    <img class="image" src="https://i.ytimg.com/vi/fvwhcLLeaNo/hq720.jpg?sqp=-oaymwE2CNAFEJQDSFXyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARhlIGUoZTAP&rs=AOn4CLDlkWUG7lvSglXLtnuSwSvZFgcHJA" alt="봄 노래모음">
                    <div class="sub_tag">계속 마우스 오버하여 재생하기</div>
                    <span class="icon"></span>
                    <p class="title">발라드 명곡 모음 광고없음 노래모음 2023 ❤️  좋은노래 일할때 듣기좋은 발라드추천 <br> 노래모음 광고없음 팝송 게시자: 한국 라디오 스트리밍 시간: 9시간 전 11시간 54분 조회수 8,034회</p>
                    <p class="sub_title"> 에션설 <br> 조회수 18만회<span></span>2개월 전</p>
                </div>
            </li>
            <li>            
                <div class="item">
                    <img class="image" src="https://i.ytimg.com/vi/fvwhcLLeaNo/hq720.jpg?sqp=-oaymwE2CNAFEJQDSFXyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARhlIGUoZTAP&rs=AOn4CLDlkWUG7lvSglXLtnuSwSvZFgcHJA" alt="봄 노래모음">
                    <div class="sub_tag">계속 마우스 오버하여 재생하기</div>
                    <span class="icon"></span>
                    <p class="title">발라드 명곡 모음 광고없음 노래모음 2023 ❤️  좋은노래 일할때 듣기좋은 발라드추천 <br> 노래모음 광고없음 팝송 게시자: 한국 라디오 스트리밍 시간: 9시간 전 11시간 54분 조회수 8,034회</p>
                    <p class="sub_title"> 에션설 <br> 조회수 18만회<span></span>2개월 전</p>
                </div>
            </li>
        </ul>
    </div>
        
    </body>
</html>

css

.a{
    color: black;
    text-decoration: none;
}

a. .sub_title{
    color: gray;
}


.main{
    display: flex;
    /*margin :auto 좌우 여백이 동일하게 맞춰진다.*/
    margin: auto;

}



.content{
    width: max-content;
    /*자식 태그의 내용만큼 너비를 가지게*/
    padding: 0;
}



.content li{
    float: left;
    list-style: none;
    /*리스트의 형식을 지정할 수 있다.*/
}


/*content 클래스를 가진 태그의 자식 > li태그의 자식 > 
  image 클래스를 가진 태그만 스타일을 적용시킨다. */
.content li .image{
    width: 290px;
    height: 164px;
    border-radius: 10px;
}


/*어떤 태그의 자식이든 image 클래스를 가지고 있는 태그에 스타일을 적용시킨다.*/
.image{

}

.item{

    position: relative;

    width: 290px;
    height: 277px;

    margin-right: 20px;

}

/*마지막 자식 선택자*/
.content li:last-child .item{
    margin-right: 0;
}


.sub_tag{
    position: absolute;

    background-color: black;
    color: white;

    display: none;

    font-size: 12px;
    width: 180px;
    text-align: center;

    top: 140px;
    left: 100px;
}

/*가상 선택자*/
/*hover 속성: 마우스가 태그에 올려졌을 때 적용되는 스타일*/
/*item 태그에 마우스가 올려졌을 때 자식 태그 중 sub_tag클래스를 
  가지고 있는 태그가 스타일이 적용된다.*/
.item:hover .sub_tag{
    display: block;


}

.icon{

    position: absolute;

    bottom: 44px;
    left: 8px;

    background-image: url("https://yt3.ggpht.com/W2LutF-J5xl_uaD3fW07AWr7iqv9XsEZIm6BsmemDZLK7OBGGfL56Y_MgxkhTDuZiS_nnqLJ2w=s68-c-k-c0x00ffffff-no-rj");

    display: block;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    /*radius에 50%를 주면 원형이 된다.*/

}

.title{
    width: 220px;
    font-size: 14px;
    margin-left: 70px;
    margin-top: 15px;

    /*줄바꿈 속성을 없애준다. 한줄로 텍스트를 만들어준다.*/
    white-space: nowrap;

    /*부모태그보다 자식태그가 넘어가면 지워버림*/
    overflow: hidden;

    /*텍스트가 부모태그의 넓이보다 길어지면 점으로 표시*/
    text-overflow: ellipsis;

}

.sub_title{
    font-size: 13px;
    color: gray;
    margin: -4px 0 0 70px;
}

/*가상 선택자*/
/*before: 가상 요소를 추가해줄 수 있다.
            반드시 content 속성이 있어야 한다.*/
.sub_title span::before{
    content: "•";

}
728x90

'블록체인_9기 > 과제' 카테고리의 다른 글

6강_230307_과제_github 연동  (0) 2023.03.14
5강_230306_과제_메가박스 영화목록  (1) 2023.03.14
3강_230302_과제_리스트만들기  (0) 2023.03.14
2강_230228_과제_입사지원서 작성  (2) 2023.03.13
1강_230227_과제_자기소개서 작성  (0) 2023.03.13

'블록체인_9기/과제' 관련글

티스토리툴바