btn2 (스타벅스)Section 1_ 순차적으로 요소보이기 // btn 속성 포인트 HTML **순차적으로 보여주고 싶은 요소에 같은 클라스이름 설정 CSS ** btn--abc를 사용해서 btn이 들어가는 요소 스타일 바꿔주기 참고 2022.06.04 - [CSS] - Button_ 여러 버튼 속성지정 ** 요소를 순차적으로 나타내기위해 opacity:0을 이용하여 처음로딩되면 화면에 요소가 나타나지 않게 설정 JS ** document.querySelectorAll('')을 사용하여 나타날요소들 모두 찾기 **forEach(function(요소,indec){}) 를 사용하여 요소의 수만큼 반복해서 함수 실행 **gsap.to(요소,지속시간,옵션)을 사용하여 애니메이션추가 ** delay 속성을 사용하여 순서대로 요소들이 나타나게함. 결과 페이지가 로딩되면 이미지가 순차적으로.. 2022. 6. 4. Button_ 여러 버튼 속성지정 * btn--abc 속성을 이용해 버튼의 성질을 나타내는 클라스를 만들어 각각의 요소에 지정해 줄 수 있다. 1. html에 btn 클래스를 지정 HI 2. CSS에 모든 버튼에 공통으로 들어갈 .btn 속성을 넣어준다. 예) .btn{ width: 130px; border: 2px solid #333; padding:10px; border-radius: 4px; color: #333; cursor: pointer; box-sizing: border-box; font-size: 16px; font-weight: 700; text-align: center; } 3. btn--abc 로 각각의 속성을 지정 예) .btn:hover{ background-color:#333; color:white } // 버튼.. 2022. 6. 4. 이전 1 다음