css3 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. 2024년, 웹사이트에 반응형 유튜브 비디오 추가하기 유튜브 영상을 웹사이트에 넣기위한 방법은 여러해 동안 다양한 방법이 동원되었습니다. 하지만 이제 아래 코드만으로 반응형 웹페이지까지 한번에 처리 가능합니다. CSS 마크업 .video-container { position: relative; padding-bottom: 56.25%; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 비디오 태그 종횡비 속성 CSS 추가하기 .video { aspect-ratio: 16 / 9; width: 100%; } 마지막으로 iframe에 클래스(.video) 를 적용합니다. .video 클래스명은 원하대로 수정가능합니다. 이상 반응형 웹사이트까지 .. 2024. 2. 5. 테슬라 웹사이트와 동일한 화면 스크롤링 구현 오늘은 테슬라 웹사이트의 전체 화면 스크롤링을 따라해보겠습니다. 마우스휠로 현재 보이는 화면 전체가 스무스하게 스크롤링되는 기능으로 스냅 스크롤링이라고 부르는데요, 별도의 스크립트없이 CSS만으로 간단하게 구현이 가능합니다. 아래 영상처럼 화면이 스크롤되는 기능으로 꽤 많은 웹사이트에서 사용하는 기능입니다. scroll-snap-type 속성을 이용하면 위아래, 좌우 방향으로 적용가능합니다. 자, 그럼 테슬라 홈페이지와 동일하게 위아래로 자연스럽게 스크롤링되는 방법을 알아봅니다. scroll-snap-wrapper 클래스를 가진 div 를 만든 후 그 안에 section 클래스 div 를 만들어 줍니다. 이제 html 기본 구조가 준비가 되었으면 스크롤링 적용을 위해 아래 스타일을 추가해줍니다. .scr.. 2022. 10. 7. 이전 1 다음
