CSS

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 숫자 앞의 띄어쓰기를 하나만 남긴다) 줄 바꿈(개행 문자)은 무시한다 한 줄이..

border의 문제점hover를 했을 때 border가 생기게 하고 싶어서 hover 의사 클래스 내부에 border에 관한 css를 추가해줬다.  button:hover { border: 2px solid #3576F4;} 다만 border 속성은 요소의 바깥에 그려지기 때문에 테두리가 있을 시와 없을 시의 요소 크기가 달라진다는 문제점이 있다.   이를 해결하기 위한 방법은 여러가지가 있겠지만 가장 간편한 방법을 찾았다! 바로 border 대신 box-shadow 속성을 쓰는 것!!!  bor-shadowbutton:hover { box-shadow: 0 0 0 2px #3576F4 inset;} 1. 최대 4개의 length 값 → 오프셋의 길이 순서대로..

버튼을 눌렀을 때 생성되는 테두리를 없애고 싶을 때는 어떻게 해야할까? 2가지를 생각해야 한다.  1. border가 아닌 outline 속성이라는 점2. 클릭 이벤트가 발생한 시점 즉, focus 상태에서 속성을 지정해줘야 한다는 점   모든 button에 기본 속성으로 정해주고 싶으면 이런 식으로 태그 선택자에 :focus 의사 선택자를 이용해 적용하면 된다. button:focus { outline: none }  또는 styled components에서 개별 속성에 해당 속성을 작성하고 싶으면 아래처럼 작성하면 된다. &:focus { outline: none;}