개발일지 21/06/28

강민정·2021년 6월 28일
0

학습 내용
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>
profile
TODO 개발서 만들기

0개의 댓글