[CSS] input type number 우측 화살표 제거하기

input 태그를 type='number'로 사용했을 때input 에 focus하면 우측에 숫자를 +1, -1 할 수 있는 화살표가 생성된다.제거하고 싶다면 아래 코드를 작성하면 된다./* Chrome, Safari, Edge, Opera */input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}/* Firefox */input[type='number'] { -moz-appearance: textfield;}

• format_list_bulleted Frontend/css
• · 2024. 12. 30.
• textsms

[Nextjs] _app.tsx 와 _document.tsx

_app.tsx, _document.tsx: 두 파일은 server only file 입니다. Next.js server logic에 사용되는 파일이기 때문에 client에서 사용하는 로직 사용 불가 ex) EventListener / Window / DOM 1. _app.tsx 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트를 의미합니다. pages/_app.tsx 경로에 생성 모든 페이지는 이곳을 통하게 되고 공통 레이아웃을 만들때 사용 글로벌 CSS 적용 레이아웃 설정을 통해 페이지 전환시 특정 레이아웃을 유지할 수 있습니다. 페이지 전환시 특정 레이아웃의 상태값도 유지 실습해보기 root 경로에 styles/globals.css 를 생성합니다. _app.tsx에 적용 pages/_app.t..

• format_list_bulleted Frontend/Nextjs
• · 2023. 11. 11.
• textsms

[Warning] Unknown at rule @tailwind css : React에서 TailwindCSS 사용 시 발생하는 경고

- 오류내용 리액트에서 tailwindcss를 설치하고 나서 기본적인 설정들을 하고 난 후에 Unknown at rule @tailwind css 라는 경고가 떴다. - 해결 ☝🏼 VSCODE vscode에서는 플러그인 - PostCSS Language Support 를 설치하면 더 이상 경고 문구가 보이지 않는다. ✌🏼 VIM 만약 vim을 사용한다면 그리고 coc를 사용한다면 :CocInstall coc-css 로 coc-css를 설치해준 뒤, vim설정 폴더로 들어가서 coc-settings.json 파일에서 설정을 해주면 된다. { "css.lint.unknownAtRules": "ignore", } vim에서도 경고문이 보이지 않게 된다!

• format_list_bulleted Frontend/css
• · 2023. 7. 27.
• textsms

[Tailwindcss] 키워드값 지정

tailwind.config.js 에서 특정 키워드를 지정해서 클래스 안에 작성이 가능하다. 아래는 해당 파일이다. /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: "class", mode: "jit", purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], // darkMode: true, // or 'media' or 'class' theme: { extend: { colors: { brand: "#FF0000", }, }, }, variants: { extend: {}, }, plugins: [], };

• format_list_bulleted Frontend/css
• · 2023. 7. 25.
• textsms

[html] iframe frameBorder 속성 deprecated

iframe 태그를 사용하는 데에 있었던 frameBorder라는 속성이 deprecated 되었다고 나온다. 출처 : http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/tags/att_iframe_frameborder.asp.html#gsc.tab=0 출처 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe 하지만 mdn에서 확인 시 frameborder는 deprecated된 속성이며, css 속성의 border로 대신 사용해주면 된다. 대안 : style 속성을 이용하여 border로 조정

• format_list_bulleted Frontend/html
• · 2023. 7. 12.
• textsms

[React] React build 시 sourcemap 제거하기

왜 제거해야 하나요? create-react-app으로 React 프로젝트를 빌드하여 배포하는 경우, 기본적으로 webpack에 의해 번들링 된 파일과 해당 파일에 대응되는 sourcemap이 생성됩니다. 다음은 결과 예시이며, *.css.map과 *.js.map 파일이 sourcemap입니다. 📁build ├── index.html ├── . . . └── 📁static ├── 📁css │ ├── main.58ba45b2.chunk.css │ └── main.58ba45b2.chunk.css.map 👈 └── 📁js ├── 2.70d883b6.chunk.js ├── 2.70d883b6.chunk.js.LICENSE.txt ├── 2.70d883b6.chunk.js.map 👈 ├── main.c855ce..

• format_list_bulleted Frontend/React
• · 2023. 7. 11.
• textsms