8월 9일 Velog

학습한 내용

네이버 게임 실습 #3

https://game.naver.com/

3. Main Left

구조

[html]

			<div class="game_main_left">
				
				<div class="banner_left game_shadow"></div>
				<div id="game_section_1" class="game_section"></div>
                                <div id="game_section_2" class="game_section"></div>
                                <div id="game_section_3" class="game_section"></div>
                                <div id="game_section_4" class="game_section"></div>
                                <div id="game_section_5" class="game_section"></div>
                                <div id="game_section_6" class="game_section"></div>

			</div>

[css]

#game_main .game_main_left {
	width: 900px;

	padding-bottom: 200px;
}

game section css 기본값

.game_section {
	position: relative;

	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 30px 0 rgba(0 0 0 / 6%);

	padding: 27px 30px 40px;
	margin-bottom: 40px;
}



.game_section .game_title_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.game_section .game_title_wrap h2 {
	font-size: 19px;
	font-weight: 900;
}



.game_section .game_middle_nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;

	border-bottom: solid 1px rgba(0, 0, 0, 0.07);
}

.game_section .game_middle_nav ul li a {
	display: block;

	border-bottom: solid 3px transparent;

	font-size: 15px;
	color: #777;
	margin: 14px 28px 0 0;
	padding-bottom: 12px;
}
.game_section .game_middle_nav ul li.active a {
	border-bottom: solid 3px #000000;

	font-weight: 700;
	color: #000000;
}



.game_section .btn_circle {
	position: absolute;

	width: 55px;
	height: 55px;
	background-color: #ffffff;
	border-radius: 50%;
	box-shadow: 0 2px 30px 0 rgba(0 0 0 / 6%);

	bottom: -27.5px;

	/*x축 중앙정렬 공식*/
	left: 50%;
	transform: translateX(-50%);
}

.game_section .btn_circle.icon_arrow {
	background-color: grey;
}

.game_section .btn_circle.icon_plus {
	background-color: darkblue;
}



.game_section .section_body_wrap {
	margin-top: 18px;
}

.game_section .section_body_wrap .image_txt {
	width: 407.5px;
}

.game_section .section_body_wrap .image_txt a {
	width: 100%;
}

.game_section .section_body_wrap .image_txt img {
	width: 180px;
	height: 100px;
	border: solid 1px rgba(0, 0, 0, 0.06);
	border-radius: 8px;

	margin-right: 15px;
}

.game_section .section_body_wrap .image_txt .txt {
	width: 212px;
}

.game_section .title {
	max-height: 40px;

	font-size: 15px;
	font-weight: 600;

	line-height: 20px;
	overflow: hidden;
	text-overflow: ellipsis;

	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

	margin-bottom: 3px;
}

.game_section .source {
	font-size: 13px;
	color: #999;
}

game section 2

[html]

				<div id="game_section_2" class="game_section">
					<div class="game_title_wrap">
						<h2>생생 주요 게임 뉴스</h2>

						<a href="#" class="more">더보기</a>
					</div>


					<div class="section_body_wrap game_flex_between">
						<div class="image_txt">
							<a href="#" class="game_flex_start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<h3 class="title">네오위즈, '블레스 언리쉬드 PC' 출시 첫주말 스팀 동접 7만명 돌파
									</h3>
									<span class="source">스포츠경향</span>
								</div>
							</a>
						</div>

						<div class="image_txt">
							<a href="#" class="game_flex_start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<h3 class="title">뜨거운 감자 '블리자드', "디아블로 2: 레저렉션 연기 없다"
									</h3>
									<span class="source">디스이즈게임</span>
								</div>
							</a>
						</div>						
					</div>


					<ul>
						<li>
							<a href="#" class="game_flex_between">
								<h3 class="title">[차트-온라인]'롤' 3년 이상 1위 지켜...PC방 점유율 44%대 기록</h3>
								<span class="source">포모스</span>
							</a>
						</li>
						<li>
							<a href="#" class="game_flex_between">
								<h3 class="title">크래프톤, '배틀그라운드: 뉴 스테이트' 2차 알파테스트 참가자 모집</h3>
								<span class="source">포모스</span>
							</a>
						</li>
						<li>
							<a href="#" class="game_flex_between">
								<h3 class="title">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</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>

