css 썸네일형 리스트형 Media Query 설정 Desktop (1281px 이상) @media (min-width: 1281px) { //CSS } Laptop, Desktop (1025px ~ 1280px) @media (min-width: 1025px) and (max-width: 1280px) { //CSS } Tablet(세로) (768px ~ 1024px) @media (min-width: 768px) and (max-width: 1024px) { //CSS } Tablet(가로) (768px ~ 1024px) @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { //CSS } Tablet(저해상도), Mobile(가로) (481px ~ 767px) .. 더보기 Implement multiple styles into the inner style prop Inner style prop에 다중 스타일 적용 하기 Example 1) Style object 에 특정 조건에 따라 스타일을 적용 시킬 경우. style={ tempVaraiable ? {backGround: 'red'} : {background: 'blue'} } Example 2) Style object 에 특정 조건에 따라 다중 스타일을 적용 시킬 경우 style={Object.assign( { cursor: currentCellData.onClick ? 'pointer' : 'inherit' }, currentCellData.style && currentCellData.style )} - 2개의 스타일 object 를 Object.assign() 을 통해 통합 하고 style prop 으로 전달 더보기 Typescript transpile CSS, etc.. Transpile - 'tsc' 명령어를 통한 트랜스파일 ( JS로 변환) 은 TS, TSX 파일만 가능 하다. 하지만 이번에 맡은 Task에서, 특정 transpile 된 ts, tsx과 함께 CSS 또한 import 될 필요가 있었다. - 직접 적으로 해당 CSS 파일을 transpile 된 ts, tsx과 함께 같은 directory (폴더)에 넣어 주면 되지만, 매번 이러한 방법은 불편하기 때문에 'tsc'라는 명령어와 함께 CSS 파일 또한 transpile 된 파일들과 묶어지는 방법을 찾아봤다. 1. 두 가지 node module package를 설치해준다 a. npm install --save-dev rimraf b. npm install --save-dev copyfiles 2. 특정 스크.. 더보기 Search Input - Expanding Event CSS 서치 박스 구현 하기 HTML 삽입 미리보기할 수 없는 소스 코드 HTML CSS Before expanded .search { border: none; height: 36px; width: 36px; border-radius: 18px; /* half of 36, to make it circular */ padding-left: 36px; /* left position: 10px, bg size: 16px */ background: url(./Shape.svg) no-repeat 10px/16px, white; cursor: pointer; } After expanded .search { transition-property: width, border-radius, box-shadow; trans.. 더보기 Button - Hover Event HTML 삽입 미리보기할 수 없는 소스 코드 .btn { position: relative; background: none; border: solid 1px #121212; transition: color 200ms; } .btn:is(:hover,:focus) { color: white; } .btn::after { position: absolute; content: ''; inset: 0; z-index: -1; background-color: #121212; transform-origin: left; transform: scaleX(0); transition: transform 200ms; } .btn:is(:hover, :focus)::after { transform: scale(1); } 더보기 스토리북 docs 에서 특정 component에 css 적용 내용 특정 component 가 docs 페이지에서 랜더 될 때, 해당 component만 css를 적용하고 싶을 때가 있다. 특정 컴포넌트. stories.tsx 파일에서 해당 컴포넌트 decorators에 위 사진과 같이 적용시키면 끝. - * 문제는 안에 존재하는 children elements에 특정 스타일 적용하고 싶을 때, 아직 해결 방법을 못 찾은 것 ㅜㅜ Ref https://storybook.js.org/docs/react/writing-stories/decorators 더보기 이전 1 다음
