2021.07.09 일지
1.팀별 프로젝트 진행 상황 및 본인 업무
IA를 활용해서 대략적인 구상과 해당 플랫폼에서 구현하기 어렵거나 조건이 필요한 부분 논의
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/30x30">
<div class="txt_wrap">
<h4>기발자(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/30x30">
<div class="txt_wrap">
<h4>기발자(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/30x30">
<div class="txt_wrap">
<h4>기발자(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/30x30">
<div class="txt_wrap">
<h4>기발자(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/30x30">
<div class="txt_wrap">
<h4>기발자(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/30x30">
<div class="txt_wrap">
<h4>기발자(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/30x30">
<div class="txt_wrap">
<h4>기발자(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/30x30">
<div class="txt_wrap">
<h4>기발자(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/30x30">
<div class="txt_wrap">
<h4>기발자(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/30x30">
<div class="txt_wrap">
<h4>기발자(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>
<div class="content">
</div>
</div>#top_nav {
min-width: 1340px; /* 브라우저 사이즈를 줄였을때 레이아웃이 틀어지는걸 방지 */
}
.main_container {
width: 100%;
min-width: 1340px;
/*padding-top: 50px;*/
}
.left_area {
position: fixed;
width: 240px;
background-color: #202024;
overflow-y: auto;
top: 50px;
left: 0;
bottom: 0;
/* 순수 3차원적인 positon을 사용해서 높이를 브라우저 크기에 따라 가변적으로 변하는 코드 */
}
.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 a {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
padding: 5px 10px;
}
.left_area .channel_wrap .channel_body a img {
width: 30px;
height: 30px;
border-radius: 50%;
}
.left_area .channel_wrap .channel_body a .txt_wrap {
width: 110px;
font-size: 0;
margin-left: 10px;
}
.left_area .channel_wrap .channel_body a .txt_wrap h4 {
font-size: 13px;
width: 105px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.left_area .channel_wrap .channel_body a .txt_wrap .source {
font-size: 11px;
color: grey;
}
.left_area .channel_wrap .channel_body a .count {
display: block;
width: 53px;
font-size: 11px;
}
.left_area .channel_wrap .channel_body a .count:before {
position: relative;
display: inline-block;
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: 20px;
}
.left_area .join_wrap .txt_wrap p {
font-size: 13px;
margin-top: 10px;
}
.left_area .join_wrap .txt_wrap .btn_purple {
width: 53px;
height: 30px;
font-size: 12px;
text-align: center;
line-height: 30px;
border-radius: 5px;
margin-top: 10px;
}
.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 ul li {
}
.left_area .info_wrap ul li a {
font-size: 11px;
color: grey;
}
.left_area .info_wrap ul li a:after {
display: inline-block;
content: "";
width: 2px;
height: 12px;
background-color: grey;
margin: 0 5px;
}
.left_area .info_wrap ul li:last-child a:after {
content: none;
}
3. 어려웠던 점과 해결방법
크게 어려웠던 점은 아니었지만 사용하려는 플랫폼의 기능 부족으로 개발에 약간 차질이 생긴 부분
유로 이용으로 해결이 가능해 1개월로 우선 개발 및 사용을 해보고 필요하면 추가적으로 유료 업그레이드 연장하는 방향으로 진행
4. 아쉬웠던 점
월래 방식은 플랫폼 없이 부트스트랩 + 배운것을 이용해서 사이트 구현을 할 생각이었지만 실제로 사용할 사이트를 만들다 보니 게시판 이런게 필수로 들어가야 해서 어쩔수 없이 플랫폼의 힘을 빌려서 개발해야 하는데 아쉬웠습니다.
개발자를 꿈꾸는 이상화입니다.