2021.08. 31 youtube css(4) ๐ŸŒด

hae.logยท2021๋…„ 8์›” 31์ผ
0

index.htmlโœ

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>์œ ํŠœ๋ธŒ ํŠœํ† ๋ฆฌ์–ผ</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>


	<div id="wrapper">

		<nav id="youtube-top-nav">

			<div class="youtube-top-wrap flex-align-between">
				<div class="nav-left flex-align-start">
					<button type="button" class="btn-menu"></button>
					<h1>
						<a href="#">
							<img src="https://via.placeholder.com/90x20">
						</a>
					</h1>
				</div>

				<div class="nav-center flex-align-start">
					<div class="search-wrap flex-align-start">
						<input type="text" placeholder="๊ฒ€์ƒ‰">
						<button type="button" class="btn-search"></button>
					</div>
					<button class="btn-voice"></button>
				</div>

				<div class="nav-right flex-align-end">
					<button type="button" class="btn-menu btn-menu-1"></button>
					<button type="button" class="btn-menu btn-menu-2"></button>
					<a href="#" class="btn-login">๋กœ๊ทธ์ธ</a>
				</div>
			</div>
			
		</nav>



		<nav id="youtube-left-nav">
			<div id="youtube-left-content">

				<div class="nav-section">
					
					<div class="nav-body">
						<ul>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-1"></i>
									<span>ํ™ˆ</span>
								</a>
							</li>
							<li>
								<a href="explore.html" class="flex-align-start">
									<i class="icon icon-2"></i>
									<span>ํƒ์ƒ‰</span>
								</a>
							</li>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-3"></i>
									<span>๊ตฌ๋…</span>
								</a>
							</li>
						</ul>
					</div>

				</div>

				<div class="nav-section">
					
					<div class="nav-body">
						<ul>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-4"></i>
									<span>๋ณด๊ด€ํ•จ</span>
								</a>
							</li>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-5"></i>
									<span>์‹œ์ฒญ ๊ธฐ๋ก</span>
								</a>
							</li>
						</ul>
					</div>
					
				</div>

				<div class="nav-section">
					
					<div class="nav-body">
						<div class="txt-wrap">
							<p>๋กœ๊ทธ์ธํ•˜๋ฉด ๋™์˜์ƒ์— ์ข‹์•„์š”๋ฅผ ํ‘œ์‹œํ•˜๊ณ  ๋Œ“๊ธ€์„ ๋‹ฌ๊ฑฐ๋‚˜ ๊ตฌ๋…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.</p>
							<a href="#" class="btn-login">๋กœ๊ทธ์ธ</a>
						</div>
					</div>
					
				</div>

				<div class="nav-section">

					<div class="nav-title-wrap">
						<h2>์ธ๊ธฐ YOUTUBE</h2>
					</div>
					
					<div class="nav-body">
						<ul>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-6"></i>
									<span>์Œ์•…</span>
								</a>
							</li>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-7"></i>
									<span>์Šคํฌ์ธ </span>
								</a>
							</li>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-8"></i>
									<span>๊ฒŒ์ž„</span>
								</a>
							</li>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-9"></i>
									<span>์˜ํ™”</span>
								</a>
							</li>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-10"></i>
									<span>๋‰ด์Šค</span>
								</a>
							</li>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-11"></i>
									<span>์‹ค์‹œ๊ฐ„</span>
								</a>
							</li>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-12"></i>
									<span>ํ•™์Šต</span>
								</a>
							</li>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-13"></i>
									<span>360ยฐ ๋™์˜์ƒ</span>
								</a>
							</li>
						</ul>
					</div>
					
				</div>

				<div class="nav-section">
					
					<div class="nav-body">
						<ul>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-4"></i>
									<span>์ฑ„๋„ ํƒ์ƒ‰</span>
								</a>
							</li>
						</ul>
					</div>
					
				</div>

				<div class="nav-section">

					<div class="nav-title-wrap">
						<h2>YOUTBUE ๋”๋ณด๊ธฐ</h2>
					</div>
					
					<div class="nav-body">
						<ul>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-6"></i>
									<span>YouTube Premium</span>
								</a>
							</li>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-7"></i>
									<span>์‹ค์‹œ๊ฐ„</span>
								</a>
							</li>
						</ul>
					</div>
					
				</div>

				<div class="nav-section">
					
					<div class="nav-body">
						<ul>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-4"></i>
									<span>์„ค์ •</span>
								</a>
							</li>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-4"></i>
									<span>์‹ ๊ณ  ๊ธฐ๋ก</span>
								</a>
							</li>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-4"></i>
									<span>๊ณ ๊ฐ์„ผํ„ฐ</span>
								</a>
							</li>
							<li>
								<a href="#" class="flex-align-start">
									<i class="icon icon-4"></i>
									<span>์˜๊ฒฌ ๋ณด๋‚ด๊ธฐ</span>
								</a>
							</li>
						</ul>
					</div>
					
				</div>

				<footer id="youtube-footer">
					<div class="txt-wrap">
						<a href="#">์ •๋ณด</a>
						<a href="#">๋ณด๋„์ž๋ฃŒ</a>
						<a href="#">์ €์ž‘๊ถŒ</a>
						<a href="#">๋ฌธ์˜ํ•˜๊ธฐ</a>
						<a href="#">ํฌ๋ฆฌ์—์ดํ„ฐ</a>
						<a href="#">๊ด‘๊ณ </a>
						<a href="#">๊ฐœ๋ฐœ์ž</a>
					</div>
					<div class="txt-wrap">
						<a href="#">์•ฝ๊ด€</a>
						<a href="#">๊ฐœ์ธ์ •๋ณด์ฒ˜๋ฆฌ๋ฐฉ์นจ</a>
						<a href="#">์ •์ฑ… ๋ฐ ์•ˆ์ „</a>
						<a href="#">Youtube ์ž๋™์˜ ์›๋ฆฌ</a>
						<a href="#">์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ ํ…Œ์ŠคํŠธํ•˜๊ธฐ</a>
					</div>
					<div class="txt-wrap">
						<p>Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet youNice to meet you</p>
					</div>
				</footer>

			</div>
		</nav>




		<main id="youtube-main" role="main">
			
			<div id="youtube-channel-content">


				<div id="channel-banner"></div>

				<div id="channel-header">
					
					<div class="channel-container">
						<div class="channel-profile-wrap flex-align-between">
							
							<div class="channel-profile flex-align-start">
								<img class="channel-thumbnail" src="https://via.placeholder.com/80">
								<div class="txt-wrap">
									<h2>๊ธฐ๋ฐœ์ž ์œ ํŠœ๋ธŒ ์ฑ„๋„</h2>
									<p>๊ตฌ๋…์ž 222๋งŒ๋ช…</p>
								</div>
							</div>

							<button type="button" class="btn-subscribe">๊ตฌ๋…</button>

						</div>
					</div>

				</div>

				<nav id="channel-nav">
					
					<div class="channel-container">
						
						<ul class="flex-align-start">
							<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>
							<li><a href="#">์ •๋ณด</a></li>
						</ul>

					</div>

				</nav>


				<div id="channel-content">
					<div class="channel-container">

						
						<div id="channel-recent" class="flex-align-start">
							
							<div class="thumbnail-wrap">
								<img src="https://via.placeholder.com/246x148">
								<span class="mark">์‹ค์‹œ๊ฐ„</span>
							</div>

							<div class="txt-wrap">
								<h2>๊ธฐ๋ฐœ์ž ์‹ค์‹œ๊ฐ„ ๋ผ์ด๋ธŒ ์ฝ”๋”ฉ ๋ฐฉ์†กํ”„๋กœ๊ทธ๋žจ 24์‹œ๊ฐ„</h2>
								<p class="channel">๊ธฐ๋ฐœ์ž ์ฝ”๋”ฉ์ฑ„๋„ 41๋ช… ์‹œ์ฒญ์ค‘</p>
								<p class="description">
									๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ณ๋„๋ก ๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ณ๋„๋ก ๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ณ๋„๋ก ๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ณ๋„๋ก ๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ณ๋„๋ก ๋™ํ•ด๋ฌผ๊ณผ ๋ฐฑ๋‘์‚ฐ์ด ๋งˆ๋ฅด๊ณ  ๋‹ณ๋„๋ก 
								</p>
							</div>

						</div>



						<div class="channel-playlists-section">

							<div class="playlists-header flex-align-start">
								<h3>์ฝ”๋”ฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค</h3>
								<div class="play-wrap flex-align-start">
									<i class="icon-play"></i>
									<a href="#" class="play-link">๋ชจ๋‘ ์žฌ์ƒ</a>
								</div>
							</div>

							<div class="playlists-body">
								<ul class="flex-align-between">
									<li>
										<div class="channel-thumbnail">
											<a href="#">
												<img src="https://via.placeholder.com/210x118">
												<span class="time">00:20</span>
											</a>
										</div>

										<div class="channel-txt-wrap">
											<h3>
												<a href="#" class="title-link">
													[๋ฌดํ•œ๋„์ „] ๋ฌดํ•œ์ƒ์‚ฌ ํŠน์ง‘ํŽธ! ํ‡ด๊ทผ... ํ• ๋ ค๋ฉด ํ•˜์‹œ๋˜๊ฐ€์š”.
												</a>
											</h3>
											
											<p><a href="channel.html" class="channel-link">MBC ์—”ํ„ฐํ…Œ์ด๋จผํŠธ</a></p>
											
											<div class="txt-bottom">
												<span class="count">์กฐํšŒ์ˆ˜ 71๋งŒํšŒ</span>
												<span class="date">6๊ฐœ์›” ์ „</span>
											</div>
										</div>
									</li>
									<li>
										<div class="channel-thumbnail">
											<a href="#">
												<img src="https://via.placeholder.com/210x118">
												<span class="time">00:20</span>
											</a>
										</div>

										<div class="channel-txt-wrap">
											<h3>
												<a href="#" class="title-link">
													[๋ฌดํ•œ๋„์ „] ๋ฌดํ•œ์ƒ์‚ฌ ํŠน์ง‘ํŽธ! ํ‡ด๊ทผ... ํ• ๋ ค๋ฉด ํ•˜์‹œ๋˜๊ฐ€์š”.
												</a>
											</h3>
											
											<p><a href="channel.html" class="channel-link">MBC ์—”ํ„ฐํ…Œ์ด๋จผํŠธ</a></p>
											
											<div class="txt-bottom">
												<span class="count">์กฐํšŒ์ˆ˜ 71๋งŒํšŒ</span>
												<span class="date">6๊ฐœ์›” ์ „</span>
											</div>
										</div>
									</li>
									<li>
										<div class="channel-thumbnail">
											<a href="#">
												<img src="https://via.placeholder.com/210x118">
												<span class="time">00:20</span>
											</a>
										</div>

										<div class="channel-txt-wrap">
											<h3>
												<a href="#" class="title-link">
													[๋ฌดํ•œ๋„์ „] ๋ฌดํ•œ์ƒ์‚ฌ ํŠน์ง‘ํŽธ! ํ‡ด๊ทผ... ํ• ๋ ค๋ฉด ํ•˜์‹œ๋˜๊ฐ€์š”.
												</a>
											</h3>
											
											<p><a href="channel.html" class="channel-link">MBC ์—”ํ„ฐํ…Œ์ด๋จผํŠธ</a></p>
											
											<div class="txt-bottom">
												<span class="count">์กฐํšŒ์ˆ˜ 71๋งŒํšŒ</span>
												<span class="date">6๊ฐœ์›” ์ „</span>
											</div>
										</div>
									</li>
									<li>
										<div class="channel-thumbnail">
											<a href="#">
												<img src="https://via.placeholder.com/210x118">
												<span class="time">00:20</span>
											</a>
										</div>

										<div class="channel-txt-wrap">
											<h3>
												<a href="#" class="title-link">
													[๋ฌดํ•œ๋„์ „] ๋ฌดํ•œ์ƒ์‚ฌ ํŠน์ง‘ํŽธ! ํ‡ด๊ทผ... ํ• ๋ ค๋ฉด ํ•˜์‹œ๋˜๊ฐ€์š”.
												</a>
											</h3>
											
											<p><a href="channel.html" class="channel-link">MBC ์—”ํ„ฐํ…Œ์ด๋จผํŠธ</a></p>
											
											<div class="txt-bottom">
												<span class="count">์กฐํšŒ์ˆ˜ 71๋งŒํšŒ</span>
												<span class="date">6๊ฐœ์›” ์ „</span>
											</div>
										</div>
									</li>

								</ul>
							</div>
							
						</div>




					</div>
				</div>


			</div>

		</main>










		
	</div>