[css]

#game_section_2 {
	padding-bottom: 30px;
}

#game_section_2 .game_title_wrap .more {
	font-size: 13px;
	font-weight: 400;
}



#game_section_2 ul {
	margin-top: 25px;
}

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

#game_section_2 ul li:last-child {
	margin-bottom: none;
}

#game_section_2 ul li a .title:before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	background-color: #9da5b6;
	border-radius: 50%;

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

#game_section_2 ul li a .title {
	max-width: 776px;

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

game section 3

[html]

				<div id="game_section_3" class="game_section">
					<div class="game_title_wrap">
						<h2>오리지널 시리즈</h2>
					</div>


					<div class="section_body_wrap game_flex_between">
						<div class="image_txt">
							<a href="#" class="game_flex_start">								
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">[겜덕돈미니] 겜덕툰</span>
									<h3 class="title">[겜덕툰]141화-캐릭터 육성할 때 생기는 딜레마들!
									</h3>
									<span class="source">돈미니</span>
								</div>
							</a>
						</div>
						<div class="image_txt">
							<a href="#" class="game_flex_start">								
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">[TIG 퍼스트룩] 게임을 대신 찍먹해보고 소개하는 코너</span>
									<h3 class="title">직구 하나만큼은 괜찮았다, '잿빛 숲'
									</h3>
									<span class="source">디스이즈게임</span>
								</div>
							</a>
						</div>
						<div class="image_txt">
							<a href="#" class="game_flex_start">								
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">글로벌 e게임</span>
									<h3 class="title">[글로벌 e게임]'이스6 온라인', 35년을 이어온 정체성은 어디로
									</h3>
									<span class="source">GAMEVU</span>
								</div>
							</a>
						</div>
						<div class="image_txt">
							<a href="#" class="game_flex_start">								
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">하얀쥐 게임만화</span>
									<h3 class="title">새 몬헌의 가능성을 보다
									</h3>
									<span class="source">하얀쥐</span>
								</div>
							</a>
						</div>
						<div class="image_txt">
							<a href="#" class="game_flex_start">								
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">오야의 모바일 배틀그라운드 만화</span>
									<h3 class="title">모배툰45화 - 귀찮음러가 이벤트를 참여하는 방법 | 배틀그라운 모바일 웹툰
									</h3>
									<span class="source">오야 OYA</span>
								</div>
							</a>
						</div>
						<div class="image_txt">
							<a href="#" class="game_flex_start">								
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">조선통신사</span>
									<h3 class="title">이것이 악역의 품격 최종 보스의 명대사
									</h3>
									<span class="source">게임조선</span>
								</div>
							</a>
						</div>
						<div class="image_txt game_m_0">
							<a href="#" class="game_flex_start">								
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">쇼미더게임</span>
									<h3 class="title">거리두기 4단계, 지금 PC방에 손님이 오긴 할까?
									</h3>
									<span class="source">PNN</span>
								</div>
							</a>
						</div>
						<div class="image_txt game_m_0">
							<a href="#" class="game_flex_start">								
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">기린왕의 게임톡톡</span>
									<h3 class="title">닌텐도의 뒤통수가 만들어 낸 괴물, 소니 플레이스테이션.
									</h3>
									<span class="source">기린왕</span>
								</div>
							</a>
						</div>		
					</div>


					<a href="#" class="btn_circle icon_plus"></a>
				</div>

[css]

#game_section_3 .section_body_wrap .image_txt {
	margin-bottom: 20px;
}

#game_section_3 .section_body_wrap .image_txt.game_m_0 {
	margin-bottom: 0;
}

#game_section_3 .section_body_wrap .image_txt .txt .category {
	display: block;

	max-width: 212px;

	font-size: 13px;
	color: #7776ff;

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

	margin-bottom: 3px;
}

game section 4

