2021_08_11 개발일지

Yeo Eunhye·2021년 8월 11일
개발일지
0

1) 학습한 내용

오늘은 게임에 e-sport 페이지를 레이아웃해보았다.

1. esport-header

- html

<header id="esport-header">

		<nav id="esport-nav">
			<div class="esport-container">
				
				<div class="nav-wrap esport-flex-between">
					<div class="left esport-flex-start">
						<h1><a href="#">e스포츠</a></h1>
						<ul class="esport-flex-start">
							<li><a href="game.html">GAME</a></li>
							<li><a href="#">PC게임</a></li>
						</ul>
					</div>

					<div class="center">
						<ul class="esport-flex-center">
							<li><a href="index.html" class="active">홈</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 class="right esport-flex-end">
						<a href="index.html">로그인</a>
						<a href="#">메뉴</a>
					</div>
				</div>

			</div>
		</nav>
		
	</header>

- css

.esport-flex-between {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
}

.esport-flex-start {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: stretch;
}

.esport-flex-center {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
}

.esport-flex-end {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	align-content: stretch;
}

.esport-container {
	width: 1280px;
	margin: 0 auto;
}

#esport-header {
	position: fixed;
	width: 100%;
	background-color: #151618;
	border-bottom: solid 1px grey;

	left: 0;
	top: 0;

	z-index: 99999;
}

#esport-header #esport-nav {
	/*height: 60px;*/
}

#esport-header #esport-nav a {
	color: #ffffff;
}
#esport-header #esport-nav .nav-wrap {
	height: 60px;
}

#esport-header #esport-nav .left h1 {
	font-size: 20px;
}

#esport-header #esport-nav .left li {

}

#esport-header #esport-nav .left li:before {
	display: inline-block;
	content: '';
	width: 1px;
	height: 14px;
	background-color: rgba(160, 165, 182, .3);
	margin: 0 12px;
}

#esport-header #esport-nav .left li a {
	color: grey;
}


#esport-header #esport-nav .center li {
	margin-right: 24px;
}

#esport-header #esport-nav .center li:last-child {
	margin-right: 0;
}

#esport-header #esport-nav .center li a {
	display: inline-block;
	width: 30px;
	height: 60px;

	line-height: 60px;
	border-bottom: solid 5px transparent;

	color: grey;
	font-size: 15px;
	text-align: center;
}

#esport-header #esport-nav .center li a:hover {
	color: darkgrey;
}

#esport-header #esport-nav .center li a.active {
	color: #ffffff;
	border-bottom: solid 5px #ffffff;
}
#esport-header #esport-nav .right a {
	border:  solid 1px hsla(0, 0%, 80%, .3);
	border-radius: 8px;

	padding: 4px 8px;

	font-size: 12px;
}

#esport-header #esport-nav .right a:last-child {
	margin-left: 10px;
}

2. esport-main-container timeline-wrap

- html

<main id="esport-main" role="main">
		
		<div id="esport-main-top">

			<div class="esport-container">
				
				<div class="timeline-wrap">

					<ul class="esport-flex-start">
						<li>
							<a href="#">
								<span class="date">오늘 (06.05)</span>
								<h2>2021 LCK AS 챔피언십 풀리그 3일차</h2>

								<div class="status-wrap esport-flex-between">
									<span class="live">LIVE</span>
									<span class="status">진행중</span>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="date">오늘 (06.05)</span>
								<h2>2021 LCK AS 챔피언십 풀리그 3일차</h2>

								<div class="status-wrap esport-flex-between">
									<span class="live">LIVE</span>
									<span class="status">진행중</span>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="date">오늘 (06.05)</span>
								<h2>2021 LCK AS 챔피언십 풀리그 3일차</h2>

								<div class="status-wrap esport-flex-between">
									<span class="live">LIVE</span>
									<span class="status">진행중</span>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="date">오늘 (06.05)</span>
								<h2>2021 LCK AS 챔피언십 풀리그 3일차</h2>

								<div class="status-wrap esport-flex-between">
									<span class="live">LIVE</span>
									<span class="status">진행중</span>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="date">오늘 (06.05)</span>
								<h2>2021 LCK AS 챔피언십 풀리그 3일차</h2>

								<div class="status-wrap esport-flex-between">
									<span class="live">LIVE</span>
									<span class="status">진행중</span>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="date">오늘 (06.05)</span>
								<h2>2021 LCK AS 챔피언십 풀리그 3일차</h2>

								<div class="status-wrap esport-flex-between">
									<span class="live">LIVE</span>
									<span class="status">진행중</span>
								</div>
							</a>
						</li>

					</ul>
					
				</div>

- css

#esport-main {
	padding-top: 61px;
	/*상단의 메뉴뒤로 들어간 글씨를 끌어내리기위해*/
}


#esport-main-top {
	background-color: #151618;
}

#esport-main-top .timeline-wrap {
	padding: 20px 0;
}

#esport-main-top .timeline-wrap ul {
	width: 100%;
}

