외울 수 없기에 내가 보려고 작성한닷!!!🐣
반응형 디자인을 할 때 사용되는 스타일 기능이다.
즉, 디바이스(전자기기)별로 달라지는 화면의 크기를 조정할 때 사용되는 CSS이다.
CSS
에서 사용되는 예시 코드는 다음과 같다.
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
import { css } from 'styled-components';
const sizes = {
mobile: 580,
tablet: 768,
desktop: 1024
};
export const media = Object.keys(sizes).reduce((acc, label) => {
acc[label] = (...args) => css`
@media (max-width: ${sizes[label] / 16}em) {
${css(...args)};
}
`;
return acc;
}, {});
const Box = styled.div`
/* props 로 넣어준 값을 직접 전달해줄 수 있습니다. */
background: ${props => props.color || 'blue'};
padding: 1rem;
display: flex;
width: 1024px;
margin: 0 auto;
${media.desktop`width: 768px;`}
${media.tablet`width: 768px;`};
`;
type MediaQueryProps = {
mobile: number;
tablet: number;
desktop: number;
};
const sizes:MediaQueryProps = {
mobile: 580,
tablet: 768,
desktop: 1024
};
export const media = (Object.keys(sizes) as Array<keyof typeof sizes>).reduce(
(acc, label) => {
acc[label] = (style: String) =>
`@media (max-width: ${sizes[label]/ 16}em) { ${style} }`;
return acc;
},
{} as { [index: string]: Function }
);
ESLint 적용 시 타입에 대한 오류가 난다. 그 때 밑에 코드를 이용하여 작성하면 된당!
import { CSSProp } from 'styled-components';
type MediaQueryProps = {
mobile: number;
tablet: number;
desktop: number;
};
const sizes:MediaQueryProps = {
mobile: 580,
tablet: 768,
desktop: 1024
};
const media = (Object.keys(sizes) as Array<keyof typeof sizes>).reduce((acc, label) => {
acc[label] = (style: string) => `@media (max-width: ${sizes[label] / 16}em) { ${style} }`;
return acc;
}, {} as { [key in keyof typeof sizes]: (style: string) => CSSProp });
출처) Media Queries in Styled Components - Typescript
출처) DRY media queries - styled-components + typescript
출처) 다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components