</body>
</html>

style.cssโœโœ

/* ์œ ํŠœ๋ธŒ ์ฑ„๋„ ํŽ˜์ด์ง€ */
.channel-container {
	width: 1284px;
	margin: 0 auto;
}

#youtube-channel-content #channel-banner {
	width: 100%;
	height: 250px;
	background-color: darkblue;
}

#youtube-channel-content #channel-header {
	padding: 16px 0 4px;
	background-color: rgba(24, 24, 24, 1);
}

#youtube-channel-content #channel-header .channel-profile-wrap {
	
}

#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile {
	
}

#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile img {
	width: 80px;	
	height: 80px;
	border-radius: 50%;

	margin-right: 24px;
}

#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile .txt-wrap {
	
}

#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile .txt-wrap h2 {
	font-size: 25px;
	color: #ffffff;
	font-weight: 500;
}

#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile .txt-wrap p {
	color: #aaaaaa;
	font-size: 14px;
	margin-top: 5px;
}

#youtube-channel-content #channel-header .channel-profile-wrap .btn-subscribe {
	padding: 10px 20px;
	background-color: red;
	border-radius: 5px;

	color: #ffffff;
	font-size: 16px;
}

#channel-nav {
	background-color: rgba(24, 24, 24, 1);
}

