2021.08.12네이버이스포츠2

dogyeomyeo4444·2021년 8월 12일
대구AI스쿨
0

오늘의 강의 내용

* 네이버이스포츠 왼쪽부분 카피캣

카피캣 영역인 네이버이스포츠 왼쪽부분

네이버이스포츠 왼쪽부분 카피캣 완료한 모습

<!-- esport.html언어 -->
<div class="left">
					
					<div id="esport_main_article">
						
						<div class="article full">
							<img src="https://via.placeholder.com/150">
							<div class="txt_wrap">
								<h3>Title</h3>
								<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
								<span class="source">포모스</span>
							</div>
						</div>

						<div class="article">
							<img src="https://via.placeholder.com/150">
							<div class="txt_wrap">
								<h3>Title</h3>
								<span class="source">포모스</span>
							</div>
						</div>

						<div class="article">
							<img src="https://via.placeholder.com/150">
							<div class="txt_wrap">
								<h3>Title</h3>
								<span class="source">포모스</span>
							</div>
						</div>

					</div>


					<div id="esport_replay" class="esport_section">
						
						<div class="title_wrap">
							<h2>경기 다시보기</h2>
						</div>

						<nav class="game_menu">
							<ul class="esport_flex_start">
								<li>
									<a href="#" class="active"> 
										<i></i>
										<span>MSI</span>
									</a>
								</li>

								<li>
									<a href="#"> 
										<i></i>
										<span>MSI</span>
									</a>
								</li>

								<li>
									<a href="#"> 
										<i></i>
										<span>MSI</span>
									</a>
								</li>
							</ul>
						</nav>


						<ul class="play_lists esport_flex_between">
							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/285x160">
										<div class="status_wrap esport_flex_between">
											<i></i>
											<span class="time">56:01</span>
										</div>
									</div>
									<h3>롤드컵 Day2 5세트 경기</h3>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/285x160">
										<div class="status_wrap esport_flex_between">
											<i></i>
											<span class="time">56:01</span>
										</div>
									</div>
									<h3>롤드컵 Day2 5세트 경기</h3>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/285x160">
										<div class="status_wrap esport_flex_between">
											<i></i>
											<span class="time">56:01</span>
										</div>
									</div>
									<h3>롤드컵 Day2 5세트 경기</h3>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/285x160">
										<div class="status_wrap esport_flex_between">
											<i></i>
											<span class="time">56:01</span>
										</div>
									</div>
									<h3>롤드컵 Day2 5세트 경기</h3>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/285x160">
										<div class="status_wrap esport_flex_between">
											<i></i>
											<span class="time">56:01</span>
										</div>
									</div>
									<h3>롤드컵 Day2 5세트 경기</h3>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/285x160">
										<div class="status_wrap esport_flex_between">
											<i></i>
											<span class="time">56:01</span>
										</div>
									</div>
									<h3>롤드컵 Day2 5세트 경기</h3>
								</a>
							</li>
						</ul>

					</div>


					<div id="esport_news" class="esport_section">
						
						<div class="title_wrap">
							<h2>추천 뉴스</h2>
						</div>

						<div class="article_wrap esport_flex_between">
							
							<ul class="left_lists esport_flex_between">
								<li>
									<a href="#">
										<img src="https://via.placeholder.com/226x132">
										<h3>타이틀1</h3>
										<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
									</a>
								</li>

								<li>
									<a href="#">
										<img src="https://via.placeholder.com/226x132">
										<h3>타이틀1</h3>
										<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
									</a>
								</li>
							</ul>

							<ul class="right_lists">
								<li><a href="#">동해물과 백두산이</a></li>
								<li><a href="#">동해물과 백두산이</a></li>
								<li><a href="#">동해물과 백두산이</a></li>
								<li><a href="#">동해물과 백두산이</a></li>
								<li><a href="#">동해물과 백두산이</a></li>
							</ul>

						</div>

					</div>


					<div id="esport_expert" class="esport_section">

						<div class="title_wrap">
							<h2>전문가 칼럼</h2>
						</div>

						<ul class="news_lists esport_flex_between">
							<li>
								<a href="#" class="esport_flex_start">
									<img src="https://via.placeholder.com/153x86">
									<div class="txt_wrap">
										<h3>Title</h3>
										<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
										<span class="source">핫매치 리뷰</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#" class="esport_flex_start">
									<img src="https://via.placeholder.com/153x86">
									<div class="txt_wrap">
										<h3>Title</h3>
										<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 </p>
										<span class="source">핫매치 리뷰</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#" class="esport_flex_start">
									<img src="https://via.placeholder.com/153x86">
									<div class="txt_wrap">
										<h3>Title</h3>
										<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 </p>
										<span class="source">핫매치 리뷰</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#" class="esport_flex_start">
									<img src="https://via.placeholder.com/153x86">
									<div class="txt_wrap">
										<h3>Title</h3>
										<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 </p>
										<span class="source">핫매치 리뷰</span>
									</div>
								</a>
							</li>
						</ul>

					</div>

				</div>

