참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 JS 코드 설명 main.js 람다식으로 작성된 코드다. 동적으로 moreBtn과 title에 class 값으로 clicked과 clamp를 추가하고 삭제한다. style.css 수정 clamp라는 클래스를 지닌 title에 대하여 적용될 CSS 코드를 작성한다. clamp 되었을 경우에 텍스트는 2줄로 고정이 되고 초과한 글자는 생략된다. 버튼이 클릭된 경우 아이콘을 180도 회전한다. index.html 수정 clamp된 상태가 기본이기 때문에 class에 clamp를 추가한다. … 더 읽기
참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 flex 각각의 flex의 item들이 컨테이너에서 차지하는 크기를 설정할 수 있다. 아래는 3개의 item들의 각기 다른 범위를 차치하는 상황이다. flex-grow flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정한다. 기본값은 0이다. 그래서 따로 값을 설정하기 전까지는 아이템이 늘어나지 않는다. 설정된 flex-grow의 값에 비례해서 여백 부분을 할당받는다. 해당 예시에서는 모두 동일한 1:1:1 비율이다. flex-shrink flex-shrink는 … 더 읽기
참고 자료 : 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). 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있다. 위는 대표적인 가상 클래스의 예시다. 미리 정의되어 있는 가상 클래스를 효과적으로 사용하면 편하다. … 더 읽기