#channel-nav ul {
	
}

#channel-nav li {
	
}

#channel-nav li a {
	display: block;
	height: 47px;

	padding: 0 32px;

	line-height: 47px;

	border-bottom: solid 2px transparent;
	color: #aaaaaa;
}

#channel-nav li a:hover {
	color: #ffffff;
}

#channel-nav li a.active {
	border-bottom: solid 2px #ffffff;
	color: #ffffff;
}


#channel-recent {
	align-items: flex-start;
	padding: 24px 0;

	border-bottom: solid 1px grey;
}

#channel-recent .thumbnail-wrap{
	position: relative;
	width: 246px;
	height: 148px;
	margin-right: 16px;
}

#channel-recent .thumbnail-wrap img {
	width: 100%;
	height: 100%;
}

#channel-recent .thumbnail-wrap .mark {
	position: absolute;
	background-color: red;
	font-size: 12px;
	color: #ffffff;
	padding: 4px 8px 2px;
	border-radius: 5px;

	right: 4px;
	bottom: 4px;
}

#channel-recent .txt-wrap {
	width: 600px;
}

#channel-recent .txt-wrap h2 {
	font-size: 24px;	
	color: #ffffff;
	font-weight: 400;
}

#channel-recent .txt-wrap .channel {
	font-size: 14px;
	color: #aaaaaa;
}

