오늘의 강의 내용

* 트위치 컨텐츠영역 카피캣

카피캣 영역인 트위치컨텐츠 영역

트위치컨텐츠 여역 카피캣 완료된 모습

<!-- 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에 중요한 이미지를 설정해주는것이 중요하다.

강의를 끝난후 소감

새로운 방식의 배경을 넣는 방법을 배워, 연습할때 이방식으로 써봐야겠다는 생각이 들었다.

힘든점, 문제점

딱히 이번강의에 힘든점은 없었다.

개선방안

하나하나 새로운 방법을 배우면서 다양한방법의 연습을 해나가야겠다.