2021년 8월 27일
학습한 내용
html - youtube
<main id="youtube-main" role="main">
<div id="youtube-main-content">
<ul class="flex-align-between">
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="channel.html" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="channel.html" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="channel.html" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="channel.html" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</main>
</div>
### css
.channel-playlists-section {
padding: 24px 0;
border-bottom: solid 1px grey;
}
<main id="youtube-main" role="main">
<div id="youtube-main-content">
<ul class="flex-align-between">
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="channel.html" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="channel.html" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="channel.html" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="channel.html" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel-link">MBC 엔터테이먼트</a></p>
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</main>
</div>.channel-playlists-section .playlists-header {
}
.channel-playlists-section .playlists-header h3 {
font-size: 18px;
color: #ffffff;
margin-right: 20px;
}
.channel-playlists-section .playlists-header .play-wrap {
width: 85px;
}
.channel-playlists-section .playlists-header .play-wrap .icon-play {
width: 24px;
height: 24px;
background-color: #ffffff;
}
.channel-playlists-section .playlists-header .play-wrap .play-link {
font-size: 14px;
color: #aaaaaa;
margin-left: 8px;
}
.channel-playlists-section .playlists-body {
margin-top: 24px;
}
.channel-playlists-section .playlists-body ul {
}
.channel-playlists-section .playlists-body li {
width: 210px;
}
.channel-playlists-section .playlists-body li .channel-thumbnail {
width: 100%;
height: 118px;
}
.channel-playlists-section .playlists-body li .channel-thumbnail a {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.channel-playlists-section .playlists-body li .channel-thumbnail img {
width: 100%;
height: 100%;
}
.channel-playlists-section .playlists-body li .channel-thumbnail .time {
position: absolute;
font-size: 12px;
color: #ffffff;
background-color: #000000;
padding: 4px 8px 2px;
border-radius: 5px;
bottom: 4px;
right: 4px;}
.channel-playlists-section .playlists-body .channel-txt-wrap {
margin-top: 8px;
}
.channel-playlists-section .playlists-body .channel-txt-wrap h3 {
font-size: 15px;
margin-bottom: 6px;
}
.channel-playlists-section .playlists-body .channel-txt-wrap h3 a {
color: #ffffff;
}
.channel-playlists-section .playlists-body .channel-txt-wrap p {
font-size: 12px;
}
.channel-playlists-section .playlists-body .channel-txt-wrap p a {
color: #aaaaaa;
}
.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom {
}
.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom .count,
.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom .date {
font-size: 12px;
color: #aaaaaa;
}
/ 탐색 페이지 /
.explore-container {
width: 1280px;
margin: 0 auto;
}
#explore-nav {
padding: 12px 0 8px;
}
#explore-nav ul {
}
#explore-nav li {
overflow: hidden;
width: 210px;
height: 116px;}
#explore-nav li a {
display: block;
width: 100%;
height: 100%;
background-color: grey;
border-radius: 5px;
padding: 20px;}
#explore-nav li a:hover {
background-color: darkgrey;
}
#explore-nav li .icon {
display: block;
width: 32px;
height: 32px;
background-color: red;
margin-bottom: 25px;}
#explore-nav li span {
color: #ffffff;
font-size: 16px;
}
#popular-section {
margin-top: 24px;
}
#popular-section h2 {
font-size: 20px;
color: #ffffff;
}
#popular-section ul {
margin-top: 24px;
}
#popular-section li {
margin-bottom: 16px;
}
#popular-section a {
align-items: flex-start;
}
#popular-section li .image-wrap {
position: relative;
width: 246px;
height: 148px;
margin-right: 16px;
}
#popular-section li .image-wrap img {
width: 100%;
height: 100%;
}
#popular-section li .image-wrap .time {
position: absolute;
padding: 4px 8px 2px;
background-color: #212121;
color: #ffffff;
font-size: 12px;
border-radius: 5px;
bottom: 4px;
right: 4px;}
#popular-section li .txt-wrap {
width: 600px;
}
#popular-section li .txt-wrap h3 {
font-size: 20px;
color: #ffffff;
}
#popular-section li .txt-wrap .video-info {
color: #aaaaaa;
font-size: 14px;
}
#popular-section li .txt-wrap .video-info span:after {
content: '';
display: inline-block;
width: 4px;
height: 4px;
background-color: #aaaaaa;
border-radius: 50%;
margin: 6px 4px 0 8px;
vertical-align: top;}
#popular-section li .txt-wrap .video-info span:last-child:after {
content: none;
}
#popular-section li .txt-wrap .video-info .channel {
}
#popular-section li .txt-wrap .video-info .count {
}
#popular-section li .txt-wrap .video-info .date {
}
#popular-section li .txt-wrap .description {
padding-top: 8px;
font-size: 14px;
color: #aaaaaa;}
결과물
학습내용 중 어려웠던 점
내용이 반복적인 것이 많아서 어려운점은 없었다.
해결방법
역시 반복적인 학습이 최고인것같다.
학습소감
요즘 반복적인 수업이 많아서 배움에 있어서 어려운점은 없었고, 오히려 바로바로 학습과 복습을 하는 느낌이 들었다.
Author And Source
이 문제에 관하여(2021년 8월 27일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sind1083/2021년-8월-27일저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
