2021년 8월 31일

학습한 내용

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="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; }

.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-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;

}

결과물

학습내용 중 어려웠던 점

내용이 반복적인 것이 많아서 어려운점은 없었다.

해결방법

역시 반복적인 학습이 최고인것같다.

학습소감

요즘 반복적인 수업이 많아서 배움에 있어서 어려운점은 없었고, 오히려 바로바로 학습과 복습을 하는 느낌이 들었다. 내용 반복이 우선적으로 해야 이해하기도 쉽고, 배우는데 편안하게 생각하면서 수업에 임하였다.

좋은 웹페이지 즐겨찾기