きょうの講義

*コンテンツ領域コピーボックスの配置

コンテンツ領域の挿入

ツイッターコンテンツ履歴完了

<!-- twitch.html언어 -->
<div class="content">
			
			<div id="content_banner">
				<div class="layer">
					<div class="txt_wrap">
						<h2>Hello</h2>
						<p>Nice to meet you</p>
					</div>
				</div>
			</div>


			<div class="content_container">

				<div class="video_section">
					<div class="title_wrap">
						<h2>취향 저격 생방송 채널</h2>
					</div>	

					<div class="video_wrap">
						<ul>
							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/333x186">
										<span class="mark">생방송</span>
									</div>

									<div class="video_bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt_wrap">
											<h3>2021 LCK Summer Split</h3>
											<p class="source">LCK_Korea</p>
											<p class="game">League of Legend</p>

											<div class="tag_wrap">
												<span class="tag">e스포츠</span>
												<span class="tag">한국어</span>
												<span class="tag">독일어</span>
												<span class="tag">후원 열차</span>
											</div>
										</div>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>

			</div>

		</div>
        
<!-- style.css언어 -->
.content {
	overflow-y: auto;
	position: absolute;
	top: 50px;
	left: 240px;

	bottom: 0;
	right: 0;
}

.content #content_banner {
	position: relative;
	width: 100%;
	height: 350px;
	background: url("../img/notebook.jpg") no-repeat center;
	background-size: cover;
}

.content #content_banner .layer {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);

	top: 0;
	left: 0;
}

.content #content_banner .layer .txt_wrap {
	position: absolute;
	top: 170px;
	right: 200px;
}

.content .content_container {
	width: 1240px;
	margin: 0 auto;
}


/* 태그 디폴트 */
.content_container .tag_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.content_container .tag_wrap .tag {
	font-size: 12px;
	color: #ffffff;
	background-color: gray;
	border-radius: 8px;

	padding: 2px 4px 0;

	margin-right: 5px;
}

.content_container .tag_wrap .tag:last-child {
	margin-right: 0;
}

.content_container .txt_wrap {

}

.content_container .txt_wrap h3 {
	font-size: 16px;	
}


/* 비디오 섹션 */
.video_section {

}

.video_section .title_wrap {
	padding-bottom: 10px;
}

.video_section .title_wrap h2 {
	font-size: 20px;
}

.video_section .video_wrap {
	
}

.video_section .video_wrap ul {
	
}

.video_section .video_wrap li {
	width: 333px;
}

.video_section .video_wrap a {
	
}

.video_section .video_wrap .image_wrap {
	position: relative;
	width: 333px;
	height: 186px;
}

.video_section .video_wrap .image_wrap img {
	width: 100%;
	height: 100%;
}

.video_section .video_wrap .image_wrap .mark {
	position: absolute;

	top: 15px;
	left: 15px;

	border-radius: 5px;
	background-color: red;

	padding: 2px 4px 0;

	font-size: 14px;
}

.video_section .video_wrap .video_bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;

	margin-top: 10px;
}

.video_section .video_wrap .video_bottom .thumbnail {
	width: 40px;
	height: 40px;
}

.video_section .video_wrap .video_bottom .txt_wrap {
	width: calc(100% - 50px);
}

.video_section .video_wrap .video_bottom .txt_wrap .source,
.video_section .video_wrap .video_bottom .txt_wrap .game {
	font-size: 14px;
	color: gray;
}

背景画像挿入方法

background: url("../img/notebook.jpg") no-repeat center;   //center를 꼭 지정
background-size: cover;   //이 작성깁법은 굉장히 많이사용하는 삽입 기법. 순서를 달리 해도 상관없다. 기억해두자

background-size:coverは、指定したスペースを埋めるために画像の属性を自動的に拡大または縮小するために使用されます.画像のアスペクト比は変更されません.

background-size:coverを使用する場合、centerを中心に画像を調整することに注意してください.そのため、centerに重要な画像を設定することが重要です.

感想を述べる

新しい方式の背景の方法を学んで、練習する時このような方式を使うことを思い付きました.

難点

今度の授業は何の難点もない.

改善案

新しい方法を一つ一つ学び、いろいろな方法の練習をしなければならない.