728x90 > IT 노트35 [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. [React] 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 참고) https://devbirdfeet.tistory.com/3 React 실행오류 - npm ERR! code ENOENT(errno -4058) Updated 21/07/30 문제상황 " npm ERR! code ENOENT(errno -4058) " React를 실행하기 위해 visual studio 터미널창에 npm run start를 입력하니 4058로 시작하는 에러가 나왔다. path를 살펴보니 설치시 지정한 경로와 달랐 devbirdfeet.tistory.com 1) 문제 프로젝트에 react-script 설치 - 터미널 열고 복붙해줬음 - npm) npm install -save react-scripts - yarn) yarn add react-scripts 여까지 복붙해주니 뜨는거 확.. 2024. 4. 11. [node.js] npm ERR! code ENOENT npm ERR! syscall lstat npm ERR! path C:\Users\User\AppData\Roaming\npm npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, lstat 'C: \Users\User\AppData\Roaming\npm' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent https://www.frontoverflow.com/question/16/npx%20create-react-app%EC%9D%B4%20%EC%9E%91%EB%8F%99%ED%95%98%EC%A7%80%20%EC%95%8A%E.. 2024. 4. 10. [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. 이전 1 2 3 4 5 6 다음 728x90
