[대구AI스쿨] 개발일지 31일차 210809
학습내용
1. 네이버 게임 (3)
1) 게임 왼쪽 영역 (2)
<div id="game-section-2" class="game-section">
<div class="section-title-wrap game-flex-between">
<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="https://via.placeholder.com/180x100">
<div class="txt">
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">동아일보</span>
</div>
</div>
<div class="image-txt game-flex-start">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</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"> <!-- game-section-2 변형-->
<div class="section-title-wrap game-flex-between">
<h2 class="font-19">오리지널 시리즈</h2>
</div>
<div class="section-body-wrap">
<div class="image-txt-wrap">
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">동아일보</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">동아일보</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">동아일보</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">동아일보</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">동아일보</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">인벤</span>
</div>
</div>
</div>
</div>
<a href="#" class="btn-circle icon-plus"></a>
<!-- btn-circle이 포함된 game-section에서는 margin-bottom을 39px로 설정할 것 -->
</div>
<div id="game-section-4" class="game-section"> <!-- game-section-3 변형-->
<div class="section-title-wrap game-flex-between">
<h2 class="font-19">인기게임 영상</h2>
</div>
<div class="section-body-wrap">
<ol class="game-flex-between">
<li>
<a href="#">
<div class="image-wrap">
<img src="https://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="https://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="https://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="https://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="https://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="https://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>
</div>
<div id="game-section-5" class="game-section"> <!-- game-section-1 변형-->
<div class="section-title-wrap game-flex-between">
<h2 class="font-19">이번 달 출시 게임</h2>
<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.29</a></li>
<li><a href="#">일 05.30</a></li>
<li><a href="#">월 05.31</a></li>
<li><a href="#">화 06.01</a></li>
<li><a href="#">수 06.02</a></li>
<li><a href="#">목 06.03</a></li>
</ul>
</nav>
<div class="section-body-wrap">
<ol class="game-flex-between">
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190x120">
<span class="badge open">오픈</span>
</div>
<div class="txt-wrap">
<h3>제 2의 나라 : Cross Worlds</h3>
<p>2021.04.14 ~ 2021.06.09</p>
<span>Android, ios</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190x120">
<span class="badge open">오픈</span>
</div>
<div class="txt-wrap">
<h3>제 2의 나라 : Cross Worlds</h3>
<p>2021.04.14 ~ 2021.06.09</p>
<span>Android, ios</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190x120">
<span class="badge">사전예약</span>
</div>
<div class="txt-wrap">
<h3>제 2의 나라 : Cross Worlds</h3>
<p>2021.04.14 ~ 2021.06.09</p>
<span>Android, ios</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190x120">
<span class="badge open">오픈</span>
</div>
<div class="txt-wrap">
<h3>제 2의 나라 : Cross Worlds</h3>
<p>2021.04.14 ~ 2021.06.09</p>
<span>Android, ios</span>
</div>
</a>
</li>
</ol>
</div>
<a href="#" class="btn-circle icon-plus"></a>
<!-- btn-circle이 포함된 game-section에서는 margin-bottom을 39px로 설정할 것 -->
</div>
<div id="game-section-6" class="game-section"> <!-- game-section-3 변형-->
<div class="section-title-wrap game-flex-between">
<h2 class="font-19">급상승 공식 게임 카페</h2>
</div>
<div class="section-body-wrap">
<div class="image-txt-wrap">
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
</div>
</div>
<a href="#" class="btn-circle icon-plus"></a>
<!-- btn-circle이 포함된 game-section에서는 margin-bottom을 39px로 설정할 것 -->
</div>
<div id="game-section-2" class="game-section">
<div class="section-title-wrap game-flex-between">
<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="https://via.placeholder.com/180x100">
<div class="txt">
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">동아일보</span>
</div>
</div>
<div class="image-txt game-flex-start">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</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"> <!-- game-section-2 변형-->
<div class="section-title-wrap game-flex-between">
<h2 class="font-19">오리지널 시리즈</h2>
</div>
<div class="section-body-wrap">
<div class="image-txt-wrap">
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">동아일보</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">동아일보</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">동아일보</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">동아일보</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">동아일보</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">인벤</span>
</div>
</div>
</div>
</div>
<a href="#" class="btn-circle icon-plus"></a>
<!-- btn-circle이 포함된 game-section에서는 margin-bottom을 39px로 설정할 것 -->
</div>
<div id="game-section-4" class="game-section"> <!-- game-section-3 변형-->
<div class="section-title-wrap game-flex-between">
<h2 class="font-19">인기게임 영상</h2>
</div>
<div class="section-body-wrap">
<ol class="game-flex-between">
<li>
<a href="#">
<div class="image-wrap">
<img src="https://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="https://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="https://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="https://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="https://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="https://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>
</div>
<div id="game-section-5" class="game-section"> <!-- game-section-1 변형-->
<div class="section-title-wrap game-flex-between">
<h2 class="font-19">이번 달 출시 게임</h2>
<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.29</a></li>
<li><a href="#">일 05.30</a></li>
<li><a href="#">월 05.31</a></li>
<li><a href="#">화 06.01</a></li>
<li><a href="#">수 06.02</a></li>
<li><a href="#">목 06.03</a></li>
</ul>
</nav>
<div class="section-body-wrap">
<ol class="game-flex-between">
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190x120">
<span class="badge open">오픈</span>
</div>
<div class="txt-wrap">
<h3>제 2의 나라 : Cross Worlds</h3>
<p>2021.04.14 ~ 2021.06.09</p>
<span>Android, ios</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190x120">
<span class="badge open">오픈</span>
</div>
<div class="txt-wrap">
<h3>제 2의 나라 : Cross Worlds</h3>
<p>2021.04.14 ~ 2021.06.09</p>
<span>Android, ios</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190x120">
<span class="badge">사전예약</span>
</div>
<div class="txt-wrap">
<h3>제 2의 나라 : Cross Worlds</h3>
<p>2021.04.14 ~ 2021.06.09</p>
<span>Android, ios</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190x120">
<span class="badge open">오픈</span>
</div>
<div class="txt-wrap">
<h3>제 2의 나라 : Cross Worlds</h3>
<p>2021.04.14 ~ 2021.06.09</p>
<span>Android, ios</span>
</div>
</a>
</li>
</ol>
</div>
<a href="#" class="btn-circle icon-plus"></a>
<!-- btn-circle이 포함된 game-section에서는 margin-bottom을 39px로 설정할 것 -->
</div>
<div id="game-section-6" class="game-section"> <!-- game-section-3 변형-->
<div class="section-title-wrap game-flex-between">
<h2 class="font-19">급상승 공식 게임 카페</h2>
</div>
<div class="section-body-wrap">
<div class="image-txt-wrap">
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈, LOL 챌린저에게 '챌린저 자켓 & 메달' 특별 보상 지급</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">[Tech] 그래픽카드 대란 종결될까? LHR 칼 빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
</div>
</div>
<a href="#" class="btn-circle icon-plus"></a>
<!-- btn-circle이 포함된 game-section에서는 margin-bottom을 39px로 설정할 것 -->
</div>css↓
/* game-section-2 */
#game-section-2 {
}
#game-section-2 .section-title-wrap more {
font-size: 13px;
font-weigth: 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: none;
}
#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-3 */
#game-section-3 {
margin-bottom: 39px;
}
#game-section-3 .section-body-wrap .image-txt .category {
display: block;
font-size: 13px;
color: #7776ff;
margin-bottom: 3px;
}
/* game-section-4 */
#game-section-4 ol {
align-items: flex-start;
}
#game-section-4 li {
}
#game-section-4 a {
display: block;
}
#game-section-4 .image-wrap {
position: relative;
overflow: hidden;
width: 263px;
height: 148px;
border-radius: 8px;
}
#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: grey;
left: 10px;
bottom: 12px;
}
#game-section-4 .image-wrap .time {
position: absolute;
background-color: rgba(0, 0, 0, .5);
border-radius: 6px;
padding: 2px 6px;
color: #fff;
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 */
#game-section-5 {
margin-bottom: 39px;
}
#game-section-5 .section-title-wrap .info {
font-size: 13px;
color: #999;
}
#game-section-5 .section-body-wrap .image-wrap {
position: relative;
width: 190px;
height: 120px;
}
#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: #fff;
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: grey;
}
/* game-section-6 */
#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 .txt {
width: 300px;
}
#game-section-6 .section-body-wrap .title {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
color: #666;
}
어려웠던 점과 해결방안
id와 class선택자를 사용할 때
공통요소를 디폴트로 적용할 때는 class, 공통요소가 아닌 커스텀을 진행할 때는 id 선택자를 사용한다.
id선택자가 class보다 우선되기 때문에 캐스캐이딩을 사용하기 쉽기 때문이다.
game-section-4 부모-형제태그간 상속에 대해서 좀 더 알아보기
<div class="image-txt">의 width를 100%로 설정하면
위의 <div class="image-wrap">에서 width: 263px;을 설정했기 때문에 부모태그인 a태그와 li태그에 영향을 주고,
그게 <div class="image-txt">의 공간으로 상속이 되어서 236px이 된다
※ 여기서 width값이 설정된 것은 <div class="image-wrap">밖에 없다.
학습소감
id와 class선택자를 사용할 때공통요소를 디폴트로 적용할 때는 class, 공통요소가 아닌 커스텀을 진행할 때는 id 선택자를 사용한다.id선택자가 class보다 우선되기 때문에 캐스캐이딩을 사용하기 쉽기 때문이다.
game-section-4 부모-형제태그간 상속에 대해서 좀 더 알아보기
<div class="image-txt">의 width를 100%로 설정하면
위의 <div class="image-wrap">에서 width: 263px;을 설정했기 때문에 부모태그인 a태그와 li태그에 영향을 주고,
그게 <div class="image-txt">의 공간으로 상속이 되어서 236px이 된다
※ 여기서 width값이 설정된 것은 <div class="image-wrap">밖에 없다.
game-section-4에서 공간상속에 대한 것이 헷갈렸는데, 다음에 또 비슷한 내용이 나오면 다시 시도해 봐야할 것 같다.
Author And Source
이 문제에 관하여([대구AI스쿨] 개발일지 31일차 210809), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seona056/대구AI스쿨-개발일지-31일차-210809저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
