2021年8月31日

175484 ワード

学習の内容

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;

}

結果

学習内容の難点

内容の重複性が多く、難点はありません.

解決策

勉強を重ねたほうがいい.

学習の心得.

最近気まぐれな授業が多くて、勉強には何の難点もなく、かえって勉強と復習だと感じています.内容の重複を優先して、やっと理解しやすくて、学んで順調に授業を受けます

Reference

この問題について(2021年8月31日), 我々は、より多くの情報をここで見つけました https://velog.io/@sind1083/2021년-8월-31일

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

中国語文字列長の問題:strlenとmb_strlen

[Programmers]フルナビゲーション(Brute force)-シミュレーション試験(Python)