참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4
JS 코드 설명
main.js
const moreBtn = document.querySelector('.info .metadata .moreBtn');
const title = document.querySelector('.info .metadata .title');
moreBtn.addEventListener('click', ()=>{
moreBtn.classList.toggle('clicked');
title.classList.toggle('clamp');
});
Code language: JavaScript (javascript)람다식으로 작성된 코드다.
동적으로 moreBtn과 title에 class 값으로 clicked과 clamp를 추가하고 삭제한다.
style.css 수정
body .infoAndUpNext > .info .metadata .titleAndButton .title {
font-size: var(--font-medium);
}
body .infoAndUpNext > .info .metadata .titleAndButton .title.clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
Code language: CSS (css)clamp라는 클래스를 지닌 title에 대하여 적용될 CSS 코드를 작성한다.
clamp 되었을 경우에 텍스트는 2줄로 고정이 되고 초과한 글자는 생략된다.
body .infoAndUpNext > .info .metadata .titleAndButton .moreBtn.clicked {
transform: rotate(180deg);
}
Code language: CSS (css)버튼이 클릭된 경우 아이콘을 180도 회전한다.
index.html 수정
<span class="title clamp">
Test Video (시원함 주의)(동해물과 백두산이 마르고 닳도록 하느님이
보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로
길이 보전하세)
</span>
Code language: HTML, XML (xml)clamp된 상태가 기본이기 때문에 class에 clamp를 추가한다.
실행
| 클릭 전 | 클릭 후 |
 |  |
완성
 |  |
GitHub Pages를 이용해서 웹사이트를 인터넷에 올려보자.
BOOM!
