9월 1일 Velog

학습한 내용

Youtube Channel 실습 #2

4. Channel Content

[html]

				<div id="channel_content">
					<div class="channel_container">
						
						<div id="channel_recent"></div>
						<div id="channel_lists"></div>
						<div id="channel_lists"></div>
						<div id="channel_lists"></div>						

					</div>
				</div>

4-2. Channel Lists

[html]

						<div id="channel_lists">
							<div class="title_wrap flex_start">
								<h3>이유는 없어 이번 주도 그냥 봐 👀</h3>
								<div class="play_wrap flex_start">
									<i class="icon_play"></i>
									<a href="#">모두 재생</a>
								</div>
							</div>

							<ul class="flex_between">
								<li>
									<a href="#" class="video_thumbnail">
										<img src="https://via.placeholder.com/210x118">
										<span class="time">2:17</span>
									</a>
									<a href="#" class="video_title">
										<h4>[선공개] 폭탄 제조실?! 오연범의 치밀한 테러 준비 흔적에 탈출러들 초긴장! #대탈출4 EP.8</h4>
									</a>
									<a href="#" class="channel_link">tvN</a>
									<a href="#" class="source">
										<span class="count">조회수 4.8천회</span>
										<span class="date">3일 전</span>
									</a>
								</li>
								<li>
									<a href="#" class="video_thumbnail">
										<img src="https://via.placeholder.com/210x118">
										<span class="time">2:17</span>
									</a>
									<a href="#" class="video_title">
										<h4>[선공개] 폭탄 제조실?! 오연범의 치밀한 테러 준비 흔적에 탈출러들 초긴장! #대탈출4 EP.8</h4>
									</a>
									<a href="#" class="channel_link">tvN</a>
									<a href="#" class="source">
										<span class="count">조회수 4.8천회</span>
										<span class="date">3일 전</span>
									</a>
								</li>
								<li>
									<a href="#" class="video_thumbnail">
										<img src="https://via.placeholder.com/210x118">
										<span class="time">2:17</span>
									</a>
									<a href="#" class="video_title">
										<h4>[선공개] 폭탄 제조실?! 오연범의 치밀한 테러 준비 흔적에 탈출러들 초긴장! #대탈출4 EP.8</h4>
									</a>
									<a href="#" class="channel_link">tvN</a>
									<a href="#" class="source">
										<span class="count">조회수 4.8천회</span>
										<span class="date">3일 전</span>
									</a>
								</li>
								<li>
									<a href="#" class="video_thumbnail">
										<img src="https://via.placeholder.com/210x118">
										<span class="time">2:17</span>
									</a>
									<a href="#" class="video_title">
										<h4>[선공개] 폭탄 제조실?! 오연범의 치밀한 테러 준비 흔적에 탈출러들 초긴장! #대탈출4 EP.8</h4>
									</a>
									<a href="#" class="channel_link">tvN</a>
									<a href="#" class="source">
										<span class="count">조회수 4.8천회</span>
										<span class="date">3일 전</span>
									</a>
								</li>
								<li>
									<a href="#" class="video_thumbnail">
										<img src="https://via.placeholder.com/210x118">
										<span class="time">2:17</span>
									</a>
									<a href="#" class="video_title">
										<h4>[선공개] 폭탄 제조실?! 오연범의 치밀한 테러 준비 흔적에 탈출러들 초긴장! #대탈출4 EP.8</h4>
									</a>
									<a href="#" class="channel_link">tvN</a>
									<a href="#" class="source">
										<span class="count">조회수 4.8천회</span>
										<span class="date">3일 전</span>
									</a>
								</li>
							</ul>
						</div>

[css]

#youtube_channel_content #channel_content #channel_lists {
	padding: 24px 0;

	border-bottom: solid 1px #252525;
}

#channel_lists .title_wrap h3 {
	font-size: 16px;
	font-weight: 400;
	color: #ffffff;

	margin-right: 20px;
}

#channel_lists .title_wrap .play_wrap .icon_play {
	display: inline-block;

	width: 24px;
	height: 24px;
	background-color: #aaaaaa;
}

#channel_lists .title_wrap .play_wrap a {
	font-size: 14px;
	color: #aaaaaa;

	margin-left: 8px;
}

#channel_lists ul {
	margin-top: 24px;
}

