노코드 No Code4 HTML, CSS 무한 롤링, 흐르는 텍스트 마우스 오버시 텍슽 색상이 변하면서 일시 정지됩니다. CSS 스타일 .marquee-text { display: flex; flex: 0 0 auto; white-space: nowrap; overflow: hidden; transition: 0.3s; font-size: 2rem; font-weight:300; color: #000000; } .marquee-text:hover { color: #999999; } .marquee-text:hover .marquee-wrap { animation-play-state: paused; cursor: pointer; } .marquee-wrap { animation: textLoop 10s linear infinite; padding-right: 1.4881v.. 2024. 2. 6. [PHP] 외부 이미지 서버에 저장 페이지 링크 서비스 제작 및 기타 페이지 공유 서비스 제작시 ogg tag와 함께 이미지도 함께 가져와야 할 때가 있습니다. 단순히 해당 페이지의 오리지널 이미지 링크를 저장하는 방법도 있지만, 아무래도 이미지는 자체 서버에 저장을 해 놓아야 이미지 삭제나 변경시 별도 대처가 없어도 되겠지요. 이번 시간엔 다른 주소에 있는 이미지를 서버에 저장시 필요한 코드 구성입니다. $imgLink = "https://test.com/page/image.jpg"; // 파일명 가져오기 $linkArray = explode("/", $imgLink); $filename = $linkArray[count($linkArray)-1]; // 확장자명 가져오기 //$ext = strtolower(pathinfo($imgLi.. 2022. 10. 8. 테슬라 웹사이트와 동일한 화면 스크롤링 구현 오늘은 테슬라 웹사이트의 전체 화면 스크롤링을 따라해보겠습니다. 마우스휠로 현재 보이는 화면 전체가 스무스하게 스크롤링되는 기능으로 스냅 스크롤링이라고 부르는데요, 별도의 스크립트없이 CSS만으로 간단하게 구현이 가능합니다. 아래 영상처럼 화면이 스크롤되는 기능으로 꽤 많은 웹사이트에서 사용하는 기능입니다. scroll-snap-type 속성을 이용하면 위아래, 좌우 방향으로 적용가능합니다. 자, 그럼 테슬라 홈페이지와 동일하게 위아래로 자연스럽게 스크롤링되는 방법을 알아봅니다. scroll-snap-wrapper 클래스를 가진 div 를 만든 후 그 안에 section 클래스 div 를 만들어 줍니다. 이제 html 기본 구조가 준비가 되었으면 스크롤링 적용을 위해 아래 스타일을 추가해줍니다. .scr.. 2022. 10. 7. [PHP] 헤더 meta 태그 가져오기 사이트를 제작하다보면 meta tag 정보를 필요로 할때가 있습니다. 페이지 제목, 내용, 이미지 등 주요 정보는 특히 페이지 공유를 위해서는 필수적인 요소입니다. 카카오톡을 통해 주소를 입력하면 페이지 정보가 미리 보여지는 것이 대표적인 예라고 하겠습니다. 2022. 9. 30. 이전 1 다음
