Dev log - 33, 네이버 이스포츠 카피캣 실습 #1

박강산·2021년 8월 11일
0

대구AI스쿨 - 개발일지

목록 보기
33/44

학습한 내용

네이버 e스포츠 실습 - 기본 세팅

HTML 문서

<!DOCTYPE html>
<html>
<head>                 
	<meta charset="utf-8">
	<title>네이버</title>

	<link rel="stylesheet" type="text/css" href="css/style1.css">
</head>

CSS 문서

/* Default CSS */
* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

ol, ul {
	list-style: none;
}

a {
	text-decoration: none;
	color: #000000;
}

img {
	vertical-align: middle;
}

button {
	border: none;
}

input, textarea {
	outline: none;
}

.clearfix {
	clear: both;
}

.container {
	width: 1130px;
	margin: 0 auto;
}

.esport-flex-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;    
}

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

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

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

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

네이버 e스포츠 실습 - 네이버 e스포츠 상단 영역

  • 실습 과정에서는 esport-nav 영역의 .center li a 영역에 width 값을 설정하였는데, 설정 시 너비가 좁아서 두 줄로 바뀌는 현상이 일어나, width 값을 삭제함

  • 스크롤을 내려도 상단바가 고정되게 설정할 때는, position: fixed 속성 설정

HTML 문서

<body>
    <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</a></li>
                            <li><a href="#">PC게임</a></li>
                        </ul>
                    </div>

                    <div class="center">
                        <ul class="esport-flex-center">
                            <li><a href="#" 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="#">로그인</a>
                        <a href="#">메뉴</a>
                    </div>
                </div>
            </div>
        </nav>
    </header>
</body>

CSS 문서 1 - style.css

#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 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: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: 17px;
	/*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;
}

네이버 e스포츠 실습 - 네이버 e스포츠 메인 상단 영역

  • 상단바에 position: fixed 속성이 설정되어 있는데, 3차원이기 때문에 레이아웃 겹침 현상이 발생함, 메인 영역에 margin-top 속성 (상단바의 height 값만큼)을 설정

HTML 문서

<body>
	<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">오늘 (08.11)</span>
								<h2>2021 와일드 리프트 라이벌즈 DAY 1</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">오늘 (08.11)</span>
								<h2>2021 와일드 리프트 라이벌즈 DAY 1</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">오늘 (08.11)</span>
								<h2>2021 와일드 리프트 라이벌즈 DAY 1</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">오늘 (08.11)</span>
								<h2>2021 와일드 리프트 라이벌즈 DAY 1</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">오늘 (08.11)</span>
								<h2>2021 와일드 리프트 라이벌즈 DAY 1</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">오늘 (08.11)</span>
								<h2>2021 와일드 리프트 라이벌즈 DAY 1</h2>

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

				<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 와일드 리프트 라이벌즈 DAY 1</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 와일드 리프트 라이벌즈 DAY 1</h3>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>			
		</div>
	</main>	
</body>

CSS 문서 1 - style.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: 500;
	color: red;
}

#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 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 {
    border-radius: 3px;

    padding: 3px 7px;

    color: red;
    background-color: rgba(255, 0, 0, 0.2);    
}

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

#esport-main .content-wrap {
	overflow: hidden;
	padding-top: 30px;
}

학습한 내용 중 어려웠던 점 또는 해결못한 것들

  • align-items: flex-start 속성

해결방법

  • 개발 일지 복습을 통해, align-items: flex-start 속성은 기본값으로 위쪽 y축 정렬을 의미함을 다시 한번 복습하였음.

학습 소감

  • 오늘은 네이버 e스포츠 사이트 카피캣 실습을 진행하였음, 오늘은 크게 어려운 부분이 없어서 수월하게 진행되었음. 다만, live-wrap 영역의 a 값을 flex-start 로 설정하여, 원문과 비슷하게 만든 부분이 약간 헷갈렸는데, 전에 작성했던 개발 일지 복습을 통해, 위쪽 y축 정렬과 중간 y축 정렬 설정이었음을 깨닫고 정렬하였음. 아무래도, 만들어주는 사이트에 익숙해지다보니, 각자 어떤 기능을 하는지 헷갈리는것 같았음. 하나하나 다시 의미를 알아야할 필요성을 느낌.
profile
박강산
안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.
이전 포스트

Dev log - 32, 네이버 게임 카피캣 실습 #4

다음 포스트

Dev log - 34, 네이버 이스포츠 카피캣 실습 #2

0개의 댓글