42(0824)

35강 트위치 2 ( 0:57:40 - 끝 )

학습 내용

html

<button type="button" class="btn-more font-purple">더보기</button>

css

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

twitch.html

<div class="category-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">시청자 1.2만명</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>

css

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

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

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

}

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

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

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

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

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

html

<footer>
					<div class="txt-wrap">
						<p>상호명: Twitch Interactive, Inc.</p>
						<p>대표자: Emmett Shear, CEO</p>
						<p>주소: 350 Bush Street, 2nd Floor, San Francisco, California 94104, USA</p>
						<p>070-8984-5697</p>
						<p>호스팅 서비스 제공자: Amazon Web Services, Inc.</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>

css

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-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	align-content: stretch;

	margin-top: 10px;
}

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

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

css

.video-section .video-wrap .image-wrap {
	background-color: #9147ff;
}
    
.video-section .video-wrap .image-wrap:hover img {
	transform: translate(10px, -10px);
    transition: transform 0.3s linear;
}

어려웠던 점 & 해결 방법
어려운 부분은 없었다.

학습 소감
오랜만에 애니메이션을 적용하려니 생소하게 느껴졌다. 키즈가오 강의를 다시 들어보아야겠다.