728x90 > IT 노트/활용17 위글위글 3등분 보호되어 있는 글 입니다. 2024. 7. 30. [CSS] 지나가는 전광판 만들기 참고사이트:흐르는 텍스트 구현하기 (velog.io) 흐르는 텍스트 구현하기화면상에서 텍스트가 왼쪽으로 무한히 흐르는 것을 구현해보자.호버(hover) 했을 때는 텍스트 색이 진해지면서 흐르던 것이 멈춘다.이 구현은 생각보다 간단한데, html과 css 로만 구현이 가능하다.velog.ioHTML 💖WIGGLE WIGGLE💖 💖WIGGLE WIGGLE💖 💖WIGGLE WIGGLE💖 💖WIGGLE WIGGLE💖 💖WIGGLE WIGGLE💖 CSS.flow-text { display: flex; flex: 0 0 auto; white-space: nowra.. 2024. 7. 6. [SCSS] span 태그로 햄버거 메뉴 만들기 HTML span 으로 햄버거 모양 만들기SCSS.banner-header { display: flex; align-items: center; position: relative; width: 100%; .hamburger_menu { width: 80px;// span태그에 magin을 줘서 높이 맞춰줘서 height를 굳이 쓰지 않음.// width를 부여해서 메뉴 바의 가로 길이 지정 // span 태그에 스타일 적용 span { display: block; //display: block을 사용하면 블록 요소로 변환되어, 각각의 span이 새로운 줄에서 시작 height:.. 2024. 6. 21. [CSS] 마우스 커서 바꾸기 (img) 마우스 커서 바꾸기 (img) body { cursor: url("banner/mcdonaldslogo\ 60.png"), default; } 64x64 이내의 이미지로 설정 바디 태그에 적용. 2024. 3. 29. [CSS] 동글동글 캐러셀 버튼 만들기 단순 원형 캐러셀 버튼 만들기 HTML 짜고 시작 CSS 버튼 동그랗게 적용 /* 캐러셀 버튼 디자인 */ .carousel-button button { width: 10px; /* 버튼의 너비 */ height: 10px; /* 버튼의 높이 */ border-radius: 50%; /* 원형 모양을 만듭니다 */ background-color: rgb(0, 0, 0); /* 버튼의 배경색 */ cursor: pointer; /* 마우스 오버 시 커서 모양 변경 */ margin: 0 1px; /* 버튼 사이의 간격 */ border: none; /* 버튼 테두리 제거 */ opacity: 0.5; /* 버튼 불투명도를 50%로 설정 */ } .carousel-button button:hover { ba.. 2024. 3. 26. [CSS] 피그마 글자 Stroke 효과 준 거처럼 꾸미기 stroke 효과 hover 하고 같이 사용해서 마우스 올리면 스트로크도 같이 뜨게 함. 해당 CSS .navbar-under a:hover { color: orange; /*찐한효과 */ /* -webkit-text-stroke: 1px rgb(255, 0, 0); */ text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0px -1px 0 #000, -1px 0px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000; } 1) -webkit-text-stroke 사용 .link:hover { color: yellow; /* 호버 시 글자 색상 변경 */ -webkit-text-stroke: .. 2024. 3. 26. 이전 1 2 3 다음 728x90