[html]

				<div id="game_section_4" class="game_section">
					<div class="game_title_wrap">
						<h2>인기게임 영상</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">57:59</span>
									</div>
									<h3 class="title">T1-GEN 3세트</h3>
									<div class="game_flex_between">
										<span class="source">리그 오브 레전드 네이버 e스포츠</span>
										<span class="count">57,472</span>
									</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:20:05</span>
									</div>
									<h3 class="title">T1-DRX 1세트</h3>
									<div class="game_flex_between">
										<span class="source">리그 오브 레전드 네이버 e스포츠</span>
										<span class="count">27,061</span>
									</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:08:19</span>
									</div>
									<h3 class="title">T1-GEN 1세트</h3>
									<div class="game_flex_between">
										<span class="source">리그 오브 레전드 네이버 e스포츠</span>
										<span class="count">55,381</span>
									</div>
								</a>
							</li>
							<li class="game_m_0">
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/263x148">
										<i class="icon_play"></i>
										<span class="time">58:46</span>
									</div>
									<h3 class="title">GEN-DK 1세트</h3>
									<div class="game_flex_between">
										<span class="source">리그 오브 레전드 네이버 e스포츠</span>
										<span class="count">13,496</span>
									</div>
								</a>
							</li>
							<li class="game_m_0">
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/263x148">
										<i class="icon_play"></i>
										<span class="time">01:08:09</span>
									</div>
									<h3 class="title">T2-DRX 2세트</h3>
									<div class="game_flex_between">
										<span class="source">리그 오브 레전드 네이버 e스포츠</span>
										<span class="count">24,479</span>
									</div>
								</a>
							</li>
							<li class="game_m_0">
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/263x148">
										<i class="icon_play"></i>
										<span class="time">01:07:40</span>
									</div>
									<h3 class="title">NS-AF 1세트</h3>
									<div class="game_flex_between">
										<span class="source">리그 오브 레전드 네이버 e스포츠</span>
										<span class="count">11,877</span>
									</div>
								</a>
							</li>
						</ol>
					</div>
				</div>

[css]

#game_section_4 .section_body_wrap ol {
	align-items: flex-start;
	/*center에서 변경*/
}

#game_section_4 .section_body_wrap ol li {
	margin-bottom: 20px;
}

#game_section_4 .section_body_wrap ol li a {
	display: block;
}

#game_section_4 .section_body_wrap ol li a .image_wrap {
	position: relative;
	overflow: hidden;

	width: 263px;
	height: 148px;
	border-radius: 8px;

	margin-bottom: 12px;
}

#game_section_4 .section_body_wrap .image_wrap img {
	position: absolute;

	width: 100%;
	height: 100%;
}

#game_section_4 .section_body_wrap .image_wrap .icon_play {
	position: absolute;

	width: 25px;
	height: 25px;
	background-color: grey;
	border-radius: 50%;

	left: 10px;
	bottom: 12px;
}

#game_section_4 .section_body_wrap .image_wrap .time {
	position: absolute;

	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 6px;

	font-size: 14px;
	color: #ffffff;
	padding: 2px 6px;

	right: 10px;
	bottom: 10px;
}

#game_section_4 .section_body_wrap ol li a .title {
	margin-bottom: 0;
}

#game_section_4 .section_body_wrap ol li a .source,
#game_section_4 .section_body_wrap ol li a .count {
	font-size: 13px;
	color: #999;
}

#game_section_4 .section_body_wrap li.game_m_0 {
	margin-bottom: 0;
}

game section 5

