전체 글28 [CSS]animation을 적용하는 예시 'float'이라는 위아래로 가볍게 움직이는 애니메이션 만들기 키프레임 정의 @-webkit-keyframes float { 0%,100% { top:10px; } 50% { top:30px; } } @keyframes float { 0%,100% { top:10px; } 50% { top:30px; } } CSS 적용하기 - 3초 동안 무한 반복. 시간당 속도 옵션은 ease float { webkit-animation: 3s arrow infinite ease; animation: 3s arrow infinite ease; } 1. linear : 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행됩니다. 2. ease : 기본값으로, 애니메이션 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막.. 2023. 3. 15. [오류 기록] uncaught referenceerror: $ is not defined / jQuery 오류 scrollify.js를 사용하기 위해 아래와 같이 삽입했는데 계속 오류가 남. 크롬 개발자도구에서 처음엔 Uncaught TypeError: $.scrollify is not a function" 오류가 발생함. 여러 조치를 해봤는데, 이번엔 아래 오류 표시 uncaught referenceerror: $ is not defined 검색해보니 jquery가 제대로 import 되었는지 확인해보래서 새로 최신 버전 다운받아 import 해보았다. 그러니 성공. 스크롤로 섹션 단위 이동되는 것은 확인.그런데 화면 배경으로 쓰인 video 태그들이 죄다 비정상적으로 확대되었다. 개발자도구 element.style에 height가 너무 큰 값으로, 창크기에 따라 바뀌며 표시되는 것 확인해서 css에서 heig.. 2023. 3. 15. <script>와 <script type="text/javascript"> 차이 웹 표준은 이다. 과거에는 javascript 외 스크립트 언어들이 자주 사용되어 브라우저가 javascript를 인식하기 위해 명시했다. (Text를 통해서 스크립트를 구현한다는 의미) HTML5에서는 태그 type의 default가 text/javascript로 이기 때문에 만 써도 되지만, 하위 호환성을 위해 type까지 적는 것이 좋다. 참고로, 의 디폴트도 css로 지정되어 type="text/css" 를 지정해줄 필요가 없다. 2023. 3. 15. [CSS] 영상을 배경으로 쓸 때 화면 가득 채우기 height에 100%을 주면 최대 크기에서 좌우 여백이 생기고 width에 100%를 주면, 창 좌우 폭을 줄이면 상하 여백이 생긴다. video 태그에 아래 속성을 넣어주면 된다.. 한참 헤맸는데,, video { object-fit: cover; width: 100%; height: 100vh; } 2023. 3. 14. 이전 1 2 3 4 5 6 7 다음