Day 40. 트위치 왼쪽 영역

SUN·2021년 8월 20일

08월 20일

학습 내용

HTML

<div class="main-container">
	
	<div class="left-area">
		<div class="channel-wrap">
			<div class="channel-header">
				<h3>추천채널</h3>
				<i class="icon-arrow"></i>
			</div>
			<div class="channel-body">
				<ul>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/30px">
							<div class="txt-wrap">
								<h4>침착맨(chimchak)</h4>
								<span class="source">Just chatting</span>
							</div>
							<span class="count">10,000</span>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/30px">
							<div class="txt-wrap">
								<h4>침착맨(chimchak)</h4>
								<span class="source">Just chatting</span>
							</div>
							<span class="count">10,000</span>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/30px">
							<div class="txt-wrap">
								<h4>침착맨(chimchak)</h4>
								<span class="source">Just chatting</span>
							</div>
							<span class="count">10,000</span>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/30px">
							<div class="txt-wrap">
								<h4>침착맨(chimchak)</h4>
								<span class="source">Just chatting</span>
							</div>
							<span class="count">10,000</span>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/30px">
							<div class="txt-wrap">
								<h4>침착맨(chimchak)</h4>
								<span class="source">Just chatting</span>
							</div>
							<span class="count">10,000</span>
						</a>
					</li>
				</ul>
			</div>
		</div>

		<div class="join-wrap">
			<div class="txt-wrap">
				<h2><span class="font-purple">Twitch</span>커뮤니티와 함께 하세요!</h2>
				<p>어디서나 최고의 생방송을 즐겨보세요</p>
				<button type="button" class="btn-purple">회원가입</button>
			</div>
		</div>

		<div class="info-wrap">
			
			<p>상호명 : 동해물과 백두산이</p>
			<p>대표자명 : 마르고</p>
			<p>닳도록 하느님이 보우하사우리나라만세 무궁홧 삼천리 </p>

			<ul>
				<li><a href="#">지원팀에 문의</a></li>
				<li><a href="#">판매약관</a></li>
				<li><a href="#">사업자 정보</a></li>
			</ul>

		</div>
	</div>

CSS

.main-container {

position: relative;
height: 100%;
/ 포지션과 높이를 설정하여 컨텐츠가 1340이하로
줄면 변화 없음 /
width: 100%;
min-width: 1340px;
/ 창을 줄였을 때 최소크기 - 코드가 깨지지않음 /

	/*padding-top: 50px;*/}


.left-area {
	position: fixed;
	width: 240px;

	background-color: #202024;

	top: 50px;
	bottom: 0;
	left: 0;
	/* 브라우저의 길이에 따라 가변적으로 변경 */

	overflow-y: auto;
	/* 전체가 아닌 한 구역에서만 세로 스크롤을 준다. */}



.left-area .channel-wrap .channel-header {
	padding: 10px;

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

.left-area .channel-wrap .channel-header h3 {
	font-size: 15px;}

.left-area .channel-wrap .channel-header .icon-arrow {
	display: inline-block;
	width: 30px;
	height: 30px;
	background-color: #ffffff;}



.left-area .channel-wrap .channel-body li a {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;

	padding: 5px 10px;}

.left-area .channel-wrap .channel-body li img {
	width: 30px;
	height: 30px;
	border-radius: 50%;}

.left-area .channel-wrap .channel-body li .txt-wrap {
	width: 110px;
	/* 스크롤이 생기면서 간격이 좁아지기때문에 조금 적게 설정 */
	margin-left: 10px;}

.left-area .channel-wrap .channel-body li .txt-wrap h4 {
	font-size: 13px;}

.left-area .channel-wrap .channel-body li .txt-wrap .source {
	font-size: 12px;
	color: grey;}

.left-area .channel-wrap .channel-body li .count {
	display: block;
	/* width값을 주기위해 사용 */
	width: 53px;
	font-size: 12px;}

.left-area .channel-wrap .channel-body li .count:before {
	position: relative;

	content: '';
	width: 10px;
	height: 10px;
	background-color: red;
	border-radius: 50%;
	display: inline-block;

	margin-right: 5px;
	top: 1px;}


.left-area .join-wrap {
	margin: 10px;}

.left-area .join-wrap .txt-wrap {
	padding: 20px;

	background-color: #18181a;}

.left-area .join-wrap .txt-wrap h2 {
	font-size: 24px;}


.left-area .join-wrap .txt-wrap p {
	font-size: 13px;

	margin-top: 10px;}

.left-area .join-wrap .txt-wrap .btn-purple {
	margin-top: 10px;

	width: 53px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	font-size: 12px;
	border-radius: 5px;}

.left-area .info-wrap {
	font-size: 12px;
	margin: 0 10px 10px 10px;}

.left-area .info-wrap p {
	color: grey;}

.left-area .info-wrap ul {
	margin-top: 10px;

	display: flex;
	flex-wrap: wrap;
	align-items: center;}


.left-area .info-wrap ul li a {
	color: grey;}

.left-area .info-wrap ul li a:after {
	content: '';
	width: 2px;
	height: 10px;
	background-color: grey;
	display: inline-block;
	margin: 0 5px;}

.left-area .info-wrap ul li:last-child a:after {
	content: none;}