# Direction

beckhye

구글에서 폰트 추가 1. 코드 추가 해당문구 추가 원하는 폰트 다운 해당 폰트 추가 icon fontAwesome사이트 head 끝 태그 전에 붙혀넣기 ![](https://velog.velcdn.com/images

developerpyk

학습 목표 레이아웃을 위한 HTML을 만들 수 있다. > o display: flex;를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다. > o > display: flex(속성명:속성값)를 설정하는 이유는 원하고자 하는 영역을 화면상에서 고정이 아니라 > 유연하게 정렬하거나 조절하기 위함이다. 즉, 고정되어 있는 위치를 유연하게 움직이기 위해서 사용한다. > flex의 속성 중 부모 요소에 적용해야 하는 속성이 있고, 자식 요소에 적용해야 하는 속성이 있다. > 이때, display: flex, flex-wrap, flex-direction, justify-content, align-items는 > 부모 요소에 적용해야 자식 요소에 작동한다. 따라서 주고 싶은 태그가 자식이 없는 경우에는 임의로 그 태그를 덮는 부모 태그를 만들어 그 부모 태그에 flex 속성을 적용한다. > 이때, flex-wrap, flex-direction, justif

co28th

gsap 이용 visual 부분 사진 순차 등장할 수 있게 만들기 html 우선 첨부했던 이미지를 를 통해 그룹으로 묶어주고 class이름을 으로 지정해준다. css css 에서 의 후손 class 이름을 가진 요소들을 보이지 않게 를 0으로 지정해준다. js 라는 변수를 만들고 document 객체의 querySelectorAll 메소드를 통해 fade-in 이라는 클래스 이름을 가진 요소를 전부 넣어줌. 반복적인 처리를 위해 메소드를 통해서 html에서 찾은 요소의 개수만큼 forEach 메소드의 인수로 적은 함수가 실행시킴. function에 fadeEl로 데이터 이름을 정해주고 매개변수는 index로 반복되는 횟수를 받아줌. gsap은 자바스크립트 애니메이션 라이브러리. 이렇게 두개의 이름을 가진 함수가 반복적으로 실행 될 때 내부에서는 gsap의 to라는 메소드를 실행해준다. 애니메이션 처리하는 라이브러리에서 제공하