학습한 내용
html
<div id="game-section-2" class="game-section">
<div class="section-title-wrap">
<h2 class="font-19">생생 주요 게임 뉴스</h2>
<a href="#" class="more">더보기</a>
</div>
<div class="section-body-wrap">
<div class="image-txt-wrap">
<div class="image-txt game-flex-start">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<h3 class="title">라이엇게임즈 라라라라라라라라라라라라라라</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<h3 class="title">라이엇게임즈 라라라라라라라라라라라라라라</h3>
<span class="source">인벤</span>
</div>
</div>
</div>
<ul>
<li>
<a href="#" class="game-flex-between">
<h3 class="title">라이엇게임즈</h3>
<span class="source">인벤</span>
</a>
</li>
<li>
<a href="#" class="game-flex-between">
<h3 class="title">라이엇게임즈</h3>
<span class="source">인벤</span>
</a>
</li>
<li>
<a href="#" class="game-flex-between">
<h3 class="title">라이엇게임즈</h3>
<span class="source">인벤</span>
</a>
</li>
<li>
<a href="#" class="game-flex-between">
<h3 class="title">라이엇게임즈</h3>
<span class="source">인벤</span>
</a>
</li>
</ul>
</div>
</div>
<div id="game-section-3" class="game-section">
<div class="section-title-wrap">
<h2 class="font-19">오리지널 시리즈</h2>
</div>
<div class="section-body-wrap">
<div class="image-txt-wrap">
<div class="image-txt game-flex-start">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 라라라라라라라라라라라라라라</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 라라라라라라라라라라라라라라</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 라라라라라라라라라라라라라라</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 라라라라라라라라라라라라라라</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 라라라라라라라라라라라라라라</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 라라라라라라라라라라라라라라</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 라라라라라라라라라라라라라라</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 라라라라라라라라라라라라라라</h3>
<span class="source">인벤</span>
</div>
</div>
</div>
</div>
<a href="#" class="btn-circle icon-plus"></a>
</div>
<div id="game-section-4" class="game-section">
<div class="section-title-wrap">
<h2 class="font-19">인기게임 영상</h2>
</div>
<div class="section-body-wrap">
<ol>
<li>
<a href="#">
<div class="image-wrap">
<img src="http://via.placeholder.com/263x148">
<i class="icon-play"></i>
<span class="time">01:06:26</span>
</div>
<div class="image-txt">
<h3>담원기아 vs RNG 1세트</h3>
<div class="game-flex-between">
<span class="source">리그 오브 레전드 네이버 스포츠</span>
<span class="count">17.161</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="http://via.placeholder.com/263x148">
<i class="icon-play"></i>
<span class="time">01:06:26</span>
</div>
<div class="image-txt">
<h3>담원기아 vs RNG 1세트</h3>
<div class="game-flex-between">
<span class="source">리그 오브 레전드 네이버 스포츠</span>
<span class="count">17.161</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="http://via.placeholder.com/263x148">
<i class="icon-play"></i>
<span class="time">01:06:26</span>
</div>
<div class="image-txt">
<h3>담원기아 vs RNG 1세트</h3>
<div class="game-flex-between">
<span class="source">리그 오브 레전드 네이버 스포츠</span>
<span class="count">17.161</span>
</div>
</div>
</a>
</li>
<li class="game-m-t-20">
<a href="#">
<div class="image-wrap">
<img src="http://via.placeholder.com/263x148">
<i class="icon-play"></i>
<span class="time">01:06:26</span>
</div>
<div class="image-txt">
<h3>담원기아 vs RNG 1세트</h3>
<div class="game-flex-between">
<span class="source">리그 오브 레전드 네이버 스포츠</span>
<span class="count">17.161</span>
</div>
</div>
</a>
</li>
<li class="game-m-t-20">
<a href="#">
<div class="image-wrap">
<img src="http://via.placeholder.com/263x148">
<i class="icon-play"></i>
<span class="time">01:06:26</span>
</div>
<div class="image-txt">
<h3>담원기아 vs RNG 1세트</h3>
<div class="game-flex-between">
<span class="source">리그 오브 레전드 네이버 스포츠</span>
<span class="count">17.161</span>
</div>
</div>
</a>
</li>
<li class="game-m-t-20">
<a href="#">
<div class="image-wrap">
<img src="http://via.placeholder.com/263x148">
<i class="icon-play"></i>
<span class="time">01:06:26</span>
</div>
<div class="image-txt">
<h3>담원기아 vs RNG 1세트</h3>
<div class="game-flex-between">
<span class="source">리그 오브 레전드 네이버 스포츠</span>
<span class="count">17.161</span>
</div>
</div>
</a>
</li>
</ol>
</div>
<a href="#" class="btn-circle icon-plus"></a>
</div>
<div id="game-section-5" class="game-section">
<div class="section-title-wrap">
<h2 class="font-19">이번달 출시 게임</h2>
<i></i>
<a href="#" class="info">가나다라마바사아자차카타파하</a>
</div>
<nav class="section-middle-nav">
<ul>
<li><a href="#" class="active">금 05.28</a></li>
<li><a href="#">토 05.30</a></li>
<li><a href="#">일 05.31</a></li>
</ul>
</nav>
<div class="section-body-wrap">
<ol class="game-flex-between">
<li>
<a href="#">
<div class="image-wrap">
<img src="http://via.placeholder.com/190x120">
<span class="badge open">오픈</span>
</div>
<div class="txt-wrap">
<h3>타이틀</h3>
<p>2021 ~05.28</p>
<span>닌텐도 스위치</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="http://via.placeholder.com/190x120">
<span class="badge open">오픈</span>
</div>
<div class="txt-wrap">
<h3>타이틀</h3>
<p>2021 ~05.28</p>
<span>닌텐도 스위치</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="http://via.placeholder.com/190x120">
<span class="badge">사전예약</span>
</div>
<div class="txt-wrap">
<h3>타이틀</h3>
<p>2021 ~05.28</p>
<span>닌텐도 스위치</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="http://via.placeholder.com/190x120">
<span class="badge">사전예약</span>
</div>
<div class="txt-wrap">
<h3>타이틀</h3>
<p>2021 ~05.28</p>
<span>닌텐도 스위치</span>
</div>
</a>
</li>
</ol>
</div>
<a href="#" class="btn-circle icon-plus"></a>
</div>
<div id="game-section-6" class="game-section">
<div class="section-title-wrap">
<h2 class="font-19">급상승 공식 게임 카페</h2>
</div>
<div class="section-body-wrap">
<div class="image-txt-wrap">
<div class="image-txt game-flex-start">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 라라라오오오오오오오오라라라라라라라라라라라</h3>
<span class="source">멤버 421,800명</span>
</div>
</div>
<div class="image-txt game-flex-start">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 라라오야노야노야노야노야라라라라라라라라라라라라</h3>
<span class="source">멤버 60,000명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 라라라껄껄껄껄껄껄라라라라라라라라라라라</h3>
<span class="source">멤버 512,550명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 라라라라라라라라라라라라라라</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 라라라라라하하하하하하하하라라라라라라라라라</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 라라라라라라라라라라라라라라</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 라라라라라라라라라라라라라라</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="http://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 라라라라라라라라라라라라라라</h3>
<span class="source">인벤</span>
</div>
</div>
</div>
</div>
<a href="#" class="btn-circle icon-plus"></a>
</div>
</div>
<div class="right"></div>
</div>
</main>
</body>
</html>css
#game-section-2{
}
#game-section-2 .section-title-wrap .more{
font-size: 13px;
font-weight: 400;
}
#game-section-2 .section-body-wrap{
}
#game-section-2 .section-body-wrap ul{
margin-top: 25px;
}
#game-section-2 .section-body-wrap li{
margin-bottom: 11px;
}
#game-section-2 .section-body-wrap li:last-child{
margin-bottom: 0;
}
#game-section-2 .section-body-wrap a{
}
#game-section-2 .section-body-wrap ul .title{
width: 776px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#game-section-2 .section-body-wrap ul .source{
}
#game-section-3 .section-body-wrap .image-txt .category{
display: block;
font-size: 13px;
color: #7776ff;
margin-bottom: 3px;
}
#game-main .right{
}
#game-section-4 ol{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
#game-section-4 li{
}
#game-section-4 a{
display: block;
}
#game-section-4 .image-wrap{
width: 263px;
height: 148px;
position: relative;
border-radius: 8px;
overflow: hidden;
}
#game-section-4 .image-wrap img{
position: absolute;
width: 100%;
height: 100%;
}
#game-section-4 .image-wrap .icon-play{
position: absolute;
width: 25px;
height: 25px;
background-color: gray;
left: 10p;
bottom: 12px;
}
#game-section-4 .image-wrap .time{
position: absolute;
background-color: rgba(0, 0, 0, .5);
padding: 2 6px;
border-radius: 6px;
color: #ffffff;
font-size: 14px;
right: 10px;
bottom: 10px;
}
#game-section-4 .section-body-wrap .image-txt{
width: 100%;
margin-top: 10px;
}
#game-section-4 .image-txt h3{
font-size: 15px;
}
#game-section-4 .image-txt .source
#game-section-4 .image-txt .count{
font-size: 13px;
color: #999;
}
#game-section-5 .section-title-wrap .info{
font-size: 13px;
color: #999999;
}
#game-section-5 .section-body-wrap .image-wrap{
width: 190px;
height: 120px;
position: relative;
}
#game-section-5 .section-body-wrap .image-wrap img{
position: absolute;
width: 100%;
height: 100%;
border: none;
margin-right: 0;
}
#game-section-5 .section-body-wrap .image-wrap .badge{
position: absolute;
display: inline-block;
color: #ffffff;
background-color: #4e41db;
font-size: 15px;
font-weight: 700;
padding: 4px 8px;
border-radius: 8px;
top: -5px;
left: -5px;
}
#game-section-5 .section-body-wrap .image-wrap .badge.open{
background-color: red;
}
#game-section-5 .section-body-wrap .txt-wrap{
margin-top: 12px;
}
#game-section-5 .section-body-wrap .txt-wrap h3{
font-size: 15px;
font-weight: 600;
}
#game-section-5 .section-body-wrap .txt-wrap p{
font-size: 13px;
font-weight: 500;
}
#game-section-5 .section-body-wrap .txt-wrap span{
font-size: 13px;
color: gray;
}
#game-section-6 .section-body-wrap img{
width: 80px;
height: 80px;
border-radius: 30px;
}
#game-section-6 .section-body-wrap .category{
font-size: 15px;
}
#game-section-6 .section-body-wrap .title{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
color: #666;
}
#game-section-6 .section-body-wrap .txt{
width: 300px;
}
학습내용 중 어려웠던 점
</div>의 위치를 잘못 설정하여 중간에 구조가 뒤틀리는 어려움이 있었지만 잘 해결하였다.
해결 방법
어긋나는 부분이 어디인지를 보며 div의 위치를 수정하였다.
학습소감
재미있다.!!
hello