본문 바로가기
반응형

분류 전체보기352

JSONForms - JSON으로 Form 만들기 https://jsonforms.io/ More forms. Less code. - JSON Forms More forms. Less code. jsonforms.io 이 사이트는 JSON으로 form을 만드는 기능을 제공한다. 근데 이게 의미가 있나? JSON은 어떻게 작성하지? 싶은데 샘플을 다양하게 제공하고 있어서 복붙으로 하면 쉬울것 같기도 하다. JSON을 읽어서 폼으로 만들어주는 리액트 컴포넌트가 제공되고 onChange같은 변경 이벤트도 제공한다. 2023. 6. 17.
색상 밝기 기준으로 상태 나타내기 이번에 리액트 네이티브 강의 들으면서 새로 배운 디자인 지식이 생겼다. 사실 알고는 있었지만 이러이러하게 하는게 좋다고 설명할 수 있지는 않았는데 이번에 정리가 됐다. 요하자면 컨트롤의 상태(선택, 비활성화, 일반 등)를 나타낼때 같은 색상 톤에서 밝기를 조절해서 상태를 나타내면 좋다는 점이다. 주로 일반(default) 상태는 500 비활성화(disable) 상태는 2-300 활성화(focus, click, selected) 상태는 7-800 으로 선택하면 된다고 한다. Customizing Colors - Tailwind CSS Customizing the default color palette for your project. tailwindcss.com 2023. 6. 17.
Material Theme Builder 도구로 메인 색상 확인해보기 이건 리액트 네이티브 랑 직접적으로 관련된 내용은 아니라서 나중에 다른 목차로 옮겨야 할 것 같다. Material Theme Builder라는 도구가 있다. 웹으로 접속할 수 있고 색상을 선택해서 어떤 느낌이 나는지 확인해 볼 수 있다. 웹 말고도 Figma로 된 도구도 제공해서 FIgma를 사용할 수 있으면 사용해보는것도 좋을 것 같다. https://m3.material.io/theme-builder Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital ex.. 2023. 6. 17.
canvas가 text-align 속성에 영향을 받는 이유 -상황- canvas가 왼쪽 오른쪽 마진이 엄청 들어가서 표시되는 문제 발생 보니까 뭔가 중앙에 표시되고 있는 것 같다. F12 누르고 이것저것 CSS를 막 넣었다 뺐다 해보다가 text-align:center라고 돼있는 부분을 빼니까 갑자기 제대로 나옴 왜지? 하고 찾아보니 canvas가 inline 요소이기 때문에 img, input 태그처럼 text-align에 영향을 받는다고 한다. https://stackoverflow.com/questions/45406873/why-does-text-align-have-an-effect-on-canvas Why does text-align have an effect on canvas? I have multiple canvases layered over each.. 2023. 6. 4.
왜 <T>를 as T로 바꾸라고 하는걸까? https://typescript-eslint.io/rules/consistent-type-assertions/ consistent-type-assertions | typescript-eslint Enforce consistent usage of type assertions. typescript-eslint.io 타입 변경에 사용한 부분에서 경고 메시지가 뜬다. 대신에 as T를 쓰라는 가이드가 있어서 보니.. 하나로 맞추라는 의미도 있고 JSX 문법이랑 헷갈리기 때문이라고 한다. 2023. 5. 31.
2023 채신 웹개발 잡기술 모음 https://www.youtube.com/watch?v=95YLHDzsg8A 1. Web GPU 2. View Transitions API - 페이지 전환 애니메이션 3. animation-timeline: scroll - 스크롤바의 위치에 따라 애니메이션 처리 문서 전체 기준으로 스크롤 진행도를 상단에 가로 스크롤로 표시하는 기능도 구현 가능 4. 새로운 컬러 속성 oklca() 라는게 생겼따. 밝기, 채도, 앵글 색상간의 밝기를 맞추려고 고생하지 않아도 된다. p3 색상을 지원하는 모니터가 많이 생겨서 이 함수로 해당 속성을 지정할 수도 있다. 5. container query 이런건 보통 미디어 쿼리로 했는데 미디어 쿼리는 브라우저 사이즈를 기준으로 동작했다. 이제는 이걸 특정 박스의 폭에 따라서.. 2023. 5. 27.
반응형

티스토리툴바