Dayjs · Nuxt ModulesDay.js module for Nuxtnuxt.com 설치npm i nuxt-dayjs nuxt.config.tsexport default defineNuxtConfig({ modules: [ 'dayjs-nuxt' ]}) composablesuseDayjs composable로 dayjs를 사용할 수 있다.const dayjs = useDayjs()dayjs.locale('fr') configurationdayjs 기본 설정export default defineNuxtConfig({ modules: ['dayjs-nuxt'], dayjs: { locales: ['ko', 'en'], plugins: ['timezone'], ..
티스토리챌린지
즉, 제 말은 글자 수가 한 줄 일 때는 평범하게 가운데 정렬로 나오고 글자 수가 2줄 이상일 때는 최대 2줄로 제한을 하고 초과된 내용을 숨기고 싶다는 의미입니다. 글자 가운데 정렬을 위해서는 flex 속성을 사용하고, 라인 수 제한을 위해서는 -webkit-line-clamp 속성을 사용합니다. -webkit-line-clamp - CSS: Cascading Style Sheets | MDN-webkit-line-clamp CSS 속성은 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한합니다.developer.mozilla.org 그런데 이제… 이 친구들은 display에서 겹치게 됩니다. 즉, 한 번에 한가지 밖에 사용을 못 하는 거죠. 그렇다면 어떻게 해야 하냐… 상위 속성에는 flex를 통해 ..
[ React ] SelectBox 컴포넌트 키보드 이벤트 추가 | onKeyDown키보드 이벤트 타입은 총 3가지가 있다. [ 모던 자바스크립트 ] 40. 이벤트1) 이벤트 드리븐 프로그래밍이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고, 이벤트가 발생했을 때 브라zodev.tistory.com 해당 컴포넌트에 이어서 작업한 내용(필요해서 찾고 있었는데 정리를 안 해놨더군요) 요구사항스크롤이 있는 옵션 리스트에서 키보드 이벤트를 통해 focus된 옵션을 이동 중일 때, 스크롤 아래쪽의 옵션이 focus되면 스크롤을 자동적으로 이동시키고 싶다. 구현1. OptionListBox에 ref를 걸어준다. 2. focusedIndex가 변화할 때 scrollIntoView를 통해 스크롤을 ..
Vue3에서는 v-slot을 통해 간편하게 slot을 사용할 수 있었다. 그렇다면 React에서는 어떻게 slot을 구현할까? 사용처(?)공통 컴포넌트 중 Modal을 만들다가, Head와 Footer는 공통적이면서도 Content 영역만 가변적으로 사용되게 하고 싶었다. 방법) – React" data-og-description="The library for web and native user interfaces" data-og-host="react-ko.dev" data-og-source-url="https://react-ko.dev/reference/react-dom/components/common" data-og-url="https://react-ko.dev/reference/react-dom..
tailwind에서 제공하는 단축어 사용 Handling Hover, Focus, and Other States - Tailwind CSSUsing utilities to style elements on hover, focus, and more.tailwindcss.com 그러나 내가 쓰려는 건 없다... tailwind + CSS 직접 작성/* 토요일 */#calendar-body span:nth-child(7n - 1) { @apply text-primary-500;}/* 일요일 */#calendar-body span:nth-child(7n) { @apply text-red-500;} 기본 CSS 적용하는 방법 + @apply 디렉티브
Tailwind CSS는 일반적으로 인라인에 사용하기 때문에 html 코드가 길어져서 가독성을 저해한다는 단점이 존재한다.그래서 Tailwind CSS가 너무 길면 줄바꿈을 실행하는 방법을 찾아봤다. Break long class names into multiple lines? [Prettier Plugin] · tailwindlabs tailwindcss · Discussion #7763Hey guys, it's not uncommon for class names to become very long, it's pretty hard to maintain and read. I somehow always break those class names into multiple lines manually, se..
Icon · Nuxt ModulesIcon module for Nuxt with 200,000+ ready to use icons from Iconify.nuxt.com 기본 세팅설치npm i -D @nuxt/icon nuxt.config.tsexport default defineNuxtConfig({ modules: [ '@nuxt/icon' ]}) 사용 방법1. Iconify provider 사용export default defineNuxtConfig({ icon: { size: '14px', class: 'icon', mode: 'svg', provider: 'iconify' },});provider를 iconify로 하면 별도의 데이터셋을 프로젝트에 저장할 필..
CSS 확장자 파일에 작성한 내용인데 CSS에는 @tailwind라는 문법이 없기 때문에 발생하는 경고 메시지이다. vscode의 settings.json의 CSS Lint:Unknown At Rules 설정을 바꿔준다.
[ Nuxt, Tailwind ] custom color 적용primary로 정의하고 싶어 tailwind.config.mjs 파일에 추가할 컬러를 작성해줬다. export default { theme: { extend: { colors: { primary: { 50: "#EFF7FF", ... }, }, }, },}; 분명 공식 문서에서는 tailwind config 파일에 이렇zodev.tistory.com이전 글의 방법이 되지 않을 경우에는,,, 공식 문서의 방법으로 회귀하는 방법이 있습니다. 참고로 다른 프로젝트이기 때문에 환경에 따라 사용에 차이가 생긴 것 같다.근데 사실 원인은 잘 모르겠다... // ❌ 이렇게 쓰지 마세여export default { // ... content: [ ..
primary로 정의하고 싶어 tailwind.config.mjs 파일에 추가할 컬러를 작성해줬다. export default { theme: { extend: { colors: { primary: { 50: "#EFF7FF", ... }, }, }, },}; 분명 공식 문서에서는 tailwind config 파일에 이렇게 정의하면 된다고 했는데,… export default { theme: { extend: { colors: { myColor: { 50: "#EFF7FF", ... }, }, }, },};뭐 이런 식으로 색상 명을 ..
