[dg_ai_school] 웹프로그래밍 32

이채환·2021년 8월 10일
0

webprogramming

목록 보기
32/51

학습내용

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>네이버</title>
</head>
<body id="game-body">
	
	<header id="game-header">
		<div class="game-container">
			<nav class="game-flex-between">
				<div class="left game-flex-start">
					<h2>NAVER</h2>
					<h1><a href="#">GAME</a></h1>

					<ul class="game-flex-start">
						<li><a href="#">e스포츠</a></li>
						<li><a href="#">PC게임</a></li>
					</ul>
				</div>

				<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>
							MMORPG의 정석으로 재탄생<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>

					<ol>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>안녕하세요. 로스트아크의 디렉터 금강선입니다.</h3>
									<div class="source-wrap">
										<span class="game">로스트아크</span>
										<span class="author">MAN</span>
										<span class="level">LV19</span>
										<span class="rank">16</span>
									</div>	
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>안녕하세요. 로스트아크의 디렉터 금강선입니다.</h3>
									<div class="source-wrap">
										<span class="game">로스트아크</span>
										<span class="author">MAN</span>
										<span class="level">LV19</span>
										<span class="rank">16</span>
									</div>	
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>안녕하세요. 로스트아크의 디렉터 금강선입니다.</h3>
									<div class="source-wrap">
										<span class="game">로스트아크</span>
										<span class="author">MAN</span>
										<span class="level">LV19</span>
										<span class="rank">16</span>
									</div>	
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>안녕하세요. 로스트아크의 디렉터 금강선입니다.</h3>
									<div class="source-wrap">
										<span class="game">로스트아크</span>
										<span class="author">MAN</span>
										<span class="level">LV19</span>
										<span class="rank">16</span>
									</div>	
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>안녕하세요. 로스트아크의 디렉터 금강선입니다.</h3>
									<div class="source-wrap">
										<span class="game">로스트아크</span>
										<span class="author">MAN</span>
										<span class="level">LV19</span>
										<span class="rank">16</span>
									</div>	
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>안녕하세요. 로스트아크의 디렉터 금강선입니다.</h3>
									<div class="source-wrap">
										<span class="game">로스트아크</span>
										<span class="author">MAN</span>
										<span class="level">LV19</span>
										<span class="rank">16</span>
									</div>	
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>안녕하세요. 로스트아크의 디렉터 금강선입니다.</h3>
									<div class="source-wrap">
										<span class="game">로스트아크</span>
										<span class="author">MAN</span>
										<span class="level">LV19</span>
										<span class="rank">16</span>
									</div>	
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>안녕하세요. 로스트아크의 디렉터 금강선입니다.</h3>
									<div class="source-wrap">
										<span class="game">로스트아크</span>
										<span class="author">MAN</span>
										<span class="level">LV19</span>
										<span class="rank">16</span>
									</div>	
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>안녕하세요. 로스트아크의 디렉터 금강선입니다.</h3>
									<div class="source-wrap">
										<span class="game">로스트아크</span>
										<span class="author">MAN</span>
										<span class="level">LV19</span>
										<span class="rank">16</span>
									</div>	
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
					</ol>

					<a href="#" class="btn-circle icon-arrow"></a>
				</div>

				<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="https://via.placeholder.com/180x100">
								<div class="txt">
									<h3 class="title">프로젝트 HP, 묵직하면서 답답한 템포 국내서 통할까?</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">프로젝트 HP, 묵직하면서 답답한 템포 국내서 통할까?</h3>
									<span class="source">게임메카</span>
								</div>
							</div>
						</div>

						<ul>
							<li>
								<a href="#" class="game-flex-between">
									<h3 class="title">네오위즈 '블레스 언리쉬드 PC' 7일 스팀 오픈</h3>
									<span class="source">인벤</span>
								</a>
							</li>
							<li>
								<a href="#" class="game-flex-between">
									<h3 class="title">네오위즈 '블레스 언리쉬드 PC' 7일 스팀 오픈</h3>
									<span class="source">인벤</span>
								</a>
							</li>
							<li>
								<a href="#" class="game-flex-between">
									<h3 class="title">네오위즈 '블레스 언리쉬드 PC' 7일 스팀 오픈</h3>
									<span class="source">인벤</span>
								</a>
							</li>
							<li>
								<a href="#" class="game-flex-between">
									<h3 class="title">네오위즈 '블레스 언리쉬드 PC' 7일 스팀 오픈</h3>
									<span class="source">인벤</span>
								</a>
							</li>
						</ul>
					</div>
				</div>

				<div class="left-banner game-shadow">
					<a href="#">
						<img src="https://via.placeholder.com/900x120">
					</a>
				</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="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">무료면 그걸로 오케이입니다. "플래그테일"</h3>
									<span class="source">G조커</span>
								</div>
							</div>

							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">두툰 게임실황 만화</span>
									<h3 class="title">129화 - 게임성이란 무엇일까요? #1</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">무료면 그걸로 오케이입니다. "플래그테일"</h3>
									<span class="source">G조커</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">129화 - 게임성이란 무엇일까요? #1</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">무료면 그걸로 오케이입니다. "플래그테일"</h3>
									<span class="source">G조커</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">129화 - 게임성이란 무엇일까요? #1</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">무료면 그걸로 오케이입니다. "플래그테일"</h3>
									<span class="source">G조커</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">129화 - 게임성이란 무엇일까요? #1</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">무료면 그걸로 오케이입니다. "플래그테일"</h3>
									<span class="source">G조커</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">129화 - 게임성이란 무엇일까요? #1</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="https://via.placeholder.com/263x148">
										<i class="icon-play"></i>
										<span class="time">01:07:10</span>
									</div>
									<div class="image-txt">
										<h3>BRO-DK 1세트</h3>
										<div class="game-flex-between">
											<span class="source">리그 오브 레전드 네이버 e스포츠</span>
											<span class="count">10,987</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:07:10</span>
									</div>
									<div class="image-txt">
										<h3>BRO-DK 1세트</h3>
										<div class="game-flex-between">
											<span class="source">리그 오브 레전드 네이버 e스포츠</span>
											<span class="count">10,987</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:07:10</span>
									</div>
									<div class="image-txt">
										<h3>BRO-DK 1세트</h3>
										<div class="game-flex-between">
											<span class="source">리그 오브 레전드 네이버 e스포츠</span>
											<span class="count">10,987</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:07:10</span>
									</div>
									<div class="image-txt">
										<h3>BRO-DK 1세트</h3>
										<div class="game-flex-between">
											<span class="source">리그 오브 레전드 네이버 e스포츠</span>
											<span class="count">10,987</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:07:10</span>
									</div>
									<div class="image-txt">
										<h3>BRO-DK 1세트</h3>
										<div class="game-flex-between">
											<span class="source">리그 오브 레전드 네이버 e스포츠</span>
											<span class="count">10,987</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:07:10</span>
									</div>
									<div class="image-txt">
										<h3>BRO-DK 1세트</h3>
										<div class="game-flex-between">
											<span class="source">리그 오브 레전드 네이버 e스포츠</span>
											<span class="count">10,987</span>
										</div>
									</div>
								</a>
							</li>
						</ol>
					</div>
				</div>

				<div id="game-section-5" class="game-section">

					<div class="section-title-wrap">

						<h2 class="font-19">이번 달 출시 게임</h2>

						<div>
							<i></i>	
							<a href="#" class="info">일정은 게임사 사정으로 변결될 수 있습니다.</a>
						</div>
					</div>

					<nav class="section-middle-nav">
						<ul>
							<li><a href="#" class="active">금 08.06</a></li>
							<li><a href="#">토 08.07</a></li>
							<li><a href="#">일 08.08</a></li>
							<li><a href="#">월 08.09</a></li>
							<li><a href="#">화 08.10</a></li>
							<li><a href="#">수 08.11</a></li>
							<li><a href="#">목 08.12</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>팔코니어 워리어 에디션</h3>
										<p>2021.08.06</p>
										<span>PC,PS4,PS5</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>내 친구 페드로</h3>
										<p>2021.08.06</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>인피니트 라그랑주</h3>
										<p>2021.06.13 ~ 2021.08.17</p>
										<span>Android,iOS,PC</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>나의 히어로 아카데미아: 최강 히어로</h3>
										<p>2021.07.07 ~ 2021.09.01</p>
										<span>Android,iOS</span>
									</div>
								</a>
							</li>
						</ol>
					</div>

					<a href="#" class="btn-circle icon-arrow"></a>
				</div>

				<div id="game-section-6" class="game-section">

					<div class="section-title-wrap">
						<h2 class="font-19"><em>공식</em> 게임 라운지</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/60">
								<div class="txt">
									<h3 class="title">블리치 만해의 길</h3>
									<span class="source"><블리치: 만해의 길>에 오신 것을 환영합니다!</span>
								</div>
							</div>

							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/60">
								<div class="txt">
									<h3 class="title">미니어스: 작지만 놀라운 모험</h3>
									<span class="source">작지만 놀라운 모험이 시작됩니다.</span>
								</div>
							</div>
						</div>
						<div class="image-txt-wrap">
							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/60">
								<div class="txt">
									<h3 class="title">블리치 만해의 길</h3>
									<span class="source"><블리치: 만해의 길>에 오신 것을 환영합니다!</span>
								</div>
							</div>

							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/60">
								<div class="txt">
									<h3 class="title">미니어스: 작지만 놀라운 모험</h3>
									<span class="source">작지만 놀라운 모험이 시작됩니다.</span>
								</div>
							</div>
						</div>
						<div class="image-txt-wrap">
							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/60">
								<div class="txt">
									<h3 class="title">블리치 만해의 길</h3>
									<span class="source"><블리치: 만해의 길>에 오신 것을 환영합니다!</span>
								</div>
							</div>

							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/60">
								<div class="txt">
									<h3 class="title">미니어스: 작지만 놀라운 모험</h3>
									<span class="source">작지만 놀라운 모험이 시작됩니다.</span>
								</div>
							</div>
						</div>
												<div class="image-txt-wrap">
							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/60">
								<div class="txt">
									<h3 class="title">블리치 만해의 길</h3>
									<span class="source"><블리치: 만해의 길>에 오신 것을 환영합니다!</span>
								</div>
							</div>

							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/60">
								<div class="txt">
									<h3 class="title">미니어스: 작지만 놀라운 모험</h3>
									<span class="source">작지만 놀라운 모험이 시작됩니다.</span>
								</div>
							</div>
						</div>
												<div class="image-txt-wrap">
							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/60">
								<div class="txt">
									<h3 class="title">블리치 만해의 길</h3>
									<span class="source"><블리치: 만해의 길>에 오신 것을 환영합니다!</span>
								</div>
							</div>

							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/60">
								<div class="txt">
									<h3 class="title">미니어스: 작지만 놀라운 모험</h3>
									<span class="source">작지만 놀라운 모험이 시작됩니다.</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>


			<div class="right">
				<div id="visitor-section" class="right-section">
					
					<div class="title-wrap game-flex-between">
						<h2>최근 방문</h2>
						<a href="#">MY라운지 이동</a>
					</div>

					<div class="right-section-body">
						<div class="text-wrap">
							<p>관심있는 게임을 검색해보세요.</p>
							<div class="input-wrap game-flex-start">
								<input type="" placeholder="라운지 검색">
								<button type="button"></button>
							</div>
						</div>
					</div>
				</div>

				<div id="popular-section-1" class="right-section rank-section">
					
					<div class="title-wrap game-flex-between">
						<h2>인기 게임 라운지 TOP5</h2>
						<a href="#">더보기</a>
					</div>

					<div class="right-section-body">
						<ol>
							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">1</span>
									<div class="up-and-down-wrap">
										<div class="equal"></div>
									</div>
								</div>	

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55x55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>리그 오브 레전드</h3>
									<span class="genre">MOBA</span>
								</div>
							</li>
							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count red">2</span>
									<div class="up-and-down-wrap">
										<span class="up">1</span>
									</div>
								</div>	

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55x55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>FIFA 온라인 4</h3>
									<span class="genre">스포츠</span>
								</div>
							</li>
							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">3</span>
									<div class="up-and-down-wrap">
										<span class="up">1</span>
									</div>
								</div>	

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55x55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>로스트아크</h3>
									<span class="genre">핵앤슬래시 MMORPG</span>
								</div>
							</li>
							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">4</span>
									<div class="up-and-down-wrap">
										<span class="up">1</span>
									</div>
								</div>	

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55x55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>플레이어언노운스 배틀그라운드</h3>
									<span class="genre">서바이벌 슈팅</span>
								</div>
							</li>
							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">5</span>
									<div class="up-and-down-wrap">
										<span class="up">1</span>
									</div>
								</div>	

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55x55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>던전앤파이터</h3>
									<span class="genre">벨트 스크롤 액션RPG</span>
								</div>
							</li>
						</ol>

						<p class="time">2021.08.09 업데이트</p>
					</div>
				</div>

				<div id="popular-section-2" class="right-section rank-section">
					
					<div class="title-wrap game-flex-between">
						<h2>급상승 게임 라운지 TOP5</h2>
						<a href="#">더보기</a>
					</div>

					<div class="right-section-body">
						<ol>
							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">1</span>
								</div>	

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55x55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>슈퍼피플</h3>
									<span class="genre">배틀로얄</span>
								</div>
							</li>
							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">2</span>
								</div>	

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55x55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>오딘: 발할라 라이징</h3>
									<span class="genre">MMORPG</span>
								</div>
							</li>
							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">3</span>
								</div>	

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55x55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>천하제일상거상</h3>
									<span class="genre">MMORPG</span>
								</div>
							</li>
							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">4</span>
								</div>	

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55x55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>파이널 판타지 14</h3>
									<span class="genre">MMORPG</span>
								</div>
							</li>
							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">5</span>
								</div>	

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55x55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>바람의나라: 연</h3>
									<span class="genre">롤플레잉</span>
								</div>
							</li>
						</ol>

						<p class="time">2021.08.09 18:00 업데이트</p>
					</div>
				</div>

				<div id="news-section" class="right-section">
					<div class="title-wrap game-flex-between">
						<h2>e스포츠 주요 뉴스</h2>
						<a href="#">더보기</a>
					</div>

					<div class="right-section-body">
						<ul>
							<li><a href="#" class="on">'페이커' 이상혁 "쵸비와 맞대결, 라인전 딜교환이 중요하다"[인터뷰]"</a></li>
							<li><a href="#" class="on">'페이커' 이상혁 "쵸비와 맞대결, 라인전 딜교환이 중요하다"[인터뷰]"</a></li>
							<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>
							<li><a href="#">'페이커' 이상혁 "쵸비와 맞대결, 라인전 딜교환이 중요하다"[인터뷰]"</a></li>
							<li><a href="#">'페이커' 이상혁 "쵸비와 맞대결, 라인전 딜교환이 중요하다"[인터뷰]"</a></li>
							<li><a href="#">'페이커' 이상혁 "쵸비와 맞대결, 라인전 딜교환이 중요하다"[인터뷰]"</a></li>
						</ul>
					</div>
				</div>

				<div id="week-section" class="right-section">

					<div class="title-wrap game-flex-between">
						<h2>이번 주 신생 라운지</h2>
					</div>

					<div class="right-section-body">
						<ul>
							<li>
								<a href="#" class="game-flex-start">
									<img src="https://via.placeholder.com/128x72">
									<div class="txt-wrap">
										<h3>크레이지 카쿰</h3>
										<span>전략, 모바일</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#" class="game-flex-start">
									<img src="https://via.placeholder.com/128x72">
									<div class="txt-wrap">
										<h3>배틀 엘라</h3>
										<span>카드 전략, 모바일</span>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>

				<div id="game-right-banner">
					<a href="#">
						<img src="https://via.placeholder.com/357x200">
					</a>
				</div>

				<div id="game-footer-section">
					<a href="#">네이버 이용약관</a>
					<a href="#">네이버 게임 운영정책</a>
					<a href="#">개인정보처리 방침</a>
					<a href="#">네이버 게임 고객센터</a>
					<a href="#">서비스 소개 및 제휴 안내</a>
					<a href="#" class="on">ⓒ NAVER Corp.</a>
				</div>
			</div>
		</div>	
	</main>
    
