2021.07.13 일지
1. 팀별 프로젝트 진행 상황 및 본인 업무
사용하려는 개발도구의 유료 관리자 계정을 받았고 그 계정을 통해서 어떤 방식으로 개발을 해나갈지 구상 및 논의
2. 오늘 강의를 통해 프로젝트에 적용한 부분
[트위치 컨텐츠 부분]
<div class="video_section">
<div class="title_wrap">
<h2>추천 <span class="font_purple">Just Chatting</span> 채널</h2>
</div>
<div class="video_wrap">
<ul>
<li>
<a href="#">
<div class="image_wrap">
<img src="https://via.placeholder.com/333x186">
<span class="mark">생방송</span>
</div>
<div class="video_bottom">
<img src="https://via.placeholder.com/40x40" class="thumbnail">
<div class="txt_wrap">
<h3>2021 LCK Summer Split</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>
<span class="tag">독일어</span>
<span class="tag">후원열차</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image_wrap">
<img src="https://via.placeholder.com/333x186">
<span class="mark">생방송</span>
</div>
<div class="video_bottom">
<img src="https://via.placeholder.com/40x40" class="thumbnail">
<div class="txt_wrap">
<h3>2021 LCK Summer Split</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>
<span class="tag">독일어</span>
<span class="tag">후원열차</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image_wrap">
<img src="https://via.placeholder.com/333x186">
<span class="mark">생방송</span>
</div>
<div class="video_bottom">
<img src="https://via.placeholder.com/40x40" class="thumbnail">
<div class="txt_wrap">
<h3>2021 LCK Summer Split</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>
<span class="tag">독일어</span>
<span class="tag">후원열차</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<button type="button" class="btn_more font_purple">더보기</button>
</div>
<div class="video_section">
<div class="title_wrap">
<h2>모두의 후원 열차에 탑승해 주세요!</h2>
</div>
<div class="video_wrap">
<ul>
<li>
<a href="#">
<div class="image_wrap">
<img src="https://via.placeholder.com/333x186">
<span class="mark">생방송</span>
</div>
<div class="video_bottom">
<img src="https://via.placeholder.com/40x40" class="thumbnail">
<div class="txt_wrap">
<h3>2021 LCK Summer Split</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>
<span class="tag">독일어</span>
<span class="tag">후원열차</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image_wrap">
<img src="https://via.placeholder.com/333x186">
<span class="mark">생방송</span>
</div>
<div class="video_bottom">
<img src="https://via.placeholder.com/40x40" class="thumbnail">
<div class="txt_wrap">
<h3>2021 LCK Summer Split</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>
<span class="tag">독일어</span>
<span class="tag">후원열차</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image_wrap">
<img src="https://via.placeholder.com/333x186">
<span class="mark">생방송</span>
</div>
<div class="video_bottom">
<img src="https://via.placeholder.com/40x40" class="thumbnail">
<div class="txt_wrap">
<h3>2021 LCK Summer Split</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>
<span class="tag">독일어</span>
<span class="tag">후원열차</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<button type="button" class="btn_more font_purple">더보기</button>
</div>
<div class="video_section">
<div class="title_wrap">
<h2>추천 <span class="font_purple">League of Legends</span> 채널</h2>
</div>
<div class="video_wrap">
<ul>
<li>
<a href="#">
<div class="image_wrap">
<img src="https://via.placeholder.com/333x186">
<span class="mark">생방송</span>
</div>
<div class="video_bottom">
<img src="https://via.placeholder.com/40x40" class="thumbnail">
<div class="txt_wrap">
<h3>2021 LCK Summer Split</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>
<span class="tag">독일어</span>
<span class="tag">후원열차</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image_wrap">
<img src="https://via.placeholder.com/333x186">
<span class="mark">생방송</span>
</div>
<div class="video_bottom">
<img src="https://via.placeholder.com/40x40" class="thumbnail">
<div class="txt_wrap">
<h3>2021 LCK Summer Split</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>
<span class="tag">독일어</span>
<span class="tag">후원열차</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image_wrap">
<img src="https://via.placeholder.com/333x186">
<span class="mark">생방송</span>
</div>
<div class="video_bottom">
<img src="https://via.placeholder.com/40x40" class="thumbnail">
<div class="txt_wrap">
<h3>2021 LCK Summer Split</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>
<span class="tag">독일어</span>
<span class="tag">후원열차</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<button type="button" class="btn_more font_purple">더보기</button>
</div>
<div class="video_section">
<div class="title_wrap">
<h2>추천 <span class="font_purple">StarCraft</span> 채널</h2>
</div>
<div class="video_wrap">
<ul>
<li>
<a href="#">
<div class="image_wrap">
<img src="https://via.placeholder.com/333x186">
<span class="mark">생방송</span>
</div>
<div class="video_bottom">
<img src="https://via.placeholder.com/40x40" class="thumbnail">
<div class="txt_wrap">
<h3>2021 LCK Summer Split</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>
<span class="tag">독일어</span>
<span class="tag">후원열차</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image_wrap">
<img src="https://via.placeholder.com/333x186">
<span class="mark">생방송</span>
</div>
<div class="video_bottom">
<img src="https://via.placeholder.com/40x40" class="thumbnail">
<div class="txt_wrap">
<h3>2021 LCK Summer Split</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>
<span class="tag">독일어</span>
<span class="tag">후원열차</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image_wrap">
<img src="https://via.placeholder.com/333x186">
<span class="mark">생방송</span>
</div>
<div class="video_bottom">
<img src="https://via.placeholder.com/40x40" class="thumbnail">
<div class="txt_wrap">
<h3>2021 LCK Summer Split</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>
<span class="tag">독일어</span>
<span class="tag">후원열차</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<button type="button" class="btn_more font_purple">더보기</button>
</div>
<div class="category_section">
<div class="title_wrap">
<h2>취향 저격 <span class="font_purple">카테고리</span></h2>
</div>
<div class="category_wrap">
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt_wrap">
<h3>Apex Legends</h3>
<p class="count">시청자 4.1만명</p>
<div class="tag_wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt_wrap">
<h3>Apex Legends</h3>
<p class="count">시청자 4.1만명</p>
<div class="tag_wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt_wrap">
<h3>Apex Legends</h3>
<p class="count">시청자 4.1만명</p>
<div class="tag_wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt_wrap">
<h3>Apex Legends</h3>
<p class="count">시청자 4.1만명</p>
<div class="tag_wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt_wrap">
<h3>Apex Legends</h3>
<p class="count">시청자 4.1만명</p>
<div class="tag_wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt_wrap">
<h3>Apex Legends</h3>
<p class="count">시청자 4.1만명</p>
<div class="tag_wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt_wrap">
<h3>Apex Legends</h3>
<p class="count">시청자 4.1만명</p>
<div class="tag_wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt_wrap">
<h3>Apex Legends</h3>
<p class="count">시청자 4.1만명</p>
<div class="tag_wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<footer>
<div class="txt_wrap">
<p>상호명: 동해물과 백두산이 마르고 닳도록</p>
<p>상호명: 동해물과 백두산이 마르고 닳도록</p>
<p>상호명: 동해물과 백두산이 마르고 닳도록</p>
<p>상호명: 동해물과 백두산이 마르고 닳도록</p>
</div>
<div class="footer_bottom">
<ul>
<li><a href="#">지원팀에 문의</a></li>
<li><a href="#">판매약관</a></li>
<li><a href="#">사업자 정보</a></li>
</ul>
</div>
</footer>.video_section .btn_more {
position: absolute;
width: 100px;
height: 30px;
background-color: #0e0e10;
text-align: center;
line-height: 30px;
cursor: pointer;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
}
.category_section {
padding-top: 60px;
padding-bottom: 40px;
}
.category_section .title_wrap {
padding-bottom: 10px;
}
.category_section .title_wrap h2 {
font-size: 20px;
}
.category_section .category_wrap ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.category_section .category_wrap li {
width: 152px;
}
.category_section .category_wrap img {
width: 152px;
height: 203px;
margin-bottom: 10px;
}
.category_section .category_wrap .txt_wrap .count {
font-size: 14px;
color: grey;
}
footer {
width: 100%;
padding: 80px 0 150px;
}
footer .txt_wrap {
text-align: center;
}
footer .txt_wrap p {
font-size: 14px;
}
footer .footer_bottom {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 20px;
}
footer ul {
display: flex;
flex-wrap: wrap;
align-items: center;
}
footer ul li a {
font-size: 14px;
color: grey;
}
footer ul li a:after {
position: relative;
display: inline-block;
content: "";
width: 1px;
height: 12px;
background-color: grey;
margin: 0 8px;
top: 1px;
}
footer ul li:last-child a:after {
content: none;
}
3. 어려웠던 점과 해결방법
프로잭트 부분에서는 크게 어려운부분이 없었지만 트위치 사이트 제작은 지금까지 카피해온 네이버 보다 레이아웃 구성이 복잡해서 약간 어려움이 있었습니다.
강의 마지막에 트위치 작업시 사용한 내용들에 대해서 정리를 해주셔서 이해하는데 도움이 되었습니다.
4. 아쉬웠던 점
프로잭트에서 아임웹을 사용하는데 운영진을 추가해 여러사람이 개발가능 하다는걸 보고 선택했습니다. 운영진을 추가해서 관리는 가능한데 메뉴별로 접근 권한을 나누거나 세세하게 접근 권한을 나누는것을 되지 않아 아쉬웠습니다.
개발자를 꿈꾸는 이상화입니다.