<!-- style.css언어 -->
#esport_main .content_wrap{
	overflow: hidden;
	padding-top: 30px;
}

#esport_main .left {
	float: left;
	width: 900px;
	/*height: 4000px;*/
	/*background-color: yellow;*/
}

#esport_main .right {
	float: right;
	width: 357px;
	height: 4000px;
	background-color: gray;
}

#esport_main_article {
	overflow: hidden;
	width: 100%;
	height: 468px;
	background-color: gray;
	border-radius: 10px;

	margin-bottom: 30px;
}

#esport_main_article .article {
	position: relative;
	float: left;
	width: 50%;
	height: 50%;
}

#esport_main_article .article.full {
	height: 100%;
}

#esport_main_article .article img {
	position: absolute;
	width: 100%;
	height: 100%;
}

#esport_main_article .article .txt_wrap {
	position: absolute;
	width: 100%;
	padding: 0 24px 20px;

	left: 0;
	bottom: 0;

	color: #ffffff;
}

#esport_main_article .article .txt_wrap h3 {
	font-size: 20px;
	line-height: 26px;
	font-weight: 700;
}

#esport_main_article .article .txt_wrap p {
	margin-top: 5px;

	font-size: 14px;
	font-weight: 500;
	line-height: 19px;
}

#esport_main_article .article .txt_wrap .source {
	display: block;
	margin-top: 10px;

	font-size: 13px;
	color: hsla(0, 0, 100%, 0.7);
}


.esport_section {
	border-top: solid 1px gray;
	padding-bottom: 30px;
	margin-bottom: 30px;
}

.esport_section .title_wrap {
	padding: 15px 0;
}

.esport_section .title_wrap h2 {
	font-size: 18px;
}


#esport_replay .game_menu {
	margin-bottom: 24px;
}

#esport_replay .game_menu ul {
	
}

#esport_replay .game_menu ul li {
	margin-right: 20px;
}

#esport_replay .game_menu ul li:last-child {
	margin-right: 0;
}

#esport_replay .game_menu ul li a {
	display: block;
	width: 60px;
	/*height: 82px;*/

	text-align: center;
}

#esport_replay .game_menu ul li a.active i {
	background-color: purple;
}

#esport_replay .game_menu ul li a.active span {
	color: purple;
}

#esport_replay .game_menu ul li i {
	display: inline-block;
	width: 60px;
	height: 60px;
	background-color: gray;
	border-radius: 50%;

	margin-bottom: 6px;
}

#esport_replay .game_menu ul li span {
	font-size: 13px;
}


#esport_replay .play_lists {

}

#esport_replay .play_lists li {
	width: 285px;
	margin-bottom: 24px;
}

#esport_replay .play_lists li:nth-child(4),
#esport_replay .play_lists li:nth-child(5),
#esport_replay .play_lists li:nth-child(6) {
	margin-bottom: 0;
}

