2021_08_ 개발일지(1)

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

1) 학습한 내용

오늘은 어제에 이어 e-sport부분을 마무리 해보았다.

또 웹 폰트 적용하는 방법에 대해 알아보았다.

1. esport-news-view

- html

<div id="esport-news-view">
						
						<h2>많이 본 뉴스</h2>

						<ol>
							<li>
								<a href="#" class="esport-flex-between">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/84x48">
										<span class="rank">1</span>
									</div>

									<h3>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h3>
								</a>
							</li>
							<li>
								<a href="#" class="esport-flex-between">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/84x48">
										<span class="rank">1</span>
									</div>

									<h3>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h3>
								</a>
							</li>
							<li>
								<a href="#" class="esport-flex-between">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/84x48">
										<span class="rank">1</span>
									</div>

									<h3>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h3>
								</a>
							</li>
							<li>
								<a href="#" class="esport-flex-between">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/84x48">
										<span class="rank">1</span>
									</div>

									<h3>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h3>
								</a>
							</li>
							<li>
								<a href="#" class="esport-flex-between">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/84x48">
										<span class="rank">1</span>
									</div>

									<h3>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h3>
								</a>
							</li>
							<li>
								<a href="#" class="esport-flex-between">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/84x48">
										<span class="rank">1</span>
									</div>

									<h3>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h3>
								</a>
							</li>
							<li>
								<a href="#" class="esport-flex-between">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/84x48">
										<span class="rank">1</span>
									</div>

									<h3>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h3>
								</a>
							</li>
							<li>
								<a href="#" class="esport-flex-between">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/84x48">
										<span class="rank">1</span>
									</div>

									<h3>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h3>
								</a>
							</li>
							<li>
								<a href="#" class="esport-flex-between">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/84x48">
										<span class="rank">1</span>
									</div>

									<h3>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h3>
								</a>
							</li>
							<li>
								<a href="#" class="esport-flex-between">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/84x48">
										<span class="rank">1</span>
									</div>

									<h3>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h3>
								</a>
							</li>
						</ol>

					</div>

- css

#esport-main .right {
	float: right;
	width: 357px;
	height: 2000px;
	/*background-color: grey;*/
}

#esport-news-view {
	padding: 20px;
	border: solid 1px grey;
	border-radius: 10px;

	margin-bottom: 30px;
}

#esport-news-view h2 {
	font-size: 18px;
}

#esport-news-view ol {
	margin-top: 20px;
}

#esport-news-view li {
	margin-bottom: 8px;
}

#esport-news-view li:last-child {
	margin-bottom: 0;
}

#esport-news-view li a {
	/*display: block;*/
}

#esport-news-view li .image-wrap {
	overflow: hidden;
	position: relative;
	width: 84px;
	height: 48px;
	border: solid 1px rgba(0, 0, 0, .04);
	border-radius: 4px;
}

#esport-news-view li .image-wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
}

#esport-news-view li .image-wrap .rank {
	position: absolute;
	background-color: #4e41db;
	border-bottom-right-radius: 4px;

	padding: 4px 10px;

	top: 0;
	left: 0;

	font-size: 13px;
	color: #fff;
	font-weight: 800;
}

#esport-news-view li h3 {
	display: -webkit-box;
	overflow: hidden;

	width: 218px;
	max-height: 38px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;


	font-size: 14px;
	line-height: 19px;
}

2. esport-schedule

- html

<div id="esport-schedule">
						<h2>e스포츠 경기 일정/결과</h2>

						<div class="schedule-wrap">
							
							<div class="schedule-header esport-flex-between">

								<button class="arrow arrow-left"><b><</b></button>
								<span>06.05 토</span>
								<button class="arrow arrow-right"><b>></b></button>
								
							</div>

							<div class="schedule-body">
								
								<ul>
									<li>
										<h3>2021 LCK AS 챔피언십 풀리그 3일차</h3>
										<div class="status-wrap esport-flex-center">
											<span class="status">진행중</span>
											<span class="time">10:00</span>
										</div>
									</li>

									<li>
										<h3>2021 LCK AS 챔피언십 풀리그 3일차</h3>
										<div class="status-wrap esport-flex-center">
											<span class="status">진행중</span>
											<span class="time">10:00</span>
										</div>
									</li>
								</ul>

							</div>

						</div>
					</div>

- css

#esport-schedule {

}

#esport-schedule h2 {
	font-size: 18px;
}