#esport-main-top .timeline-wrap li {
	width: 16.6%;
	background-color: #272b31;
	border-radius: 10px;
	margin-right: 1px;
}

#esport-main-top .timeline-wrap li:last-child {
	margin-right: 0;
}

#esport-main-top .timeline-wrap li a {
	display: block;
	width: 100%;
	padding: 14px 18px;


	color: #ffffff;
}
#esport-main-top .timeline-wrap li a .date {
	font-size: 12px;
	font-weight: 500;
}

#esport-main-top .timeline-wrap li a h2 {
	font-size: 13px;
	margin-top: 6px;
	color: #a0a5b6;
}

#esport-main-top .timeline-wrap li a .status-wrap {
	margin-top: 35px;
}

#esport-main-top .timeline-wrap li a .status-wrap .live {
	font-size: 12px;
	font-weight: 700;
}

#esport-main-top .timeline-wrap li a .status-wrap .status {
	font-size: 12px;
	font-weight: 500x;
	color: red;
}

3. esport-main-container live-wrap

- html

<div class="live-wrap">
					<h2>라이브중인 경기 <span class="count">2</span></h2>
					<ul class="esport-flex-between">
						<li>
							<a href="#" class="esport-flex-between">
								<img src="https://via.placeholder.com/442x250">
								<div class="txt-wrap">
									<span>진행중</span>
									<h3>2021 PMPS S1 WEEKLY FINAL DAY 3</h3>
								</div>
							</a>
						</li>

						<li>
							<a href="#" class="esport-flex-between">
								<img src="https://via.placeholder.com/442x250">
								<div class="txt-wrap">
									<span>진행중</span>
									<h3>2021 PMPS S1 WEEKLY FINAL DAY 3</h3>
								</div>
							</a>
						</li>
					</ul>
				</div>

- css

#esport-main-top .live-wrap {
	padding-bottom: 60px;
}

#esport-main-top .live-wrap h2 {
	font-size: 18px;
	color: #ffffff;
	margin-bottom: 20px;
}

#esport-main-top .live-wrap h2 .count {
	color: #8a7cff;
}

#esport-main-top .live-wrap ul {
	
}

#esport-main-top .live-wrap li {
	overflow: hidden;
	width: 625px;
	background-color: #1f2227;
	border-radius: 10px;
}

#esport-main-top .live-wrap a {
	/*display: block;*/
	/*width: 100%;*/
	/*height: 100%;*/
	align-items: flex-start;
}

#esport-main-top .live-wrap li img {
	width: 442px;
	height: 250px;
}

#esport-main-top .live-wrap li .txt-wrap{
	width: 183px;
	padding: 17px 20px 22px;
}

#esport-main-top .live-wrap li .txt-wrap span{
	color: red;
	background-color: rgba(255, 0, 0, 0.2);
	border-radius: 3px;
	padding: 3px 7px;
}

#esport-main-top .live-wrap li .txt-wrap h3{
	font-size: 15px;
	color: #ffffff;
	margin-top: 8px;
}

2) 학습내용 중 어려웠던 점 및 해결방법

시작전 e-sport 페이지와 게임페이지를 연결하고 게임페이지에서 e스포츠를 눌러서 들어가는 방법으로 들어가려했는데, 보니 이전에 게임페이지를 작업했을때 그림부분이 너무커 상단의 메뉴를 가리고 있어 클릭이 되어지지 않았다.

그래서 이미지와같이 저렇게 가린부분때문에 게임의 일부분 빼고는 상단의 메뉴들이 제대로 작동할 수 없었다.
그래서 고민한 결과 z-index를 주어 앞으로 끌어 내는 것이었다.
처음에는 메뉴전체를 감싸고 있는 곳에 z-index를 사용했는데 안되어 따로 메뉴의 왼쪽과 오른쪽 부분을 각각 감싸고 있는 곳에 z-index를 같은 10을주어 앞으로 끌어내고
밑의 이미지부분을 1로 주어 뒤로 가게만들었다.
또 여기서 걸린부분이 이미지와 함께 겹쳐있는 글씨영역이었는데, 글씨도 z-index 5를 주어 중간으로 끌어내어 이미지가 맨 마지막으로 들어가되 배경보다는 앞으로 나올수 있도록 할 수 있었다.
이렇게 하자 메뉴들이 각각 모두 정상 작동이 되는 것을 알 수 있었다.

3) 학습소감

페이지를 만들때는 놓치는 부분들이 많은 것 같은데, 다른 작업을 하다가 보면 작은 디테일들을 놓친걸 알 수 있었다.
만약 그부분을 신경쓰지 않고 그냥 넘어갔다면 끝까지 몰랐을텐데,
항상 다 만들고 모두 정상 작동이 되는지 꼭 확인 할 수 있는 습관을 길러야겠다.

profile
Yeo Eunhye
아직 여백이 많은 개린이입니다.
이전 포스트

2021_08_10 JS

다음 포스트

2021_08_12개발일지

0개의 댓글