[html]

				<div id="game_section_5" class="game_section">
					<div class="game_title_wrap">
						<h2>이번 달 출시 게임</h2>

						<span class="info">일정은 게임사 사정으로 변경될 수 있습니다.</span>
					</div>

					<nav class="game_middle_nav">
						<ul>
							<li class="active"><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>
							<li><a href="#">금 08.13</a></li>
							<li><a href="#">토 08.14</a></li>
							<li><a href="#">일 08.15</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/192x120">
										<span class="badge open">오픈</span>
									</div>
									<h3 class="title">인피니트 라그랑주</h3>
									<p class="date">2021.06.13 ~ 2021.08.17</p>
									<span class="device">Android,iOS,PC</span>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/192x120">
										<span class="badge pre">사전예약</span>
									</div>
									<h3 class="title">나의 히어로 아카데미아: 최강 히어로</h3>
									<p class="date">2021.07.07 ~ 2021.09.01</p>
									<span class="device">Android,iOS</span>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/192x120">
										<span class="badge pre">사전예약</span>
									</div>
									<h3 class="title">미니어스:작지만 놀라운 모험</h3>
									<p class="date">2021.07.14 ~ 2021.09.13</p>
									<span class="device">Android,iOS</span>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/192x120">
										<span class="badge pre">사전예약</span>
									</div>
									<h3 class="title">산나비</h3>
									<p class="date">2021.07.30 ~ 2021.08.12</p>
									<span class="device">PC</span>
								</a>
							</li>
						</ol>
					</div>					
				</div>

[css]

#game_section_5 .game_title_wrap .info {
	font-size: 13px;
	font-weight: 400;
	color: #999;
}

#game_section_5 .section_body_wrap ol li {
	width: 195px;
}

#game_section_5 .section_body_wrap .image_wrap {
	position: relative;
	width: 190px;
	height: 120px;

	margin-bottom: 12px;
}

#game_section_5 .section_body_wrap .image_wrap img {
	position: absolute;

	width: 100%;
	height: 100%;
	border: 1px solid rgba(0,0,0,.06);
	border-radius: 8px;
}

#game_section_5 .section_body_wrap .image_wrap .badge {
	position: absolute;

	border-radius: 8px;

	font-size: 15px;
	font-weight: 700;
	color: #ffffff;

	padding: 4px 8px;

	top: -5px;
	left: -5px;
}

#game_section_5 .section_body_wrap .image_wrap .badge.open {
	background-color: red;
}

#game_section_5 .section_body_wrap .image_wrap .badge.pre {
	background-color: #4e41db;
}


#game_section_5 .section_body_wrap ol li a .title {
	line-height: 21px;
    max-height: 21px;

	-webkit-line-clamp: 1;

	margin-bottom: 2px;
}

#game_section_5 .section_body_wrap ol li a .date {
	font-size: 13px;
    font-weight: 500;
    color: #222;
}

#game_section_5 .section_body_wrap ol li a .device {
	font-size: 13px;
	color: #999;
}

game section 6

[html]

				<div id="game_section_6" class="game_section">
					<div class="game_title_wrap">
						<h2>급상승 공식 게임 카페</h2>
					</div>

					<div class="section_body_wrap game_flex_between">
						<div class="image_txt">
							<a href="#" class="game_flex_start">								
								<img src="https://via.placeholder.com/80">
								<div class="txt">									
									<h3 class="title">좀비 고등학교 모바일
									</h3>
									<p class="info">안녕하세요! 모바일 게임 '좀비 고등학교'의 공식 카페입니다.</p>
									<span class="source">멤버 412,800명</span>
								</div>
							</a>
						</div>
						<div class="image_txt">
							<a href="#" class="game_flex_start">								
								<img src="https://via.placeholder.com/80">
								<div class="txt">									
									<h3 class="title">좀비 고등학교 모바일
									</h3>
									<p class="info">안녕하세요! 모바일 게임 '좀비 고등학교'의 공식 카페입니다.</p>
									<span class="source">멤버 412,800명</span>
								</div>
							</a>
						</div>
						<div class="image_txt">
							<a href="#" class="game_flex_start">								
								<img src="https://via.placeholder.com/80">
								<div class="txt">									
									<h3 class="title">좀비 고등학교 모바일
									</h3>
									<p class="info">안녕하세요! 모바일 게임 '좀비 고등학교'의 공식 카페입니다.</p>
									<span class="source">멤버 412,800명</span>
								</div>
							</a>
						</div>
						<div class="image_txt">
							<a href="#" class="game_flex_start">								
								<img src="https://via.placeholder.com/80">
								<div class="txt">									
									<h3 class="title">좀비 고등학교 모바일
									</h3>
									<p class="info">안녕하세요! 모바일 게임 '좀비 고등학교'의 공식 카페입니다.</p>
									<span class="source">멤버 412,800명</span>
								</div>
							</a>
						</div>
						<div class="image_txt game_m_0">
							<a href="#" class="game_flex_start">								
								<img src="https://via.placeholder.com/80">
								<div class="txt">									
									<h3 class="title">좀비 고등학교 모바일
									</h3>
									<p class="info">안녕하세요! 모바일 게임 '좀비 고등학교'의 공식 카페입니다.</p>
									<span class="source">멤버 412,800명</span>
								</div>
							</a>
						</div>
						<div class="image_txt game_m_0">
							<a href="#" class="game_flex_start">								
								<img src="https://via.placeholder.com/80">
								<div class="txt">									
									<h3 class="title">좀비 고등학교 모바일
									</h3>
									<p class="info">안녕하세요! 모바일 게임 '좀비 고등학교'의 공식 카페입니다.</p>
									<span class="source">멤버 412,800명</span>
								</div>
							</a>
						</div>
					</div>
				</div>

