45(0830)

쩜·2021년 8월 30일
0
word-break: keep-all;

AI school

목록 보기
44/49

38강 유튜브 2

학습 내용

html

<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="#" 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>

css

#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 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;
}

html

<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>

css

#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;
}

html

<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>

html

<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>YOUTUBE 더보기</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>

html

<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>&copy; 2021 Google LLC</p>
						<p>CEO: 선다 피차이</p>
						<p>주소: 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA.</p>
						<p>전화: 080-822-1450(무료)</p>
					</div>
				</footer>

css

#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;
}

word-break: keep-all;

단어를 기준으로 줄바꿈

html

<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="#" 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>

css

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

#youtube-main-content ul {
	align-items: 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 .channel-link {
	color: #aaaaaa;
}

#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;
}

#youtube-top-nav {
	z-index: 99999;
}

#youtube-main {
	background-color: #212121;
}

#youtube-main-content ul {
	align-content: flex-start;
}

어려웠던 점 & 해결 방법
main 부분을 작성할 때 나눠주는 게 헷갈렸다.

학습 소감
오류를 찾는 것은 제법 익숙해진 것 같아서 뿌듯했다. 하지만 처음부터 도면을 만들고 배치하는 것이 아직은 낯설다.

profile
쩜
이전 포스트

44(0826-0827)

다음 포스트

46(0831)

0개의 댓글

관련 채용 정보

Backend Engineer (Core 스냅인플루언서개발팀)
무신사 테크에서 패션 SNS 스냅과 인플루언서 플랫폼을 개발하며 개인화된 경험을 제공합니다. 클라우드와 Java/Kotlin 기술을 활용한 개발과 효율적인 업무 환경으로 도전할 개발자를 기다립니다.
Back-end Engineer
종합 라이프스킬 플랫폼 숨고에서 백엔드 엔지니어를 모집합니다. Python을 활용해 안정적인 백엔드 시스템을 운영하며, 함께 성장하는 문화를 만들어갈 기회를 놓치지 마세요!
[재택근무] 프론트엔드 개발자 (2년 이상)
퀸라이브는 데이터 기반의 폐쇄형 라이브커머스를 운영하며, React 및 Next.js로 사용자 경험을 높이는 프론트엔드 개발자를 찾고 있습니다. 자유롭게 아이디어를 공유할 수 있는 문화 속에서 함께 성장하며 새로운 기회를 얻어보세요.
Powered by GraphCDN, the GraphQL CDN