프론트엔드 개발자가 될거야./css 라이브러리
-
[TailwindCSS] TailwindCSS 유용한 속성프론트엔드 개발자가 될거야./css 라이브러리 2023. 5. 15. 12:53
놀라운 점은 tailwind에만 있는 속성이 아니고 기존 css에도 있는 속성도 많다. space-x-3 자식 컴포넌트의 좌우 margin을 알아서 계산해줘서 margin을 따로 생각할 필요가 없다. css로 보면 이러한 구성이다. .space-x-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.75rem * var(--tw-space-x-reverse)); margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); } ring list (array.map) : 배열을 map으로 돌릴 때 사용할 수 있는 속성들이다. 1. first, last f..
-
[TailwindCSS] TailwindCSS란? TailwindCSS 사용법프론트엔드 개발자가 될거야./css 라이브러리 2023. 5. 15. 12:21
회사에서 계속 CSS 라이브러리로 Styled-component만 썼는데 이에 국한되고 싶지 않아서 TailwindCSS를 공부하고 있다. https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com TailwindCSS TailwindCSS는 유틸리티 우선 CSS 프레임워크로 아주 많은 클래스네임을 가지고 있다. 여기서 유틸리티란 tailwindCSS가..
-
[react][typeScript][styled-component] hover시 svg 이미지 색깔 바꾸기프론트엔드 개발자가 될거야./css 라이브러리 2023. 2. 8. 15:32
이미지는 png, jpg, svg 등 여러 확장자를 가진다. 나는 그동안 png를 많이 썼는데 header의 icon 이미지를 hover 했을 때 hover 이벤트로 색상을 변경해 주어야 할 때 png를 쓰면 color를 변경할 수 없어서 이미지를 바꿔줘야하는데 이 방법은 매우 비효율적이라는 생각이 들었다. 예를들어 이런 상황이다. 바이낸스의 헤더 그래서 header의 이미지 중 hover 이벤트로 색상을 변경해주어야 하는 이미지는 svg로 바꾸어 주었다. SVG ? svg 파일은 픽셀로 이루어진 png 파일과는 다르게 라인과 곡선들로 이루어져 있다. 이런 점에서 파일을 확대하거나 줄였을때 이미지가 깨지지 않고 그대로 선명함을 유지한다. svg 파일은 값을 조작 할 수 있기 때문에 js를 이용해서 svg..