#esport_replay .play_lists li a {
	display: block;
}

#esport_replay .play_lists li .image_wrap {
	position: relative;
	width: 100%;
	height: 160px;
	margin-bottom: 11px;
}

#esport_replay .play_lists li .image_wrap img {
	position: absolute;

	width: 100%;
	height: 100%;
}

#esport_replay .play_lists li .image_wrap .status_wrap {
	position: absolute;
	width: 100%;

	left: 0;
	bottom: 0;

	padding: 10px;
}

#esport_replay .play_lists li .image_wrap .status_wrap i {
	display: block;
	width: 20px;
	height: 20px;
	background-color: gray;
}

#esport_replay .play_lists li .image_wrap .status_wrap .time {
	background-color: rgba(0, 0, 0, 0.7);
	padding: 3px 5px;
	border-radius: 3px;

	font-size: 11px;
	color: #ffffff;
}

#esport_replay .play_lists li h3 {
	font-size: 15px;
}


#esport_news {

}

#esport_news .article_wrap {
	align-items: flex-start;
}

#esport_news .article_wrap .left_lists {
	width: 472px;
}

#esport_news .article_wrap .left_lists li {
	width: 226px;
}

#esport_news .article_wrap .left_lists li a {
	display: block;
}

#esport_news .article_wrap .left_lists img {
	width: 100%;
	height: 130px;
	margin-bottom: 9px;
}

#esport_news .article_wrap .left_lists h3 {
	font-size: 16px;
	font-weight: 500;
	line-height: 21px;
}

#esport_news .article_wrap .left_lists p {
	font-size: 14px;
	color: #777;
}

#esport_news .article_wrap .right_lists {
	width: 400px;
}

#esport_news .article_wrap .right_lists li {
	position: relative;
	margin-bottom: 5px;
}

#esport_news .article_wrap .right_lists li:before {
	position: absolute;
	display: inline-block;
	content: '';
	width: 4px;
	height: 4px;
	background-color: gray;
	border-radius: 50%;

	top: 6px;
}

#esport_news .article_wrap .right_lists li a {
	display: block;
	font-size: 16px;
	padding-left: 15px;
}


#esport_expert .news_lists {

}

#esport_expert .news_lists li {
	width: 450px;
	margin-bottom: 15px;
}

#esport_expert .news_lists li a {
	
}

#esport_expert .news_lists li img {
	width: 153px;
	height: 86px;
	margin-right: 15px;
}

#esport_expert .news_lists .txt_wrap {
	width: 268px;
}

#esport_expert .news_lists .txt_wrap h3 {
	font-size: 15px;
	font-weight: 500;
}

#esport_expert .news_lists .txt_wrap p {
	font-size: 14px;
	color: #777777;
	line-height: 19px;
	margin-top: 4px;

	display: -webkit-box;
	overflow: hidden;
	max-height: 38px;
	-webkit-line-clamp: 2;
	-webkit-box_orient: vertical;
	text-overflow: ellipsis;
}

#esport_expert .news_lists .txt_wrap .source {
	font-size: 13px;
	color: #777777;
}
  • 두줄 말줄임표 할때 쓰는 코드 (익스폴로러에서 사용하지못할수 있음)
<!-- css언어 -->
display: -webkit-box;
	overflow: hidden;
	max-height: 38px;  //줄수를 바꾸면 높이값도 변경한다.
	-webkit-line-clamp: 2;  //줄수조절은 여기서
	-webkit-box_orient: vertical;
	text-overflow: ellipsis;
}

강의를 끝난후 소감

영역을 설계하는것에 더 공부가 필요함을 느꼇다.

힘든점, 문제점

이번강의 에서는 크게 힘든점은 없었다.

개선방안

큰틀의 영역을 설계하는것을 더 연습을 해야겠다.

profile
dogyeomyeo4444
i will be the best
이전 포스트

2021.08.11네이버이스포츠

다음 포스트

2021.08.13네이버이스포츠3,네이버 오디오

0개의 댓글