210823 개발일지

1) 학습한 내용

국내외 사이트 카피캣 (트위치 3편)

> 트위치 콘텐츠 영역 (1)

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

.content 
	{overflow-y: auto;
	position: absolute;
	top: 50px;
	left: 240px;
  	
  	bottom: 0;
  	right: 0;}

.content h1 
	{font-size: 40px;}

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

<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 Legends</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> x3

/* 비디오 섹션 */
.video-section 
	{position: relative;
	padding-top: 60px;
	padding-bottom: 40px;

	border-bottom: solid 1px grey;}

.video-section .title-wrap 
	{padding-bottom: 10px;}

.video-section .title-wrap h2 
	{font-size: 20px;}

.video-section .video-wrap {}

.video-section .video-wrap ul 
	{display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;}

.video-section .video-wrap li 
	{width: 333px;}

.video-section .video-wrap a {}

.video-section .video-wrap .image-wrap
	{position: relative;
	width: 333px;
	height: 186px;
	background-color: #9147ff;}

.video-section .video-wrap .image-wrap img 
	{width: 100%;
	height: 100%;

	transition: transform 0.15s linear;}

.video-section .video-wrap .image-wrap:hover img 
	{transform: translate(10px, -10px);}

.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: grey;}

.video-section .btn-more 
	{position: absolute;

	width: 100px;
	height: 30px;
	background-color: #0e0e10;

	text-align: center;
	line-height: 30px;

	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);}

2)학습한 내용 중 어려웠던 점 또는 해결못한 것들

잘 해결해나갔다.

3)해결방법 작성

강의를 열심히 들어서 해나갔ㄷ.

4)학습 소감

벌써 8월 마지막주다
힘내장