</body>

</html>

CSS

.right_section {
	background-color: #ffffff;
	box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.06);
	border-radius: 12px;	

	padding: 30px;
	margin-bottom: 24px;
}

.right_section .title_wrap h2 {
	font-size: 17px;
	font-weight: 900;
}

.right_section .title_wrap a {
	font-size: 13px;
	font-weight: 400;
	color: #444;
}

.right_section .right_section_body {
	margin-top: 20px;
}

#visitor_section .right_section_body .txt_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#visitor_section .right_section_body .txt_wrap p {
	font-size: 13px;
	color: #9da5b6;

	text-align: center;

	margin-top: 20px;
}

#visitor_section .right_section_body .txt_wrap .input_wrap {
	position: relative;
	overflow: hidden;

	width: 250px;
	height: 44px;
	background-color: #f5f6fa;
	border-radius: 12px;

	margin-top: 18px;
}

#visitor_section .right_section_body .txt_wrap .input_wrap input {
	position: absolute;

	width: calc(100% - 44px);
	height: 100%;
	background-color: transparent;
	border: none;

	padding: 10px 16px;
}

#visitor_section .right_section_body .txt_wrap .input_wrap input:focus {
	outline: none;
}

#visitor_section .right_section_body .txt_wrap .input_wrap input::placeholder {
	font-size: 15px;
	color: grey;
}