#esport-schedule .schedule-wrap {
	margin-top: 15px;
	border: solid 1px grey;
	border-radius: 4px;
}	

#esport-schedule .schedule-wrap .schedule-header {
	padding: 14px 15px;
	border-bottom: solid 1px grey;
}

#esport-schedule .schedule-wrap .schedule-header .arrow {
	width: 15px;	
	height: 15px;
	border: solid 1px black;
}

#esport-schedule .schedule-wrap .schedule-header .arrow.arrow-left {
	/*background-color: yellow;*/
}

#esport-schedule .schedule-wrap .schedule-header .arrow.arrow-right {
	/*background-color: greenyellow;*/
}

#esport-schedule .schedule-wrap .schedule-header span {
	position: relative;

	font-size: 18px;
	font-weight: 800;

	top: 3px;
}


#esport-schedule .schedule-body {
	padding: 17px 0;
}

#esport-schedule .schedule-body li {
	/*padding: 17px 0;*/
}

#esport-schedule .schedule-body li:first-child:after {
	content: "";
	display: block;
	width: calc(100% - 40px);
	height: 1px;
	background-color: rgba(0, 0, 0, .05);

	margin: 17px auto;
}


#esport-schedule .schedule-body li h3 {
	font-size: 14px;
	margin-bottom: 12px;
	text-align: center;
}

#esport-schedule .schedule-body li .status-wrap {

}

#esport-schedule .schedule-body li .status-wrap:hover {
	/*cursor: pointer;*/
	background-color: yellow;
}


#esport-schedule .schedule-body li .status-wrap .status{
	background-color: rgba(255, 0, 0, .1);
	color: red;
	font-weight: 500;
	font-size: 11px;
	border-radius: 3px;

	margin-right: 4.5px;

	padding: 2px 4px;
}

#esport-schedule .schedule-body li .status-wrap .time{
	position: relative;

	top: 1px;

	font-size: 15px;
	font-weight: 700;
}

3. 웹폰트 적용하기

- html

구글 폰트 페이지 https://fonts.google.com/

페이지에 들어가 원하는 글자를 선택하면 옆에 link 와 css 코드가 나오기 때문에 쉽게 사용할 수 있다.

<!-- <link rel="preconnect" href="https://fonts.gstatic.com"> -->
	<!-- <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> -->

- css

초기값 작성시 적용하고 싶은 폰트를 넣는다.
폰트 패밀리를 사용할 경우 처음 순으로 적용이 되며 안될경우 다음 순으로 넘어간다.
여기서 주의 할점은 모든 웹에서 사용가능한 sens-serif 를 마지막에 꼭 넣어준다.

* {
	/*font-family: 'Nanum Gothic', sans-serif;*/
	/*font-family: Arial, Times, sens-serif;*/
	 /* 초기값에 미리 서체 넣어놓기 sans-serif는 꼭 마지막에 넣기*/
}

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

아직은 content 사용이 어려운것같다.
그래서 조금 더 알아보았다.
"content" 는 삽입된 이미지나 텍스트들을 css코드에서 스타일처럼 꾸며주는 역할을 하는데, 그래서 웹 검색에서도 검색이 되지 않는 디자인 역할을 담당 한다고 한다.
우리는 주로 메뉴 구분선과 같은 역할로 많이 사용 하고 있는데, 여기에서
content: "" 로 넣어주었을때 ""안에 아무것도 넣어주지 않아 비어있음을 의미하는데, 여기에 display: block 을 사용하여 공간을 나타내어주고 높이,넓이 값을주어 원하는 구분선을 만들어준다.
아니면 원하는 텍스트나 이미지등을 넣을 수 있는데, 여기서 넣는 이미지는 크기 조절이안되어 만약 크기조절을 하고싶다면 background-image 를 사용하도록 한다.
또 위치를 넣어주지 않으면 어디에 들어가야하는지 몰라 적용이 안되므로 꼭 위치를 선정해주도록 한다. 주로 가상선택자(:after 와 :before) 들과 함께 사용된다.

3) 학습소감

오늘은 계속 헷깔렸던 부분에 대해 조금더 정리 하고 넘어가는 시간을 가졌다. 이렇게 디테일하게 알아보니 조금은 이해가 되는것같다. 이와같은 시간을 많이 가져야하는데..
오늘은 불금이니 조금더 뽜이팅 하자 : )

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

2021_08_12개발일지

다음 포스트

2021_08_13개발일지(2)

0개의 댓글