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 |