오늘의 강의 내용
* 트위치 왼쪽부분 카피캣
.png)
.png)
카피캣 영역인 트위치 왼쪽부분
.png)
.png)
트위치 왼쪽부분 카피캣 완료된 모습
<!-- twitch.html언어 -->
<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) 기발자(gi_balja) 기발자(gi_balja)</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/30">
<div class="txt_wrap">
<h4>기발자(gi_balja) 기발자(gi_balja) 기발자(gi_balja)</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/30">
<div class="txt_wrap">
<h4>기발자(gi_balja) 기발자(gi_balja) 기발자(gi_balja)</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/30">
<div class="txt_wrap">
<h4>기발자(gi_balja) 기발자(gi_balja) 기발자(gi_balja)</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/30">
<div class="txt_wrap">
<h4>기발자(gi_balja) 기발자(gi_balja) 기발자(gi_balja)</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/30">
<div class="txt_wrap">
<h4>기발자(gi_balja) 기발자(gi_balja) 기발자(gi_balja)</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/30">
<div class="txt_wrap">
<h4>기발자(gi_balja) 기발자(gi_balja) 기발자(gi_balja)</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/30">
<div class="txt_wrap">
<h4>기발자(gi_balja) 기발자(gi_balja) 기발자(gi_balja)</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/30">
<div class="txt_wrap">
<h4>기발자(gi_balja) 기발자(gi_balja) 기발자(gi_balja)</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/30">
<div class="txt_wrap">
<h4>기발자(gi_balja) 기발자(gi_balja) 기발자(gi_balja)</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>
<!-- style.css언어 -->
/* 왼쪽 영역 */
.left_area {
position: fixed;
width: 240px;
background-color: #202024;
top: 50px;
bottom: 0;
left: 0;
overflow-y: auto;
}
.left_area .channel_wrap {
}
.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 {
display: block;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.left_area .channel_wrap .channel_body .txt_wrap .source {
font-size: 12px;
color: gray;
}
.left_area .channel_wrap .channel_body .count {
display: block;
width: 53px;
font-size: 12px;
}
.left_area .channel_wrap .channel_body .count:before {
display: inline-block;
position: relative;
content: '';
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
margin-right: 5px;
top: 1px;
}
.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;
}
.left_area .info_wrap {
font-size: 12px;
margin: 0 10px 10px 10px;
}
.left_area .info_wrap p {
color: gray;
}
.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: gray;
}
.left_area .info_wrap li a:after {
display: inline-block;
position: relative;
content: '';
width: 2px;
height: 10px;
background-color: gray;
margin: 0 5px;
}
.left_area .info_wrap li:last-child a:after {
content: none;
}- 실무tip
항상 어떤 영역을 브라우저 사이즈에 상관없이 full height를 유지하는 법
top: 50px; //임의 의 값을 준다
bottom: 0; //bottom 값을 0을 주어 늘려준다 (늘려지는 현상은 순수 3차원의 영역에서만 일어난다.강의를 끝난후 소감
어떠한 영역을 가변값으로 크기를 조절하는 방식을 배워, 응용하는법을 공부해야겠다.
힘든점, 문제점
딱히 이번강의에 힘든점은 없었다.
개선방안
주말동안 조금 타이트하게 연습을 진행하여 좀더 자연스럽게 코드작성을 하게끔 키워야겠다.
i will be the best