[css]

#game_section_6 .section_body_wrap .image_txt {
	margin-bottom: 20px;
} 

#game_section_6 .section_body_wrap .image_txt.game_m_0 {
	margin-bottom: 0px;
}

#game_section_6 .section_body_wrap .image_txt img {
	width: 80px;
	height: 80px;
	border-radius: 20px;

	margin-right: 13px;
}

#game_section_6 .section_body_wrap .image_txt .txt {
	width: 300px;
}

#game_section_6 .section_body_wrap .image_txt .txt .info {
	width: 100%;

	font-size: 13px;
	color: #666;

	line-height: 16px;

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

추가 학습 1 : nxm으로 나열된 태그에 margin 부여하는 방법

강의 내용에서는 class로 지정한 기본값( margin-top:20px; )을 사용하여 가장 위쪽 행의 태그를 제외한 모든 태그에 class를 부여하는 방법을 사용하였다.

내가 사용한 방법은 기본값 class를 부여하지 않고 규칙적인 class를 하나 선택하여 일단 모든 태그에 margin-bottom을 적용하고 가장 아래 행의 태그에 내가 선택한 class를 추가로 부여하여 #game_section_6 .section_body_wrap .image_txt.game_m_0 과 같이 선택자를 지정한 css 코드를 이용하여 margin-bottom 값을 제거해주었다.

추가 학습 2 : 여러 줄로 표시되는 말줄임표

• 여러 줄을 표시하고 마지막에 말 줄임을 표현하는 방법은 여러가지가 있고,
  그중 한가지는 webkit을 통해서 구현하는 것이다.

• -webkit-line-clamp 속성을 이용하면 가능한데, 보여줘야 하는 줄 수를 숫자로 적어 주면 된다.
  예를 들어, 3줄을 보여주고 나머지 내용에 대해서 말줄임을 표시 -> -webkit-line-clamp: 3;

• -webkit-line-clamp 속성이 실행되는 조건
  : display: -webkit-box, -webkit-box-orient: vertical 로 설정되어 있어야 한다.

.game_section .title {
	width:212px
    
	max-height: 40px;
	line-height: 20px;
	
	overflow: hidden;
	text-overflow: ellipsis;

	display: -webkit-box;
    	-webkit-line-clamp: 2;
    	-webkit-box-orient: vertical;
}

-> 위 코드에서 -webkit-line-clamp 속성이 2로 설정되어 있으므로 2번째 줄 마지막에 말줄임 표시를 한다. 하지만, 내용이 다음 줄로 넘어가도 내용이 잘리지는 않기 때문에 높이( ex: height: 30px )와 overflow: hidden 속성을 설정하여 넘어가는 내용을 보이지 않게 해주어야 한다.

출처 : https://medium.com/nonamedeveloper/web-%EB%A7%90%EC%A4%84%EC%9E%84-%ED%91%9C%EC%8B%9C%ED%95%98%EA%B8%B0-text-overflow-ellipsis-4a8466b723a1