CSS

@tailwindtailwind의 base, components, utilities, variants 스타일을 적용하기 위해 사용하는 디렉티브/** * Tailwind의 기본 스타일과 플러그인이 등록한 모든 기본 스타일을 삽입 */@tailwind base;/** * Tailwind의 컴포넌트 클래스와 플러그인이 등록한 모든 컴포넌트 클래스를 삽입 */@tailwind components;/** * Tailwind의 유틸리티 클래스와 플러그인이 등록한 모든 유틸리티 클래스를 삽입 */@tailwind utilities;/** * 각 클래스의 hover, focus, responsive, dark mode 등 다양한 변형 클래스의 삽입 위치를 제어 * * 생략할 경우 Tailwind는 기본적으로 이러한 클..

input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}

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..

Flexboxflex는 flex-grow, flex-shrink, flex-basis의 단축 속성즉,flex: {flex-grow} {flex-shrink} {flex-basis}; flex-grow자식 요소가 부모 요소 내부에서 할당 가능한 공간의 정도모든 자식 요소의 flex-grow 값이 같으면 동일한 공간을 할당받는다. flex-shrink자식 요소의 크기가 부모 요소보다 클 때, flex-shrink에 설정된 숫자값에 따라 부모 요소 내부에서 자식 요소의 크기가 축소된다. flex-basis자식 요소의 초기 크기width를 나타내는 단위lengthpercentageauto 키워드content 키워드콘텐츠 크기에 따라 자동으로 크기 설정   +부모 요소가 flex일 때, 자식 요소가 가능한 한 최..

박스 요소의 가로 또는 세로의 길이가 px, rem 등 고정된 값이 아니라 %, vw, vh 등의 가변적인 값으로 설정되었을 때, 해당 요소의 가로 세로 비율을 정하는 방법 aspect-ratio요소의 가로 세로 비율을 설정 (가로/세로)aspect-ratio: 3/4; // -> 가로3:세로4 슬래시를 사용하지 않을 경우, 가로/1 로 자동 적용된다.%는 사용불가  CSS aspect-ratio 속성 : 요소의 가로 세로 비율 설정 - 코딩에브리바디aspect-ratio 속성은 이미지나 비디오 동영상, div 등 요소의 원하는 가로 세로 비율을 설정합니다. aspect-ratio 속성 사용법과 작동하지 않는 사례, 그리고 주의할 점에 대해 살펴보겠습니다.codingeverybody.kr

styled components가 제공하는 keyframes로 만들고 싶은 애니메이션을 정의한 후, 변수 사용하듯이 ${ }로 감싸서 사용한다. import styled, { keyframes } from "styled-components";const fadeIn = keyframes` 0% { transform: scale(0) translate(-50%); } 100% { transform: scale(1) translate(-50%); }`;export const StyledComponents = styled.div` animation: ${fadeIn} 0.3s ease forwards;`;

목표브라우저의 크기에 따라 컨텐츠 영역이 동적인 높이 값을 가지고 있으며, 내용이 많을 때만 스크롤이 자동 생성된다.  문제높이를 정적으로 정하면 브라우저의 크기에 따라 컨텐츠 영역이 동적으로 변경되지 않음높이를 %로 주거나 모호하게 주면 스크롤이 생성되지 않음  구현상위 컴포넌트.r-table { position: relative;}  내부 영역.r-table-content { position: absolute; top: 172px; // 위치 height: calc(100% - 175px); // 동적 높이 overflow-y: auto; // 스크롤바 생성}     결과브라우저 높이 ⬆컨텐츠 영역의 높이 ⬆ 스크롤..

quasar에서 제공하는 스타일이나 flex 등은 class에 작성해줘야 한다. (비슷한 맥락에서 tailwind는 className에 작성) 그때 조건부로 스타일을 지정하고 싶어서 그 방법을 찾아봤다.  :class="[조건? 'ture일 경우 class' : 'false일 경우 class']"  ✅ 사용 예시:class="{ 'cell-border': true, 'bg-grey-4': props.row.volatilType.dtlCd !== '4',}"

텍스트와 관련된 태그인 p, h1 ~ h6 태그는 기본적으로 문단을 한 줄로 표현한다. 그런데 이 문단의 길이가 지정된 가로 너비를 넘어가면 ...로 글자 trunc(절삭) 처리를 해주거나 줄바꿈을 해줘야 한다. 이때 줄바꿈을 위해서는 white-space라는 속성을 사용하는데, 해당 속성의 키워드에 대해 정리해보려 한다. white-space // test할 문장 구문 content: `white-space 속성의 각각 키워드에 대해 알아보자 1 white-space 속성의 각각 키워드에 대해 알아보자 2 white-space 속성의 각각 키워드에 대해 알아보자 3 `, normal 연속 공백을 하나로 합친다 (1, 2, 3 숫자 앞의 띄어쓰기를 하나만 남긴다) 줄 바꿈(개행 문자)은 무시한다 한 줄이..