#channel-recent .txt-wrap .description{
	padding-top: 8px;
	font-size: 14px;
	color: #aaaaaa;
	line-height: 1.45;
}




.channel-playlists-section {
	padding: 24px 0;
	border-bottom: solid 1px grey;
}

.channel-playlists-section .playlists-header {
	
}

.channel-playlists-section .playlists-header h3 {
	font-size: 18px;
	color: #ffffff;
	margin-right: 20px;
}

.channel-playlists-section .playlists-header .play-wrap {
	width: 85px;
}

.channel-playlists-section .playlists-header .play-wrap .icon-play {
	width: 24px;
	height: 24px;
	background-color: #ffffff;
}

.channel-playlists-section .playlists-header .play-wrap .play-link {
	font-size: 14px;
	color: #aaaaaa;
	margin-left: 8px;
}

.channel-playlists-section .playlists-body {
	margin-top: 24px;
}

.channel-playlists-section .playlists-body ul {

}

.channel-playlists-section .playlists-body li {
	width: 210px;
}

.channel-playlists-section .playlists-body li .channel-thumbnail {
	width: 100%;
	height: 118px;
}

.channel-playlists-section .playlists-body li .channel-thumbnail a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.channel-playlists-section .playlists-body li .channel-thumbnail img {
	width: 100%;
	height: 100%;
}