#visitor_section .right_section_body .txt_wrap .input_wrap .btn_search {
	position: absolute;

	width: 44px;
	height: 100%;
	background-color: grey;

	right: 0;
}

.rank_section .right_section_body ol li {
	margin-bottom: 16px;
}

.rank_section .right_section_body ol li:last-child {
	margin-bottom: 0;
}

.rank_section .right_section_body ol li a {
	width: 100%;
}

.rank_section .right_section_body ol li a:after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	background-color: lightgrey;
}

.rank_section .right_section_body .count_wrap {
	position: relative;

	width: 25px;
}

.rank_section .right_section_body .count_wrap .count {
	font-size: 17px;
	font-weight: 700;
	font-style: italic;	
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap {
	position: absolute;

	top: 11px;
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap .equal {
	display: inline-block; 

	width: 5px;
	height: 2px;
	background-color: lightgrey;

	margin-left: 3px;
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap .up {
	font-size: 10px;
	color: red;
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap .up:before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 2px;
	background-color: red;

	margin: 0 1px 2px 0;
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap .down {
	font-size: 10px;
	color: blue;
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap .down:before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 2px;
	background-color: blue;

	margin: 0 1px 2px 0;
}

.rank_section .right_section_body .image_wrap {
	position: relative;

	width: 55px;
	height: 55px;
}

.rank_section .right_section_body .image_wrap img {
	position: absolute;

	width: 100%;
	height: 100%;
	border-radius: 12px;
}

.rank_section .right_section_body .image_wrap .chk {
	position: absolute;

	width: 21px;
	height: 21px;
	background-color: #4e41db;
	border-radius: 50%;

	top: -2px;
	right: -2px;
}

.rank_section .right_section_body .txt_wrap {
	margin: 0 50px 0 14px;
}

.rank_section .right_section_body .txt_wrap h3 {
	width: 135px;

	font-size: 15px;
	line-height: 19px;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rank_section .right_section_body .txt_wrap .genre {
	font-size: 13px;
	line-height: 15px;
	color: #999;
}

.rank_section .right_section_body .time {
	margin-top: 13px;

	font-size: 13px;
	color: #999;
}

#game_news_section ul li {
	margin-bottom: 5px;
}

#game_news_section ul li:last-child {
	margin-bottom: 0;
}

#game_news_section ul li a {
	display: block;
	width: 100%;

	font-size: 16px;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	padding-right: 10px;
}

#game_news_section ul li a:before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	background-color: grey;

	vertical-align: top;
	margin: 10px 5px 0 0;
}

#game_week_section li:first-child {
	margin-bottom: 16px;
}

