728x90 분류 전체보기530 [리액트] 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] 페이지 제작하기 이런 페이지 만들기.간단하게 3페이지 정도 만들 예정.코드에서 이미지 태그 없이 화살표 아이콘을 사용한 것은 Font Awesome 같은 아이콘 폰트나,CSS ::before 의사 클래스와 함께 사용된 CSS content 속성을 통해 이미지를 대체한 방식참고할 글 >>after, before 부분 알아보기 - 글 하단[CSS] Draw Underline Link Hover Effect (tistory.com) [CSS] Draw Underline Link Hover EffectDraw Underline Link Hover Effect | CSS Menu Hover Effect (youtube.com)아래에 선 맞춰줌.HTML Home Services Contact About CSS*,*:before,.. 2024. 9. 6. [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. [리액트] props 쉽게 쓰고 싶으면 참고한 글리액트에서 탭 UI 만들기 (tistory.com) 리액트에서 탭 UI 만들기 jamongsoda.tistory.com하단에 있음. 객체 비구조화 할당(object destructuring)을 통해props를 간단하게 받아오려는 것 비구조화 할당import React from "react";import "./style/main.scss"; // 스타일이 있는 경로에 따라 맞춰주세요.function Search({ isVisible, setSearch }) { if (!isVisible) return null; return ( setSearch(false)} > );}export default Search;이렇게 props.. 2024. 9. 5. [리액트] Navigate 와 useNavigate 의 차이 공통점 Navigate와 useNavigate는 둘 다 페이지를 이동(네비게이션)하는 데 사용Navigate 컴포넌트import { Navigate } from 'react-router-dom';function ProtectedPage() { const userLoggedIn = false; if (!userLoggedIn) { return ; } return Welcome to the protected page!;}Navigate는 자동으로 페이지를 이동시킬 때 사용합니다.페이지를 그릴 때, 특정 조건이 만족되면 바로 다른 페이지로 보내는 역할을 합니다.언제 사용하나요? 사용자가 로그인하지 않았는데 보호된 페이지에 접근하려 할 때,그 사용자를 로그인 페이지로 보내고 싶을 때 사용합니다.어떻.. 2024. 9. 4. [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. 이전 1 ··· 17 18 19 20 21 22 23 ··· 89 다음 728x90