게시 됨 업데이트 됨react몇 초안에 읽기 (약 62 단어)

vite react-ts에서 emotion css prop 쓰기

vite.config.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin'],
      },
    }),
  ],
});
tsconfig.json
1
2
3
4
5
6
{
  "compilerOptions": {
    // ...
    "jsxImportSource": "@emotion/react"
  }
}

참고

 게시 됨 업데이트 됨web1분안에 읽기 (약 200 단어)

first-child vs first-of-type

The pseudo class “:first-child” is potentially unsafe when doing server-side rendering. Try changing it to “:first-of-type”.
The pseudo class “:nth-child” is potentially unsafe when doing server-side rendering. Try changing it to “:nth-of-type”.

  • first-child를 사용하면 콘솔에 에러가 찍힌다
  • 그러면서 first-of-type을 사용하라고 알린다
  • 이참에 둘의 차이를 알아보았다
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
  h1:first-child {
    color: red;
  }
  h4:first-of-type {
    color: green;
  }
</style>
<body>
  <div>
    <h1>first-child로 빨간색이 된다</h1>
    <h4>first-of-type으로 인해 초록색이 된다</h4>
  </div>
  <hr />
  <div>
    <h4>first-of-type으로 인해 초록색이 된다</h4>
    <h1>효과를 안 받는다</h1>
  </div>
</body>

참고

 게시 됨 업데이트 됨react몇 초안에 읽기 (약 81 단어)

emotion css prop

terminal
1
2
yarn add @emotion/css @emotion/react @emotion/babel-preset-css-prop
yarn add -D react-app-rewired customize-cra
tsconfig.json
1
2
3
4
5
6
{
  "compilerOptions": {
    // ...
    "jsxImportSource": "@emotion/react"
  }
}
  • jsx 엘리먼트에서 css 속성을 사용할 수 있다

참고

 게시 됨 업데이트 됨web2분안에 읽기 (약 287 단어)

transition ease ease-in ease-out ease-in-out 무슨 차이일까

style.css
1
2
3
.box {
  transition: all 0.2s ease;
}
  • 자연스러운 변화를 주기 위해서 사용하곤 했다
  • ease는 여러 가지가 있는데 어떤 차이일까?

transition-timing-function

  • 영상 편집할 때 영상의 앞뒤에 투명도를 가지고 페이드인 페이드아웃하는 그래프가 있는데 그거랑 똑같다
  • ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier, steps 가 있다

함수들

  • ease ; 천천-빠름-천천
  • linear ; 등속
  • ease-in ; 천천-보통
  • ease-out ; 보통-천천
  • ease-in-out ; 천천-보통-천천
  • cubic-bezier ; 커스텀
  • steps ; 뚝뚝 끊어 보여준다

cubic-bezier

베지에 곡선이라고 한다
ease, in, in-out은 미리 정의어 있는 곡선이다
각각을 cubic-bezier로 표현하면 다음과 같다

  • ease === cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • linear === cubic-bezier(0.0, 0.0, 1.0, 1.0)
  • ease-in === cubic-bezier(0.42, 0, 1.0, 1.0)
  • ease-out === cubic-bezier(0, 0, 0.58, 1.0)
  • ease-in-out === cubic-bezier(0.42, 0, 0.58, 1.0)

참고

유용한 도구

용어

 게시 됨 업데이트 됨web몇 초안에 읽기 (약 70 단어)

CSS BEM

BEM

  • Block, Element, Modifier
  • css class 이름
  • __ 를 이어붙인다

🤔

  • amazon clone 할 떄, 한번 사용해봤는데
  • 마크업할 때 클래스 작성하기가 불편했다
  • sass를 배웠는데 어째선지 더 쓰지않게 되었다

참고

 게시 됨 업데이트 됨blog2분안에 읽기 (약 282 단어)

blog update 404

after

before

  • 기존에는 iframe으로 배너메이커를 보여줬다
  • hexo 프론트 메터를 layout: false로 설정해 내가 원하는 대로 커스텀할 수 있었다
  • 당시에는 404 페이지에 넣을 내용도 없고 당시 만들었던 배너메이커를 자랑하고자 했다
  • 근데 블로그와 404페이지는 아무 관계가 없는 것처럼 느껴졌다
  • 그래서 이번엔 layout: true 레이아웃을 하면서 간단한 css 이펙트를 넣어보자 생각했다

typewriter animation

hexo front-matter

  • 내 환경은 다음과 같다

    • hexo: 5.4.0
    • hexo-cli: 4.2.0
404.html
1
2
3
4
5
6
7
---
title: 404
widgets: null
comment: false
article:
  - license: false
---
  • 404 화면에 위젯, 코멘트, 라인센스 영역을 없애기 위해 설정했다
  • title은 넣어주면 head의 title tag에 반영되어서 넣어줬다
404.html
1
2
3
4
5
<style>
  h1.title {
    display: none;
  }
</style>
  • 실제 포스트 영역에서 보이지 않게 했다

참고

 게시 됨 업데이트 됨web1분안에 읽기 (약 172 단어)

css 변수 사용하기

style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:root {
  --a: pink;
  --b: black;
  --c: white;
}

button {
  background-color: var(--a);
}

/* 변수 --a 를 오버라이딩 */
button.override {
  --a: green;
  background-color: var(--a);
}
  • :root는 전역 변수를 선언하는 곳이라고 생각하면 된다
  • --을 앞에 붙여야 한다
  • 대소문자를 구분한다
  • var()함수로 변수를 가져다 사용할 수 있다
  • 오버라이딩 가능하다
style.css
1
2
3
button {
  background-color: var(--a, red);
}
  • var() 함수에 2번째 인자를 넣어서, 대안 값을 지정할 수 있다
  • --a가 정의되지 않았을 때, 두 번째 인자 값을 사용한다

참고

카테고리

아카이브

광고

×