728x90 > IT 노트/활용17 [리액트] 페이지 함수 - 매개변수와 인수, Array.from() 해당 내용: Array.from()참고할 글[리액트] 페이지 함수 만들기 (tistory.com) [리액트] 페이지 함수 만들기페이지 함수 만들기- 화살표에 기능 넣기 Pages.js - Pages 컴포넌트import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";function Pages() { return ( {jamongsoda.tistory.comApp.jsimport React, { useState } from 'react';import Pagination from './Pagination'; // P.. 2024. 9. 11. [리액트] 페이지 함수 만들기 페이지 함수 만들기- 화살표에 기능 넣기 Pages.js - Pages 컴포넌트import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";function Pages() { return ( {" "} {/* class -> className */} {" "} {/* 태그 대신 FontAwesomeIcon 사용 */} 1 2 .. 2024. 9. 8. [리액트] Font Awesome 라이브러리 사용하기 Font Awesome 라이브러리 사용npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core해당 코드를 npm 에 입력해주기import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";리액트에서 사용할 아이콘을 import 해서 사용주의할 점import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";import { .. 2024. 9. 7. [CSS] Font Awesome 같은 아이콘 라이브러리 사용 방법 1. CDN을 통해 사용별도로 설치하지 않고, HTML 파일에 CDN 링크를 추가하여 사용할 수 있습니다.이후 HTML에서 아이콘을 아래와 같이 사용할 수 있습니다: 이 방법은 가장 간단하며, 별도의 파일 다운로드가 필요 없습니다.CDN 방식은 라이브러리를 웹에서 불러오는 방식이라 빠르게 적용할 수 있지만, 인터넷 연결이 필요합니다.2. NPM으로 설치 (로컬 프로젝트에서 사용)로컬 프로젝트에서 Font Awesome을 사용하려면 NPM을 통해 설치할 수 있습니다.Node.js 프로젝트에서 사용 시 편리합니다.npm install @fortawesome/fontawesome-free설치한 후, CSS 파일을 직접 임포트하여 사용합니다.@import "~@fortawesome/fontawesome-fre.. 2024. 9. 6. [CSS] 스크롤 바 꾸미기 ::-webkit-scrollbar { width: 26px; /* 세로 스크롤바 너비 */ height: 26px; /* 가로 스크롤바 높이 */}::-webkit-scrollbar-thumb { background-image: url("scrollbar.png"); /* background-position: center; background-size: contain; */}::-webkit-scrollbar-track { background: rgba(2, 39, 253, 0.5); /*스크롤바 뒷 배경 색상*/}width 와 height 를 동일하게 줘서 스크롤바 크기를 동일 시 만듦.아래 스크롤 바 삭제 ::-webkit-scrollbar { width: 26px; /* 세로 스크롤.. 2024. 8. 20. [CSS] aisde 2개 페이지 만들기 보호되어 있는 글 입니다. 2024. 7. 30. 위글위글 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. 이전 1 2 다음 728x90