#channel_lists ul li .video_thumbnail {
	display: block;
	position: relative;

	width: 210px;
	height: 118px;
}

#channel_lists .video_thumbnail img {
	width: 100%;
	height: 100%;
}

#channel_lists .video_thumbnail .time {
	position: absolute;

	padding: 2px 4px;
	background-color: #000000;
	border-radius: 2px;

	font-size: 12px;
	font-weight: 600;
	color: #ffffff;

	bottom: 3px;
	right: 4px;	
}

#channel_lists ul li .video_title {
	display: block;

	padding-right: 24px;
}

#channel_lists .video_title h4 {
	font-size: 14px;
	font-weight: 400;
	color: #ffffff;

	max-width: 186px;

	overflow: hidden;
  	text-overflow: ellipsis;
  	display: -webkit-box;
  	-webkit-line-clamp: 2;
  	-webkit-box-orient: vertical;

	margin: 8px 0;
}

#channel_lists ul li .channel_link {
 	display: block;

 	font-size: 12px;
 	color: #aaaaaa;
}

#channel_lists ul li .channel_link:hover {
	color: #ffffff;
}

#channel_lists ul li .source {
	display: block;
}

#channel_lists .source span {
	font-size: 12px;
 	color: #aaaaaa;
}

#channel_lists .source span.count:after {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	background-color: #aaaaaa;
	border-radius: 50%;

	vertical-align: 3px;

	margin: 0 1px 0 5px;
}

Youtube 탐색 실습

https://www.youtube.com/feed/explore

top nav/left nav는 앞의 youtube 채널과 동일한 코드를 사용한다.

Main - Youtube Explore Content

[html]

		<main role="main" id="youtube_main">

			<div id="youtube_explore_content">
				<div class="explore_container">
					
					<nav id="explore_nav"></nav>
					<div id="popular_section"></div>

				</div>
			</div>

		</main>

[css]

.explore_container {
	width: 1070px;
	margin: 0 auto;
}

1. Explore Nav

[html]

					<nav id="explore_nav">
						<ul class="flex_between">
							<li>
								<<a href="#">
									<i class="nav_icon"></i>
									<span>인기</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="nav_icon"></i>
									<span>음악</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="nav_icon"></i>
									<span>게임</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="nav_icon"></i>
									<span>영화</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="nav_icon"></i>
									<span>학습</span>
								</a>
							</li>
						</ul>
					</nav>

[css]

#youtube_explore_content #explore_nav {
	margin-top: 12px;
	padding-bottom: 8px;
}

#explore_nav ul li {
	overflow: hidden;

	width: 210px;
	height: 116px;
	background-color: #212121;
	border-radius: 8px;	

	margin-right: 4px;
}

#explore_nav ul li a {
	display: block;
	width: 100%;
	height: 100%;

	padding: 20px;
}

#explore_nav ul li a:hover {
	background-color: #000000;
}

#explore_nav ul li a .nav_icon {
	display: block;

	width: 32px;
	height: 32px;
	background-color: #fd8a86;

	margin-bottom: 15px;
}

#explore_nav ul li a span {
	font-size: 16px;
	color: #ffffff;
}

2. Popular Section

