8월 24일 Velog
학습한 내용
Twitch 실습 #4
4. Content
구조
[html]
<div id="content">
<div class="content_banner"></div>
<div class="video_section"></div>
<div class="video_section category"></div>
<div class="video_section"></div>
<div class="video_section"></div>
<div class="video_section"></div>
<div class="video_section"></div>
<footer></footer>
</div>수정 1 : banner와 각 li 태그의 공백 -> video section 전체 공백
[css]
#content .content_banner {
position: relative;
width: 100%;
height: 350px;
margin-top: 20px;
/*margin-bottom: 30px;*/
background: url(../img/aurora.jpg) no-repeat bottom;
background-size: cover;
}
.video_section ul li {
/*padding-bottom: 20px;*/
}
.video_section {
position: relative;
padding-top: 30px;
padding-bottom: 24px;
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}수정 2 : video section에 button 추가
[html]
<div class="video_section">
<div class="title_wrap">
<h2>취향 저격 생방송 채널</h2>
</div>
<ul></ul>
<div type="button" class="btn_more">더 보기</div>
</div>[css]
.video_section {
position: relative;
padding-top: 30px;
padding-bottom: 24px;
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}
.video_section .btn_more {
position: absolute;
width: 80px;
height: 30px;
background-color: #F7F7F8;
font-size: 13px;
font-weight: 600;
color: #772ce8;
text-align: center;
line-height: 30px;
left: 50%;
transform: translateX(-50%);
bottom: -15px;
z-index: 100;
}
(3) video section, category
[html]
<div class="video_section category">
<div class="title_wrap">
<h2>취향 저격 <span>카테고리</span></h2>
</div>
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/146x194">
<div class="video_info">
<div class="txt_wrap">
<h3>Just Chatting</h3>
<p class="source">시청자 21만명</p>
<div class="tag_wrap">
<span class="tag">리얼라이프</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/146x194">
<div class="video_info">
<div class="txt_wrap">
<h3>League of Legends</h3>
<p class="source">시청자 7.3만명</p>
<div class="tag_wrap">
<span class="tag">MOBA</span>
<span class="tag">액션</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/146x194">
<div class="video_info">
<div class="txt_wrap">
<h3>LOST ARK</h3>
<p class="source">시청자 2.1만명</p>
<div class="tag_wrap">
<span class="tag">RPG</span>
<span class="tag">액션</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/146x194">
<div class="video_info">
<div class="txt_wrap">
<h3>Minecraft</h3>
<p class="source">시청자 2.9만명</p>
<div class="tag_wrap">
<span class="tag">시물레이션</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/146x194">
<div class="video_info">
<div class="txt_wrap">
<h3>Art</h3>
<p class="source">시청자 1.5만명</p>
<div class="tag_wrap">
<span class="tag">크리에이티브</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/146x194">
<div class="video_info">
<div class="txt_wrap">
<h3>PUBG: BATTLEGROUNDS</h3>
<p class="source">시청자 5,668명</p>
<div class="tag_wrap">
<span class="tag">슈팅장르</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/146x194">
<div class="video_info">
<div class="txt_wrap">
<h3>Twelve Minutes</h3>
<p class="source">시청자 2.4만명</p>
<div class="tag_wrap">
<span class="tag">어드벤처 게임</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/146x194">
<div class="video_info">
<div class="txt_wrap">
<h3>Eternal Return</h3>
<p class="source">시청자 1.6만명</p>
<div class="tag_wrap">
<span class="tag">전략</span>
<span class="tag">MOBA</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>[css]
#content .title_wrap h2 span {
color: #772ce8;
}
#content .category .txt_wrap h3 {
max-width: 140px;
}
(4) footer
[html]
<footer>
<p>상호명: Twitch Interactive, Inc.</p>
<p>대표자: Emmett Shear, CEO</p>
<p>주소: 350 Bush Street, 2nd Floor, San Francisco, California 94104, USA</p>
<p>070-8984-5697</p>
<p>호스팅 서비스 제공자: Amazon Web Services, Inc.</p>
<ul>
<li><a href="#">지원팀에 문의</a></li>
<li><a href="#">판매약관</a></li>
<li><a href="#">사업자 정보</a></li>
</ul>
</footer>[css]
#content footer {
width: 100%;
padding: 70px 30px 100px;
text-align: center;
}
footer p {
font-size: 13px;
color: #0e0e10;
}
footer ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 20px;
}
footer ul a {
font-size: 13px;
color: #53535f;
}
footer ul a:hover {
text-decoration: underline;
}
※ 나만의 TIP : 선택자를 이용해서 li 태그 사이에 bar를 배치할 때 가끔 하나씩 두껍게 나오는 경우가 있는데 그럴 땐 margin 값을 조정하면 변화시킬 수 있다!
애니메이션 효과
[css]
.video_section .img_wrap {
background-color: #772ce8;
}
.video_section .img_wrap img {
transition: transform 0.2s linear;
}
.video_section .img_wrap:hover img {
transform: translate(10px, -10px);
}
추가로 학습한 내용
- span 태그에 애니메이션 효과 주기
위에서 사용한 애니메이션에 span 태그로 만든 .mark와 .count도 같이 적용했으나 img 태그에만 애니메이션 효과가 나타났다. 해결방안을 찾아 본 결과 span 태그를 block 요소로 변경하면 애니메이션 효과를 낼 수 있었다!
.video_section .img_wrap .mark,
.video_section .img_wrap .count{
display: block;
}
.video_section .img_wrap {
background-color: #772ce8;
}
.video_section .img_wrap img,
.video_section .img_wrap .mark,
.video_section .img_wrap .count {
transition: transform 0.2s linear;
}
.video_section .img_wrap:hover img,
.video_section .img_wrap:hover .mark,
.video_section .img_wrap:hover .count {
transform: translate(6px, -6px);
}궁금해서 inline-block 요소로도 해봤는데 같은 결과가 나왔다.
결론 : span 태그에 transform을 이용한 애니메이션을 줄 때는 inline-block이나 block 요소로 변경한 후 사용한다.
Author And Source
이 문제에 관하여(8월 24일 Velog), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ryuyoungseo8232/824Velog저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
