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

hae.logยท2021๋…„ 8์›” 30์ผ
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-main-content">
				<ul class="flex-align-between">
					<li>
						<div class="video-thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video-txt-wrap flex-align-start">
							<a href="#" class="image-link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<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>

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

		</main>


		
	</div>




</body>
</html>

style.cssโœ

/* ์™ผ์ชฝ ์‚ฌ์ด๋“œ ๋ฉ”๋‰ด  */
#youtube-left-content {
	position: absolute;
	width: 225px;
	height: 100%;
}

#youtube-left-content .nav-section {
	padding: 8px 0;
	border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}

#youtube-left-content .nav-section .nav-title-wrap {
	padding: 8px 24px;
}

#youtube-left-content .nav-section .nav-title-wrap h2 {
	color: #aaaaaa;
	font-size: 15px;
	font-weight: bold;
}

#youtube-left-content .nav-section .nav-body {

}

#youtube-left-content .nav-section .nav-body ul {
	
}

#youtube-left-content .nav-section .nav-body li {
	
}

#youtube-left-content .nav-section .nav-body li a {
	height: 40px;
	padding: 0 24px;
}

#youtube-left-content .nav-section .nav-body li .icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-color: #ffffff;
	margin-right: 24px;
}

#youtube-left-content .nav-section .nav-body li span {
	font-size: 13px;
	color: #ffffff;
}

#youtube-left-content .nav-section .nav-body .txt-wrap {
	padding: 0 24px;
}

#youtube-left-content .nav-section .nav-body .txt-wrap p {
	color: #ffffff;
	font-weight: 400;
	font-size: 13px;
}

#youtube-left-content .nav-section .nav-body .txt-wrap .btn-login {
	display: inline-block;

	border: solid 1px #3ea6ff;
    padding: 10px 12px 8px;
    font-size: 14px;
    color: #3ea6ff;

    margin-top: 12px;
}

#youtube-left-content #youtube-footer {
	padding-bottom: 150px;
}

#youtube-left-content #youtube-footer .txt-wrap {
	padding: 12px 24px 0;
}

#youtube-left-content #youtube-footer .txt-wrap a {
	margin-right: 8px;

	color: #aaaaaa;
	font-size: 12px;
	font-weight: 500;

	word-break: keep-all;
}

#youtube-left-content #youtube-footer .txt-wrap p {
	font-size: 12px;
	color: #717171;
	font-weight: 400;
}





/* ์œ ํŠœ๋ธŒ ๋ฉ”์ธ  */
#youtube-main {
	position: absolute;
	left: 240px;
	top: 56px;
	right: 0;
	bottom: 0;
	background-color: #212121;
}

#youtube-main-content {
	width: 100%;
	height: 100%;
	padding: 24px;
}

#youtube-main-content ul {
	align-items: flex-start;
	align-content: flex-start;
	width: 100%;
	height: 100%;
}

#youtube-main-content ul li {
	width: 24%;
	background-color: #212121;
	margin-bottom: 40px;
}

#youtube-main-content ul li .video-thumbnail {
	width: 100%;
}

#youtube-main-content ul li .video-thumbnail a {
	position: relative;
	display: block;
	width: 100%;
}

#youtube-main-content ul li .video-thumbnail img {
	width: 100%;
}

#youtube-main-content ul li .video-thumbnail .time {
	position: absolute;

	background-color: rgba(0, 0, 0, 0.8);
	font-size: 12px;
	color: #ffffff;

	padding: 3px 4px;

	bottom: 4px;
	right: 4px;
}

#youtube-main-content ul li .video-txt-wrap {
	align-items: flex-start;
	margin-top: 12px;
}

#youtube-main-content ul li .video-txt-wrap .image-link {
	display: block;
	width: 36px;
	height: 36px;

	margin-right: 12px;
}

#youtube-main-content ul li .video-txt-wrap .image-link img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

#youtube-main-content ul li .video-txt-wrap .txt {
	width: calc(100% - 48px);
}

#youtube-main-content ul li .video-txt-wrap .txt h3 {
	font-size: 15px;
	margin-bottom: 6px;
}

#youtube-main-content ul li .video-txt-wrap .txt h3 .title-link {
	color: #ffffff;
}

#youtube-main-content ul li .video-txt-wrap .txt p {
	font-size: 12px;
}

#youtube-main-content ul li .video-txt-wrap .txt p .channel-link {
	color: #aaaaaa;
}

#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom {

}

#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom .count,
#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom .date {
	font-size: 12px;
	color: #aaaaaa;
}

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

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

2021.08. 26 youtube css(2) ๐ŸŒด

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

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

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