[html]

					<div id="popular_section">
						<h2>인기 급상승 동영상</h2>

						<ul>
							<li>
								<a class="popular_info flex_start">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/246x138">
										<span class="mark">15:21</span>
									</div>

									<div class="txt_wrap">
										<h3>맛있는 음식도 먹고🍖 흥미진진한 이야기도 듣고👂 [스트리트 푸드 파이터] 스트리밍</h3>
										<span class="channel">tvN</span>
										<span class="count">조회수 163만회</span>
										<span class="date">1일 전</span>
										<p class="description">음식에는 맛뿐 아니라 흥미로운 이야기도 얽혀있는 법😁
										백종원과 스푸파 끝장나게 즐기고, 노포의 (특별한) 영업비밀도 들으러 와요😉
										[스트리트...</p>
									</div>
								</a>								
							</li>
							<li>
								<a class="popular_info flex_start">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/246x138">
										<span class="mark">15:21</span>
									</div>

									<div class="txt_wrap">
										<h3>맛있는 음식도 먹고🍖 흥미진진한 이야기도 듣고👂 [스트리트 푸드 파이터] 스트리밍</h3>
										<span class="channel">tvN</span>
										<span class="count">조회수 163만회</span>
										<span class="date">1일 전</span>
										<p class="description">음식에는 맛뿐 아니라 흥미로운 이야기도 얽혀있는 법😁
										백종원과 스푸파 끝장나게 즐기고, 노포의 (특별한) 영업비밀도 들으러 와요😉
										[스트리트...</p>
									</div>
								</a>								
							</li>
							<li>
								<a class="popular_info flex_start">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/246x138">
										<span class="mark">15:21</span>
									</div>

									<div class="txt_wrap">
										<h3>맛있는 음식도 먹고🍖 흥미진진한 이야기도 듣고👂 [스트리트 푸드 파이터] 스트리밍</h3>
										<span class="channel">tvN</span>
										<span class="count">조회수 163만회</span>
										<span class="date">1일 전</span>
										<p class="description">음식에는 맛뿐 아니라 흥미로운 이야기도 얽혀있는 법😁
										백종원과 스푸파 끝장나게 즐기고, 노포의 (특별한) 영업비밀도 들으러 와요😉
										[스트리트...</p>
									</div>
								</a>								
							</li>
							<li>
								<a class="popular_info flex_start">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/246x138">
										<span class="mark">15:21</span>
									</div>

									<div class="txt_wrap">
										<h3>맛있는 음식도 먹고🍖 흥미진진한 이야기도 듣고👂 [스트리트 푸드 파이터] 스트리밍</h3>
										<span class="channel">tvN</span>
										<span class="count">조회수 163만회</span>
										<span class="date">1일 전</span>
										<p class="description">음식에는 맛뿐 아니라 흥미로운 이야기도 얽혀있는 법😁
										백종원과 스푸파 끝장나게 즐기고, 노포의 (특별한) 영업비밀도 들으러 와요😉
										[스트리트...</p>
									</div>
								</a>								
							</li>
						</ul>
					</div>

[css]

#youtube_explore_content #popular_section {
	padding: 24px 0;

	border-bottom: solid 1px #252525;
}

#popular_section h2 {
	font-size: 16px;
	font-weight: 400;
	color: #ffffff;

	margin-bottom: 24px;
}

#popular_section ul li {
	margin-bottom: 16px;
}

#popular_section ul li .popular_info {
	align-items: stretch;
}

#popular_section  .popular_info .image_wrap {
	position: relative;
	width: 246px;
	height: 138px;
}

#popular_section  .popular_info .image_wrap img {
	width: 100%;
	height: 100%;
}

#popular_section  .popular_info .image_wrap .mark {
	position: absolute;

	padding: 2px 4px;
	background-color: #000000;
	border-radius: 2px;

	font-size: 12px;
	font-weight: 600;
	color: #ffffff;

	right: 4px;
	bottom: 4px;
}

#popular_section  .popular_info .txt_wrap {
	width: 600px;

	margin-left: 16px;
}

#popular_section  .popular_info .txt_wrap h3 {
	font-size: 18px;
	font-weight: 400;
	color: #ffffff;
}

#popular_section  .popular_info .txt_wrap .channel,
#popular_section  .popular_info .txt_wrap .count,
#popular_section  .popular_info .txt_wrap .date,
#popular_section  .popular_info .txt_wrap .description {
	font-size: 12px;
	color: #aaaaaa;
}

#popular_section  .popular_info .txt_wrap .channel:after,
#popular_section  .popular_info .txt_wrap .count:after {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	background-color: #aaaaaa;
	border-radius: 50%;

	vertical-align: 3px;

	margin: 0 1px 0 5px;
}

#popular_section  .popular_info .txt_wrap .description {
	padding-top: 8px;

	margin-bottom: 8px;
}

channel 영역의 channel recent 영역을 참고하였다.

추가로 학습한 내용

코레일 대기 화면 카피캣

추석 예매 대기하다가 지루해서 카피캣을 도전해보았다.
1시간 정도 걸린 듯하다.

