학습 내용
2. 네이버 게임 왼쪽 영역 (2)
색상
border: solid 1px rgba(0, 0, 0, .04);
HTML에서 색상명은 RGB, HEX, HSL,RGBA,HSLA값들을 이용하여 지정할 수 있습니다.
참고 블로그
https://m.blog.naver.com/hadaboni80/221708385769
html 설계
<div class="right game-flex-end">
<div class="search-wrap game-flex-start">
<input type="text" placeholder="라운지, 게시물 검색">
<button type="button" class="btn-search"></button>
</div>
<div class="ticket-wrap">
<a href="#" class="btn-ticket"></a>
<p class="bubble-msg">응모 티켓 받고 꿀템 도전!</p>
</div>
<a href="#" class="btn-login">로그인</a>
</div>
</nav>
<div class="game-events-wrap game-flex-between">
<div class="event-wrap one">
<div class="event-title-wrap">
<span>HOT</span>
<h2>
디아블로 이모탈<br>
알파 테스트 참가 이벤트
</h2>
</div>
</div>
<div class="event-wrap two">
<div class="event-title-wrap">
<span>HOT</span>
<h2>
디아블로 이모탈<br>
알파 테스트 참가 이벤트
</h2>
</div>
</div>
<div class="event-wrap three">
<div class="event-title-wrap">
<span>HOT</span>
<h2>
디아블로 이모탈<br>
알파 테스트 참가 이벤트
</h2>
</div>
</div>
</div>
</div>
</header>
<main role="main" id="game-main">
<div class="game-container game-flex-between">
<div class="left">
<div class="left-banner game-shadow">
<a href="#">
<img src="https://via.placeholder.com/900x120">
</a>
</div>
<div id="game-section-1" class="game-section">
<div class="section-title-wrap">
<h2 class="font-19">게임 라운지 인기글</h2>
<div class="section-btn-wrap">
<a href="#" class="active">전체</a>
<a href="#">Joined</a>
</div>
</div>
<nav class="section-middle-nav">
<ul>
<li><a href="#" class="active">공략</a></li>
<li><a href="#">커뮤니티</a></li>
</ul>
</nav>