2021.07.02 (네이버 이스포츠 3)

학습한 내용

[네이버 이스포츠 오른쪽 부분]

				<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/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">2</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">3</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">4</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">5</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">6</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">7</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">8</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">9</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">10</span>
									</div>

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

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

						<div class="schedule_wrap">
							<div class="schedule_header esport_flex_between">
								<button type="button" class="arrow arrow_left"></button>
								<span>07.02 금</span>
								<button type="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>
#esport_main .right {
	float: right;

	width: 357px;
}


#esport_news_view {
	border: solid 1px grey;
	border-radius: 10px;

	padding: 20px;
	margin-bottom: 30px;
}

#esport_news_view h2 {
	font-size: 18px;
}

#esport_news_view ol {
	margin-top: 20px;
}

#esport_news_view ol li {
	margin-bottom: 13px;
}

#esport_news_view ol li:last-child {
	margin-bottom: 0;
}

#esport_news_view ol li a .image_wrap {
	position: relative;

	width: 84px;
	height: 48px;

	overflow: hidden;

	border: solid 1px rgba(0, 0, 0, .04);
	border-radius: 6px;
}

#esport_news_view ol li a .image_wrap img {
	position: absolute;

	width: 100%;
	height: 100%;
}

#esport_news_view ol li a .image_wrap .rank {
	position: absolute;

	width: 22px;

	border-bottom-right-radius: 6px;
	background-color: #4e41db;

	font-size: 13px;
	font-weight: 800;
	color: #ffffff;
	line-height: 19px;
	text-align: center;

	padding: 2px 0;

	top: 0;
	left: 0;
}

#esport_news_view ol li a h3 {
	width: 218px;

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

	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: 38px;
	-webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#esport_schedule {

}

#esport_schedule h2 {
	font-size: 18px;
}

#esport_schedule .schedule_wrap {
	border: solid 1px grey;
	border-radius: 4px;

	margin-top: 15px;
}

#esport_schedule .schedule_wrap .schedule_header {
	border-bottom: solid 1px grey;

	padding: 10px 15px;
}

#esport_schedule .schedule_wrap .schedule_header .arrow {
	width: 20px;
	height: 20px;
}

#esport_schedule .schedule_wrap .schedule_header .arrow_left {
	background-color: yellow;
}

#esport_schedule .schedule_wrap .schedule_header .arrow_right {
	background-color: greenyellow;
}

#esport_schedule .schedule_wrap .schedule_header span {
	font-size: 18px;
	font-weight: 800;
}

#esport_schedule .schedule_wrap .schedule_body {
	padding: 17px 0;
}

#esport_schedule .schedule_wrap .schedule_body li:first-child:after {
    display: block;
    content: "";
    width: calc(100% - 40px);
    height: 1px;
    background-color: rgba(0, 0, 0, .05);
    
    margin: 17px auto;
}

#esport_schedule .schedule_wrap .schedule_body li h3 {
	font-size: 14px;
	text-align: center;

	margin-bottom: 12px;
}

#esport_schedule .schedule_wrap .schedule_body li .status_wrap:hover {
	cursor: pointer;

	background-color: yellow;
}

#esport_schedule .schedule_wrap .schedule_body li .status_wrap .status {
	font-size: 11px;
	font-weight: 500;
	color: red;

	border-radius: 3px;

	background-color: rgba(255, 0, 0, .1);

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

#esport_schedule .schedule_wrap .schedule_body li .status_wrap .time {
	font-size: 15px;
	font-weight: 700;
}


[웹폰트 적용하기]

	<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">
font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif;

학습내용 중 어려웠던 점

크게 어려운건 없었지만 특정 부분만 border-radius를 어떻게 적용할지 궁금했고 padding값 없이 li태그를 나누는 border를 가운데로 배치하는것에 대해 시작하기 전에 궁금했습니다.

해결방법

border-bottom-right-radius 이런식으로 하단 오른쪽 특정 부분만 적용하는 식으로 4군데를 서로 다르게 지정 할수 있다는걸 알수 있었고 border의 경우 넣고싶은 li태그 사이에 div를 넣고 height 1px, 그리고 적당한 width값과 중앙정렬을 통해 작업하는걸 생각 했는데 강의를 보니 after가 html의 코드를 늘리지 않고 깔끔하게 해결되서 영상의 방법으로 수정했습니다.

학습소감

css를 다양하게 응용하면서 같은 레이아웃이지만 다른 느낌을 줄수 있다는걸 알게 되었고 특히 글자 폰트에 따라 똑같은 페이지의 느낌히 확 달라질수 있다는 것을 알수 있었습니다.

[프로그래머스] 가운데 글자 가져오기 - JS
[TIL] # 26 Code Kata 알고리즘

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage