[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

[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

[CSS] 블럭요소와 인라인요소

* 블럭요소(block element)와 인라인요소(inline element)란? - 블럭요소 : 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소들입니다. - 인라인요소 : 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들입니다. 행 안의 일부분이라고 보시면 됩니다. 텍스트레벨요소라고도 합니다. 블럭요소(block element)와 인라인요소(inline element)의 종류 - 블럭요소 : ,,~,,,,,,,,,,등 - 인라인요소 : ,, ,,,,, 특징 및 주의점 - 블럭요소는 내부에 블럭요소와 인라인요소를 포함할 수 있습니다. 인라인요소는 내부에 블럭요소를 포함할 수 없습니다. - 블럭요소들 중에..

• format_list_bulleted Frontend/css
• · 2023. 6. 29.
• textsms

[CSS] Content 화면 중앙배치

화면의 상단에 배치되어 있는 것을 화면 중앙에 배치해보도록 하겠다. width: 100vw; height: 100vh; display: flex; justify-content: center; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center;

• format_list_bulleted Frontend/css
• · 2023. 4. 5.
• textsms

[CSS] 웹화면의 가운데 정렬하기

HTML 1 2 3 4 5 CONTENTS cs CSS 1 2 3 4 5 6 7 8 9 body { width:100%; height:100%; } #box{ width:300px; height:300px; margin:0 auto; } cs 또는 수평에서 align-items, 중심축에서의 justify-content를 이용하여 다음과 같이 정렬할 수 있다. 1 2 3 4 5 6 7 body{ background-color: var(--color-black); display: flex; flex-direction: column; justify-content: center; align-items: center; } Colored by Color Scripter cs

• format_list_bulleted Frontend/css
• · 2021. 11. 6.
• textsms