TIL(22.05.04)

css만으로 x 버튼 만들기

다양한 svg 파일은 무료로 쉽게 구할수 있지만, 간단한 모양은 css만으로 쉽게 해결이 가능하다. ::before속성과 ::after를 이용해서 얇은 막대모양을 만들어 각각 45도, -45도 회전해서 x모양을 만들수 있다.

react-router 이용해서 뒤로가기

react-router v6 설치

npm install react-router-dom@6

react-router-dom-v6에서는 useNavigate Hook을 이용하면 페이지 이동을 편하게 할 수 있다. useNavigate()가 리턴하는 함수를 이용해서 페이지를 이동할 수 있는데 아래와 같은 인자를 받는다.

declare function useNavigate(): NavigateFunction;

interface NavigateFunction {
  (
    to: To,
    options?: { replace?: boolean; state?: any }
  ): void;
  (delta: number): void;
}

The navigate function has two signatures:

1. Either pass a To value (same type as ) with an optional second { replace, state } arg or
2. Pass the delta you want to go in the history stack. For example, navigate(-1) is equivalent to hitting the back button.

import { useNavigate } from "react-router-dom";

function SignupForm() {
  const navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    await submitForm(event.target);
    navigate("../success", { replace: true });
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}

box-shadow 테스트하기 좋은 사이트

box-shadow generator

하루 회고

어머니, 전 css가 무섭습니다. 🫣