210820 개발일지

1) 학습한 내용

국내외 사이트 카피캣 (트위치 2편)

> 트위치 왼쪽 영역

<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/30">
<div class="txt-wrap">
<h4>기발자(gi_balja)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li> x 10
</ul>
</div>
</div>

.left-area .channel-wrap .channel-header 
	{display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 10px;}

.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 {}

.left-area .channel-wrap .channel-body ul {}

.left-area .channel-wrap .channel-body li {}

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

	padding: 5px 10px;}

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

.left-area .channel-wrap .channel-body .txt-wrap 
	{width: 110px;
	margin-left: 10px;}

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

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

.left-area .channel-wrap .channel-body .count 
	{display: block;
	width: 53px;
	font-size: 12px;}

.left-area .channel-wrap .channel-body .count:before 
	{content: '';
	position: relative;
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: red;
	border-radius: 50%;

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

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

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

.left-area .join-wrap .txt-wrap 
	{background-color: #18181a;
	padding: 20px;}

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

.left-area .join-wrap .txt-wrap h2 span{}

.left-area .join-wrap .txt-wrap p 
	{margin-top: 10px;
	font-size: 13px;}

.left-area .join-wrap .txt-wrap .btn-purple 
	{width: 53px;
    height: 30px;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    font-size: 12px;

	margin-top: 10px;}

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

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

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

.left-area .info-wrap ul 
	{display: flex;
	flex-wrap: wrap;
	align-items: center;

	margin-top: 10px;}

.left-area .info-wrap li {}

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

.left-area .info-wrap li a:after 
	{content: '';
	position: relative;
	display: inline-block;
	width: 2px;
	height: 10px;
	background-color: grey;

	margin: 0 5px;}

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

2)학습한 내용 중 어려웠던 점 또는 해결못한 것들

쉽게 해나갔다.

3)해결방법 작성

열심히 강의 듣기

4)학습 소감

8월 3째주가 벌써 끝났다.
열심히 해나가니 뿌듯하긴 하다