.channel-playlists-section .playlists-body li .channel-thumbnail .time {
	position: absolute;

	font-size: 12px;
	color: #ffffff;
	background-color: #000000;
	padding: 4px 8px 2px;
	border-radius: 5px;

	bottom: 4px;
	right: 4px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap {
	margin-top: 8px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap h3 {
	font-size: 15px;
    margin-bottom: 6px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap h3 a {
	color: #ffffff;
}

.channel-playlists-section .playlists-body .channel-txt-wrap p {
	font-size: 12px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap p a {
	color: #aaaaaa;
}

.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom {

}

.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom .count,
.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom .date {
	font-size: 12px;
    color: #aaaaaa;	
}






/* ํƒ์ƒ‰ ํŽ˜์ด์ง€ */
.explore-container {
	width: 1280px;
	margin: 0 auto;
}

#explore-nav {
	padding: 12px 0 8px;
}

#explore-nav ul {
	
}

#explore-nav li {
	overflow: hidden;
	
	width: 210px;
	height: 116px;
}

#explore-nav li a {
	display: block;
	width: 100%;
	height: 100%;
	background-color: grey;
	border-radius: 5px;

	padding: 20px;
}

#explore-nav li a:hover {
	background-color: darkgrey;
}

#explore-nav li .icon {
	display: block;
	width: 32px;
	height: 32px;
	background-color: red;

	margin-bottom: 25px;
}

#explore-nav li span {
	color: #ffffff;
	font-size: 16px;
}



#popular-section {
	margin-top: 24px;
}

#popular-section h2 {
	font-size: 20px;
	color: #ffffff;
}

#popular-section ul {
	margin-top: 24px;
}

#popular-section li {
	margin-bottom: 16px;
}

#popular-section a {
	align-items: flex-start;
}

#popular-section li .image-wrap {
	position: relative;
	width: 246px;
	height: 148px;
	margin-right: 16px;
}

#popular-section li .image-wrap img {
	width: 100%;
	height: 100%;
}

#popular-section li .image-wrap .time {
	position: absolute;

	padding: 4px 8px 2px;
	background-color: #212121;
	color: #ffffff;
	font-size: 12px;
	border-radius: 5px;

	bottom: 4px;
	right: 4px;
}

#popular-section li .txt-wrap {
	width: 600px;
}

#popular-section li .txt-wrap h3 {
	font-size: 20px;	
	color: #ffffff;
}

#popular-section li .txt-wrap .video-info {
	color: #aaaaaa;
	font-size: 14px;
}

#popular-section li .txt-wrap .video-info span:after {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	background-color: #aaaaaa;
	border-radius: 50%;

	margin: 6px 4px 0 8px;
    vertical-align: top;
}

#popular-section li .txt-wrap .video-info span:last-child:after {
	content: none;
}

#popular-section li .txt-wrap .video-info .channel {
	
}

#popular-section li .txt-wrap .video-info .count {
	
}

#popular-section li .txt-wrap .video-info .date {
	
}

#popular-section li .txt-wrap .description {
	padding-top: 8px;

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

๊ฒฐ๊ณผ๋ฌผ ๐Ÿš€


profile
hae.log
์ด์ „ ํฌ์ŠคํŠธ

2021.08. 30 youtube css(3) ๐ŸŒด

๋‹ค์Œ ํฌ์ŠคํŠธ

JavaScript ๊ฐœ๋…๐ŸŒฑ

0๊ฐœ์˜ ๋Œ“๊ธ€