[html]

	<header>
		<h1>예약 접속 대기</h1>
	</header>

	<main role="main">
		
		<nav>
			<ul>
				<li><a href="#">회원가입</a></li>
				<li><a href="#">회원번호 찾기</a></li>
				<li><a href="#">비밀번호 찾기</a></li>
			</ul>
		</nav>

		<p class="count">접속대기인원: 9632명</p>

		<div class="bar"></div>

		<div class="txt_wrap">
			<p><span class="hyphen">-</span>예약 요청 횟수는 6회, 전체 예약 시간은 3분까지입니다.</p>
			<p><span class="hyphen">-</span>현재 화면을 벗어나거나 <span class="red">[닫기] 버튼을 누르면 대기 순서가 다시 부여</span>됩니다. 일시적인 통신 장애 등으로 인터넷 접속이 끊겨 대기자 수가 줄지 않고 멈춘 경우에만 누르시기 바랍니다.</p>
			<p><span class="hyphen">-</span>예약 접속시까지 최장 98분이 소요될 수 있습니다.</p>
		</div>
	</main>

	<footer>
		<ul>
			<li><button type="button">닫기</button></li>
			<li><a href="#">잔여석현황 조회</a></li>
		</ul>
	</footer>

[css]

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
}

ol, ul {
	list-style: none;
}


img {
	vertical-align: middle;
}

button {
	background-color: transparent;
	border: none;
}

input {
	outline: none;
	border: none;
}

input:focus {
	outline: none;
}

a {
	text-decoration: none;
}


@media (max-width: 600px) {
	header {
		width: 100%;
		height: 80px;
		background-color: navy;
	}

	header h1 {
		color: 	#ffffff;
		font-size: 26px;
		font-weight: 400;

		text-align: center;
		line-height: 80px;
	}

	main {
		padding: 0 24px;
	}


	main nav {
		width: 100%;
		height: 40px;	

		margin-top: 24px;
	}

	main nav ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;

		width: 100%;
		border-top: solid 2px blue;
		border-bottom: solid 2px blue;
	}

	main nav ul li {
		width: 33%;
		height: 40px;
	}

	main nav ul li a {
		display: inline-block;

		width: 100%;
		height: 100%;		
		background-color: lightgrey;

		font-size: 12px;
		color: #000000;

		text-align: center;
		line-height: 40px;
	}


	main .count {
		width: 100%;
		height: 100px;
		border: solid 1px red;

		font-size: 30px;
		color: red;

		text-align: center;
		line-height: 100px;

		margin-top: 24px;
	}


	main .bar {
		width: 100%;
		height: 24px;
		background-color: lightgrey;

		margin-top: 24px;
	}


	main .txt_wrap {
		margin-top: 24px;
	}

	main .txt_wrap p {
		font-size: 14px;

		line-height: 2;

		padding:0 10px;
	}

	main .txt_wrap p .hyphen {
		margin-left: -10px;
		margin-right: 5px;
	}

	main .txt_wrap p .red {
		color: red;
	}

	footer {
		position: absolute;

		width: 100%;

		bottom: 0;
	}

	footer ul {		
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}

	footer ul li {
		width: 50%;
		height: 70px;
		background-color: lightgrey;
	}

	footer ul li button,
	footer ul li a {
		display: inline-block;
		width: 100%;

		font-size: 20px;
		color: #000000;

		text-align: center;
		line-height: 70px;
	}

	footer ul li button {
		border-right: solid 2px #ffffff;
	}
}

point 1. nav 태그 내부의 li 태그를 일정한 비율로 등분하여 정렬할 때

• li 태그에 width:33%; + a 태그에 width:100%;
• a 태그에 33%을 적용했을 땐 줄바꿈이 일어났다. (flex가 적용되는 li 태그는 100%로 잡혀있기 때문)

ponit 2. 줄바꿈이 일어나는 문단에서 행 간 공백을 주고 싶을 때

• line-height: 2; : 글자 하나의 높이를 2배로 키워준다.

point 3. 하이픈(-) 위치에 대해 줄바꿈 시 자리 맞추기

• p 내부의 하이픈(-)을 별도의 class로 지정한 span 태그로 감싸주고
• p 태그는 padding:0 10px; 를 적용하여 전체적으로 안쪽으로 밀어주고
• 하이픈(-)을 포함한 span 태그는 margin-left: -10px; 를 적용하여 왼쪽으로 자리 이동시킨 후 margin-right: 5px; 를 적용하여 텍스트와 하이픈(-) 사이의 공백을 만들어준다.