08월 13일

1. 학습 내용

왼쪽 영역

HTML

<div class="right">
						
					<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/84px*48px">
										<span class="rank">1</span>
									</div>

									<h3>타이틀 타이틀 타이틀 타이틀 틀이타 틀이타 틀티아 이틀타 이틀딱 이틀따 이특딱 트이타 트위터 이타틀 이다슿</h3>
								</a>
							</li>
                            - 10위까지 복붙
						</ol>

					</div>

					<div id="esport-schedule">
						<h2>e스포츠 경기 일정/결과</h2>
						<div class="schedule-wrap">
							
							<div class="schedule-header esport-flex-between">
								
								<button class="arrow arrow-left"></button>
								<span>06.05 토</span>
								<button class="arrow arrow-right"></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>

				</div>

CSS

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

	margin-bottom: 30px;}

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

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

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

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


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

	overflow: hidden;}

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

.right #esport-news-view ol li .image-wrap .rank {
	position: absolute;
	top: 0;
	left: 0;
	border-bottom-right-radius: 10px;
	/* 원하는 곳에만 둥글게 적용 */

	padding: 3px 10px;

	font-size: 13px;
	color: #ffffff;
	font-weight: 800;

	background-color: #4e41db;}

.right #esport-news-view ol li a h3 {
	display: -webkit-box;
	overflow: hidden;

	width: 218px;
	max-height: 38px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	/* CSS 두번째 줄에서 말줄임표 */

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


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

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

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

#esport-schedule .schedule-header .arrow {
	width: 20px;
	height: 20px;}

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

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

#esport-schedule .schedule-header span {
	font-size: 18px;
	font-weight: 800;}

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


#esport-schedule .schedule-body ul li:first-child:after {
	content: '';
	display: block;
	width: calc(100% - 40px);
	height: 1px;
	background-color: rgba(0, 0, 0, 0.05);
	/* 하단의 가로줄을 만든다 */

	margin: 17px auto;}

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


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

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

	border-radius: 3px;

	margin-right: 4.5px;
	padding: 2px 4px;}	

#esport-schedule .schedule-body ul li .status-wrap .time {
	font-size: 15px;
	font-weight: 700;}
    
    
    

서체

font-family를 사용

구글 웹폰트를 검색하면 구글에서 제공하는 서체를 사용가능
원하는 설정을 하고 link태그를 복수하여 css에 적용

• 폰트를 먼저 가져오고 연결한 css를 연결

2. 학습 중 어려웠던 점

서체에 대해 완벽히 숙지하지 못했다.

3. 해결 방안

실전에서 적용해보면서 감을 찾는다.

4. 학습 소감

더 많은 새로운 것을 알고 싶다.