8월 23일 Velog

학습한 내용

Twitch 실습 #3

https://www.twitch.tv/

4. Content

구조

[html]

		<div id="content">

			<div class="content_banner"></div>
			<div class="video_section"></div>
            
		</div>

[css]

#content {
	position: absolute;

	top: 50px;
	left: 240px;
	right: 0;	
	bottom: 0;

	overflow-y: overlay;
	/*overflow-y: auto;*/

	padding: 0 30px
}

content 영역 배치작업
: top(nav 높이값), left(left area 너비값), right(0), bottom(0) 을 적용해서 nav, left area 영역을 제외한 모든 영역을 차지한다.
overflow-y
: 세로 스크롤을 content 영역에만 적용하고자 할 때 사용
: overlay, auto 둘 다 같은 결과물로 나타난다.
overflow-y 적용하지 않았을 때

overflow-y 적용했을 때

(1) content banner

[html]

			<div class="content_banner">
				<div class="layer">
					<div class="txt_wrap">
						<h2>Hello</h2>
						<p>Nice to meet you</p>
					</div>
				</div>
			</div>

[css]

#content .content_banner {
	position: relative;

	width: 100%;
	height: 350px;

	margin-top: 20px;
	margin-bottom: 30px;

	background: url(../img/aurora.jpg) no-repeat bottom;
	background-size: cover;
}

.content_banner .layer {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);

	top: 0;
	left: 0;
}

.content_banner .layer .txt_wrap {
	position: absolute;

	right: 100px;
	top: 60px;
}

.content_banner .layer .txt_wrap h2 {
	color: #ffffff;
	opacity: 0.8;
	margin-bottom: 5px;
}

.content_banner .layer .txt_wrap p {
	color: #ffffff;
	opacity: 0.8;
}

background 속성
: 백그라운드 이미지를 적용할 때 사용하는 속성값들을 순서에 상관없이 한 줄로 나열하여 적용할 수 있다.
: 일반적으로 컨텐츠가 중앙에 몰리게 디자인된 img를 사용한다.
background-size: cover;
: 자동으로 이미지가 확대/축소된다.
: 브라우저 변화에 따라 원래 비율 유지하며 자연스러운 효과를 나타낸다.

tag 기본값

[css]

#content .tag_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;

	margin-top: 8px;
}

#content .tag_wrap .tag {
	padding: 0 8px;
	height: 20px;
	background-color: rgba(0, 0, 0, 0.05);
	border-radius: 9000px;	
	
	font-size: 12px;
	font-weight: 600;
	color: #000000b3;

	line-height: 20px;

	margin-right: 5px;
}

#content .tag_wrap .tag:last-child {
	margin-right: 0;
}

title 기본값

[css]

#content .title_wrap {
	padding-bottom: 10px;
}

#content .title_wrap h2 {
	font-size: 18px;
	font-weight: 600;
}

text wrap 기본값

[css]

#content .txt_wrap h3 {
	font-size: 14px;
	font-weight: 600;

	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	margin-bottom: 3px;
}

#content .txt_wrap .source,
#content .txt_wrap .game {
	font-size: 13px;
	color: #53535f;

	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
    white-space: nowrap;
}

(2) video section

[html]

			<div class="video_section">
				<div class="title_wrap">
					<h2>취향 저격 생방송 채널</h2>
				</div>

				<ul>
					<li>
						<a href="#">
							<div class="img_wrap">
								<img src="https://via.placeholder.com/302x170">
								<span class="mark">생방송</span>
								<span class="count">시청자 1.5만명</span>
							</div>

							<div class="video_info">
								<img src="https://via.placeholder.com/40">
								<div class="txt_wrap">
									<h3>침펄풍 51가지 게임</h3>
									<p class="source">침착맨 (zilioner)</p>
									<p class="game">Clubhouse Games: 51 Worldwide Classics</p>
									<div class="tag_wrap">
										<span class="tag">한국어</span>
									</div>
								</div>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="img_wrap">
								<img src="https://via.placeholder.com/302x170">
								<span class="mark">생방송</span>
								<span class="count">시청자 2,063명</span>
							</div>

							<div class="video_info">
								<img src="https://via.placeholder.com/40">
								<div class="txt_wrap">
									<h3>Playoffs Round2 Match1 | GEN vs NS | 2021 LCK CL Summer</h3>
									<p class="source">LCK_Korea</p>
									<p class="game">League of Legends</p>
									<div class="tag_wrap">
										<span class="tag">e스포츠</span>
										<span class="tag">한국어</span>
									</div>
								</div>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="img_wrap">
								<img src="https://via.placeholder.com/302x170">
								<span class="mark">생방송</span>
								<span class="count">시청자 5,111명</span>
							</div>

							<div class="video_info">
								<img src="https://via.placeholder.com/40">
								<div class="txt_wrap">
									<h3>쫀득) 와나나 차 토크 4시 / 2부 디붕이 강화 / 3부 군단장 w.사과몽 </h3>
									<p class="source">쫀득이_ (pjs9073)</p>
									<p class="game">LOST ARK</p>
									<div class="tag_wrap">
										<span class="tag">한국어</span>
									</div>
								</div>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="img_wrap">
								<img src="https://via.placeholder.com/302x170">
								<span class="mark">생방송</span>
								<span class="count">시청자 5,877명</span>
							</div>

							<div class="video_info">
								<img src="https://via.placeholder.com/40">
								<div class="txt_wrap">
									<h3>오늘 못깨면 난 사람아님 ㅇㅅㅇ</h3>
									<p class="source">녹두로 (nokduro)</p>
									<p class="game">Jump King</p>
									<div class="tag_wrap">
										<span class="tag">한국어</span>
									</div>
								</div>
							</div>
						</a>
					</li>
				</ul>
			</div>

[css]

.video_section ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}

.video_section ul li {
	padding-bottom: 20px;
}

.video_section ul li a .img_wrap {
	position: relative;
	width: 302px;
	height: 170px;
}

.video_section .img_wrap img {
	width: 100%;
	height: 100%;
}

.video_section .img_wrap .mark {
	position: absolute;

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

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

	top: 10px;
	left: 10px;
}

.video_section .img_wrap .count {
	position: absolute;

	padding: 2px 4px;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 2px;

	font-size: 13px;
	color: #ffffff;

	left: 10px;
	bottom: 10px;
}

.video_section ul li a .video_info {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;

	margin-top: 10px;
}

.video_section .video_info img {
	width: 40px;
	height: 40px;
	border-radius: 50%;

	margin-right: 10px;
}

추가 수정 코드

[css]

.main_container {
	position: relative;

	width: 100%;
	height: 100%;
	min-width: 1340px;
}

min-width를 적용할 때 자식 영역(left_area, content 둘 다 3차원)의 너비값을 인식하기 위해 3차원 position과 height값 추가

추가로 학습한 내용

스크롤과 관련해 레이아웃이 틀어지는 것을 방지하는 코드

https://gromo.github.io/jquery.scrollbar/demo/basic.html

Author And Source

이 문제에 관하여(8월 23일 Velog), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ryuyoungseo8232/823Velog

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

8월 23일 Velog

Twitch 실습 #3

4. Content

구조

(1) content banner

tag 기본값

title 기본값

text wrap 기본값

(2) video section

추가 수정 코드

Author And Source

좋은 웹페이지 즐겨찾기