Day 42. 트위치 콘텐츠 영역 2
08월 24일
학습 내용
추천 Chatting 채널 ~ footer 영역
HTML
-
취향저격 생방송 채널 복사 후 알맞게 수정
<div class="cateogry-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/152px*203px"> <div class="txt-wrap"> <h3>Apex Legends</h3> <p class="count">시청자 4.1만명</p> <div class="tag-wrap"> <span class="tag">스포츠</span> <span class="tag">한국어</span> </div> </div> </a> </li> <li> <a href="#"> <img src="https://via.placeholder.com/152px*203px"> <div class="txt-wrap"> <h3>Apex Legends</h3> <p class="count">시청자 4.1만명</p> <div class="tag-wrap"> <span class="tag">스포츠</span> <span class="tag">한국어</span> </div> </div> </a> </li> <li> <a href="#"> <img src="https://via.placeholder.com/152px*203px"> <div class="txt-wrap"> <h3>Apex Legends</h3> <p class="count">시청자 4.1만명</p> <div class="tag-wrap"> <span class="tag">스포츠</span> <span class="tag">한국어</span> </div> </div> </a> </li> <li> <a href="#"> <img src="https://via.placeholder.com/152px*203px"> <div class="txt-wrap"> <h3>Apex Legends</h3> <p class="count">시청자 4.1만명</p> <div class="tag-wrap"> <span class="tag">스포츠</span> <span class="tag">한국어</span> </div> </div> </a> </li> <li> <a href="#"> <img src="https://via.placeholder.com/152px*203px"> <div class="txt-wrap"> <h3>Apex Legends</h3> <p class="count">시청자 4.1만명</p> <div class="tag-wrap"> <span class="tag">스포츠</span> <span class="tag">한국어</span> </div> </div> </a> </li> <li> <a href="#"> <img src="https://via.placeholder.com/152px*203px"> <div class="txt-wrap"> <h3>Apex Legends</h3> <p class="count">시청자 4.1만명</p> <div class="tag-wrap"> <span class="tag">스포츠</span> <span class="tag">한국어</span> </div> </div> </a> </li> <li> <a href="#"> <img src="https://via.placeholder.com/152px*203px"> <div class="txt-wrap"> <h3>Apex Legends</h3> <p class="count">시청자 4.1만명</p> <div class="tag-wrap"> <span class="tag">스포츠</span> <span class="tag">한국어</span> </div> </div> </a> </li> <li> <a href="#"> <img src="https://via.placeholder.com/152px*203px"> <div class="txt-wrap"> <h3>Apex Legends</h3> <p class="count">시청자 4.1만명</p> <div class="tag-wrap"> <span class="tag">스포츠</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>
CSS
.video-section .btn-more {
position: absolute;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #0e0e10;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
- 가운데 정렬}
.cateogry-section {
padding-top: 60px;
padding-bottom: 40px;}
.cateogry-section .title-wrap {
padding-bottom: 10px;}
.cateogry-section .title-wrap h2 {
font-size: 20px;}
.cateogry-section .category-wrap ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;}
.cateogry-section .category-wrap li {
width: 152px;}
.cateogry-section .category-wrap li img {
width: 152px;
height: 203px;
margin-bottom: 10px;}
.cateogry-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;}
- text-align은 아래 또 flex를 적용하면
가운데 정렬이 풀림
footer ul {
display: flex;
flex-wrap: wrap;
align-items: center;}
footer ul li a {
color: grey;
font-size: 14px;}
footer ul li a:after {
position: relative;
top: 1px;
content: '';
display: inline-block;
width: 1px;
height: 12px;
background-color: grey;
margin: 0 8px;}
footer ul li:last-child a:after {
content: none;}학습 중 어려웠던 점
이전과 내용이 같아서 어려운 점은 없었다.해결 방안
학습 소감
하루빨리 나 스스로 만들어 보고 싶다.
안녕하세요!