CSS9 [css] not selector .react-grid-item:not(.react-grid-placeholder) { /* ${({ isReportMode }) => isReportMode ? `border: 1px solid ${GRAY(25)};` : ''}; */ /* border-radius: ${({ isReportMode }) => isReportMode ? '2px' : `${WIDGET_BORDER_RADIUS}px`}; */ } 2023. 5. 4. [css] ellipsis with flexible width export const Wrapper = styled.div` display: flex; width: 200px; `; export const Flex1Div = styled.div` flex: 1; `; export const Content = styled.div` white-space: nowrap; text-overflow: ellipsis; overflow: hidden; & > * { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } `; --------------------------------------------------------------------------------------------------------- 2023. 4. 27. [event] window.matchMedia - mobile detecting: 모바일 확인 하기 + React Hook 1. javascript window.innerWidth and window.innerHeight: to get size of mobile device navigator.userAgent : To check if a device is a mobile device function isMobileDevice() { const userAgent = navigator.userAgent; return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent); } function getScreenSize() { const width = window.innerWidth || document.documentElement.client.. 2023. 4. 6. the-dom-challenge: Build something with only vanilla Javascript [The Dom Challenge]https://github.com/devkodeio/the-dom-challenge 2022. 7. 22. [CSS] Disabling text selection => user-select property How do I prevent the browser (JavaScript and CSS) from disabling text selection on web pages without disabling all JavaScript?Ask Question Search: javascript css how to prevent content selected div.disable { user-select: none; } [css] disabling text selection 2022. 7. 10. [css][filter] blur CSS filter document filter: blur(0); filter: blur(4px); filter: blur(1.5rem); 2022. 7. 9. CSS selector with data attribute [css] selector [attributes=”—”], data attributes with data attribute div[data-your-name="tio"] { } with javascript dom manipulation const dom = document.querySelector('div.test[data-id="100"]'); General usage [class="(╯°□°）╯︵ ┻━┻"]{ color: red; font-weight: bold; } [data-value] { /* Attribute exists */ } [data-value="foo"] { /* Attribute has this exact value */ } [data-value*="foo"] { /*.. 2022. 7. 4. @page: how to change size of page when printing, A4, portrait, landscape The @page CSS at-rule is used to modify some CSS properties when printing a document. @Page @page { } /* example */ @page { margin: 1cm; } @page :first { margin: 2cm; } size Specifies the target size and orientation of the page box's containing block. In the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet. /* Keyword valu.. 2022. 7. 2. @media only print: apply css only on print mode pinrt css inside @media only print only applied when printing @media only print { .body { background: black !important; } 2022. 7. 2. 이전 1 다음
