2021_08_ 23개발일지

Yeo Eunhye·2021년 8월 23일
개발일지
0

1) 학습한 내용

오늘은 트위치 메인 오른쪽 영역을 마무리 해보았다.

1. video section

- html

<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/320x180">
										<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>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/320x180">
										<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>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/320x180">
										<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>
						</ul>
					</div>

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


				<div class="video-section">
					<div class="title-wrap">
						<h2>추천 <span class="font-purple">Just Chatting</span> 채널</h2>
					</div>

					<div class="video-wrap">
						<ul>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/320x180">
										<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>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/320x180">
										<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>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/320x180">
										<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>
						</ul>
					</div>

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

				<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/320x180">
										<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>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/320x180">
										<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>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/320x180">
										<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>
						</ul>
					</div>

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

				<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/320x180">
										<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>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/320x180">
										<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>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/320x180">
										<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>
						</ul>
					</div>

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


				<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/320x180">
										<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>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/320x180">
										<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>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/320x180">
										<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>
						</ul>
					</div>

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

- css

/* 비디오 섹션 */
.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: 18px;
}

.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: 13px;
}
.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 {
	border-radius: 50%;
	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%);
}
.video-section .btn-more:hover {
	cursor: pointer;
}

2. cateogry-section

- html

<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>
							<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>
							<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>
							<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>
							<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>
							<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>
						
						</ul>
					</div>
				</div>

- css

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

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

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

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

- html

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

- css

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

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

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

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 안에서 중앙정렬*/
}

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

	/*x축 정렬*/
}

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) 학습내용 중 어려웠던 점 및 해결방법

크기가 맞지 않아 내컴퓨터 브라우저 크기에 맞는 트위치 페이지의 레이아웃으로 작업을 하였다.
그러고 보니 왼쪽영역의 fixed 되어 있는 부분의 위로 오른쪽 영역이 x축스크롤이 되어 왼쪽 영역에 z-index를 주어 뒤로 들어 갈 수 있도록 하였다.
또 원래 페이지에 오른쪽 부분에 양옆으로 마진 값이 들어가있어서 똑같이 해주었더니 레이아웃이 틀어져 이미지 크기를 줄이고 페이지에 맞게 갯수를 정리하였더니 틀어지지 않고 잘 보여질 수 있었다.

3) 학습소감

벌써 8월의 마지막주이다. 이렇게 점점 혼자하는 실습이 끝나가고 팀으로 하는 프로젝트가 진행된다고 하니 무섭다... 어떤게 주어질까 내역할을 잘해낼 수 있을지 걱정이 된다.
어떻게든 폐가 되지 않도록 열심히 해봐야겠다!!
이번주도 뽜이팅 :)

profile
Yeo Eunhye
아직 여백이 많은 개린이입니다.
이전 포스트

2021_08_20 개발일지

다음 포스트

2021_08_24개발일지

0개의 댓글

관련 채용 정보