#game_week_section img {
	width: 128px;
	height: 72px;
	border-radius: 8px;

	margin-right: 16px;
}

#game_week_section .txt_wrap h3 {
	font-size: 15px;
}

#game_week_section .txt_wrap .genre {
	font-size: 13px;
	color: #999;
}

#game_footer_section {
	margin-left: 10px;
}

#game_footer_section a {
	display: inline-block;

	font-size: 12px;
	color: #666;
}

#game_footer_section a:after {
	content: "";
	display: inline-block;

	width: 1px;
	height: 11px;
	background-color: #ddd;

	margin: 1px 8px 0;
	vertical-align: top;
}

#game_footer_section p {
	font-size: 12px;
	font-weight: 700;
	color: #666;

	margin-top: 4px;
}

어려운점

  • 각 태그별 상세사항과 적용할 때 개념이 여전히 혼동

  • 그냥 카피캣을 따라가는데 잘 모르겠음

해결방법

  • 따로 찾아보며 복습

  • 카피캣이라도 따라가면서 코드라도 눈에 익힘

학습소감

  • 이렇게 카피캣을 따라만 가는게 맞는건지 모르겠음, 각 태그나 적용에 대해 물어보면 대답을 잘 할 수 없을 것 같아서 불안함. 복습과 더불어 다른 방법이 필요하다고 생각함.
profile
이채환
Please be wonderful but don't be so serious, enjoy this journey with the good people!
이전 포스트

[dg_ai_school] 웹프로그래밍 31

다음 포스트

[dg_ai_school] 웹프로그래밍 33

0개의 댓글

관련 채용 정보