참고 자료 : 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'); }); 람다식으로 작성된 코드다. 동적으로 moreBtn과 title에 class 값으로 clicked과 clamp를 추가하고 삭제한다. style.css ..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 flex 각각의 flex의 item들이 컨테이너에서 차지하는 크기를 설정할 수 있다. 아래는 3개의 item들의 각기 다른 범위를 차치하는 상황이다. flex-grow flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정한다. 기본값은 0이다. 그래서 따로 값을 설정하기 전까지는 아이템이 늘어나지 않는다. 설정된 flex-grow의 값에 비례해서 여백 부분을 할당받는다. .upNext .item .img { flex-grow: 1; } .upNext .item .info { flex-grow: 1; } .upNext .item .moreBtn { flex-grow: 1; } 해당 예시에..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 CSS Pseudo-classes 가상 클래스, 의사 클래스로 번역되어 사용되고 있다. A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있다. :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 :active - 마우스를 클릭했을 때 :focus - 포커스 되었을 때 (input 태그 등) :first - 첫번째 요소 :..