본문 바로가기

CSS3

[React] Material UI의 TextField 만들어보기 워낙 유명한 MUI의 TextField 컴포넌트다. 깔끔하고 직관적이다. 번잡하지 않은 애니메이션으로 UX도 상당히 좋다고 생각한다. css만으로 해당 컴포넌트를 만들어보자. 구조는 아래처럼 input 태그와 label 태그를 감싸는 컨테이너 div 태그하나로 구성하였다. //TextField.tsx import { useState } from "react"; import "./style.css"; interface TextFieldProps { label: string; } const TextField = (props: TextFieldProps) => { const { label } = props; const [value, setValue] = useState(""); return ( setValue.. 2022. 9. 4.
[React/Typescript] CSS Property를 Props로 사용하는 법 컴포넌트를 만들 때, CSS Property 값을 Props로 받고 싶을 때가 있다. style 자체를 넘겨받고 싶을 땐, React에서 제공해주는 React.CSSProperties 타입을 사용하면 된다. interface TestProps { style: React.CSSProperties; } const Test = (props: TestProps) => { return ; }; export default Test; 하지만 css property 중 하나의 값을 프롭으로 받고 싶다면 어떻게 해야 할까? csstype 모듈에서 StandardProperties를 import해서 원하는 css property를 키값으로 넣어주면 된다. import type { Properties } from "csst.. 2022. 8. 22.
반응형 CSS, 뷰포트, 여러 단위(%, vw, em, rem), 미디어 쿼리 반응형 css를 처음 접하고 공부를 할 때, 뷰포트나 여러 단위(%, vw, em, rem) 등이 많아 되게 헷갈렸었는데, 개발 시에 어떤 식으로 적용이 가능한지 그리고 애매한 개념들에 대해 정리해 보겠습니다. 뷰포트(viewport) 뷰포트란 사용자가 브라우저에서 웹 페이지를 볼 수 있는 영역을 의미합니다. 일반적으로, 데스크탑에서는 브라우저의 크기에 따라 뷰포트의 크기가 변합니다. 웹 개발을 할 때 개발자 도구에서 확인해 보면 브라우저의 크기에 따라 html 태그의 크기가 변하는데, html 태그의 width 기본값이 100%라서 그렇습니다. html 태그의 넓이가 뷰포트 영역의 넓이와 같냐고 한다면, 꼭 그렇지는 않습니다. 스크롤바 또한 뷰포트 영역에 포함되기 때문에, 스크롤바가 있다면 html 태.. 2022. 4. 2.

티스토리툴바