210824 개발일지

1) 학습한 내용

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

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

<div class="video-section">
<div class="title-wrap">
<h2>추천 <span class="font-purple">League of legeneds</span> 채널</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> x 3

<div class="video-section">
<div class="title-wrap">
<h2>추천 <span class="font-purple">StarCraft</span> 채널</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> x 3

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

<div class="cateogry-section">
<div class="title-wrap">
<h2>취향 저격 <span class="font-purple">카테고리</span></h2>
</div>

<div class="category-wrap">
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">

<div class="txt-wrap">
<h3>Apex Legends</h3>
<p class="count">시청자 4.1만명</p>

<div class="tag-wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</a>
</li> x 8 

.cateogry-section 
	{padding-top: 60px;
	padding-bottom: 40px;}

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

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

.cateogry-section .category-wrap {}

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

.cateogry-section .category-wrap li 
	{width: 152px;}

.cateogry-section .category-wrap img 
	{width: 152px;
	height: 203px;
	margin-bottom: 10px;}

.cateogry-section .category-wrap .txt-wrap {}

.cateogry-section .category-wrap .txt-wrap .count 
	{font-size: 14px;
	color: grey;}

<footer>
<div class="txt-wrap">
<p>상호명: 동해물과 백두산이 마르고 닳도록</p>
<p>상호명: 동해물과 백두산이 마르고 닳도록</p>
<p>상호명: 동해물과 백두산이 마르고 닳도록</p>
<p>상호명: 동해물과 백두산이 마르고 닳도록</p>
</div>
<div class="footer-bottom">
<ul>
<li><a href="#">지원팀에 문의</a></li>
<li><a href="#">판매약관</a></li>
<li><a href="#">사업자 정보</a></li>
</ul>
</div>
</footer>

footer 
	{width: 100%;
	padding: 80px 0 150px;}

footer .txt-wrap 
	{text-align: center;}

footer .txt-wrap p 
	{font-size: 14px;}

footer .footer-bottom 
	{display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	align-content: stretch;

	margin-top: 20px;}

footer ul 
	{display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: stretch;}

footer ul li {}

footer ul li a 
	{color: grey;
	font-size: 14px;}

footer ul li a:after 
	{content: '';
	display: inline-block;

	width: 1px;
	height: 12px;
	background-color: grey;

	margin: 0 8px;

	position: relative;
	top: 1px;}

footer ul li:last-child a:after 
	{content: none;}

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

어려운 점은 없었다.

3)해결방법 작성

열심히 들어서 잘 마무리했다.

4)학습 소감

트위치부분도 끝났다.
내일은 무엇을 할까 기대된다.