728x90 반응형 css8 [Next] Storybook으로 UI 컴포넌트 문서화하기 (2) - Tailwind 적용 안녕하세요. J4J입니다. 이번 포스팅은 storybook으로 UI 컴포넌트 문서화하기 두 번째인 tailwind 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Storybook으로 UI 컴포넌트 문서화하기 (1) - 기본 설정 Tailwind 사용 예시 프로젝트 개발을 할 때 tailwind를 사용하시던 분들이 storybook을 처음 도입을 하게 되면 제일 먼저 당황하는 부분은 storybook에 css가 적용되지 않는 현상입니다. 서버를 구동하여 확인할 수 있었던 다양한 컴포넌트들의 디자인들이 storybook에서는 올바르게 보이지 않아 설정에 의문을 품게 됩니다. 예를 들어 다음과 같이 tailwind를 사용하여 새로운 버튼을 만들어 보겠습니다. import { M.. 2023. 12. 26. [React] Tailwind 사용하기 (3) - 커스텀(Custom) 하기 안녕하세요. J4J입니다. 이번 포스팅은 tailwind 사용하기 마지막인 커스텀하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] Tailwind 사용하기 (1) - 개념 및 설정 [React] Tailwind 사용하기 (2) - StyledComponents와 CSS 적용 비교하기 Theme 커스텀 theme 커스텀은 기본적으로 tailwind에서 제공해 주는 theme을 사용자의 스타일에 맞게 재 정의하는 것으로 tailwind.config.js에서 적용할 수 있습니다. 색상, 글자 크기, 너비 등 tailwind를 이용하여 적용하고 싶은 css 들을 원하는 데로 추가해 줄 수 있으며 다음과 같이 설정하여 적용해 볼 수 있습니다. // tailwind.config.js /*.. 2023. 5. 24. [React] Tailwind 사용하기 (2) - StyledComponents와 CSS 적용 비교하기 안녕하세요. J4J입니다. 이번 포스팅은 tailwind 사용하기 두 번째인 styledComponents와 CSS 적용 비교하기에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] Tailwind 사용하기 (1) - 개념 및 설정 들어가기에 앞서 이전 글에서도 간단하게 확인해 볼 수 있는 것처럼 tailwind에 css를 적용할 땐 tailwind에서 기본적으로 정의해 둔 class 명을 이용해야 합니다. 색상, 크기, 여백 등의 모든 css들이 기본적인 css 구조에서 스타일을 적용하기 위해 사용하던 방식과 모두 상이하기에 처음 tailwind를 사용하시는 분들이라면 tailwind 공식 문서를 당분간 필수적으로 참고하시는 것을 추천드립니다. 그리고 이번 글에서는 일반적으로 자주 사용되.. 2023. 5. 22. [React] Tailwind 사용하기 (1) - 개념 및 설정 안녕하세요. J4J입니다. 이번 포스팅은 tailwind 사용하기 중 첫 번째인 개념 및 설정에 대해 적어보는 시간을 가져보려고 합니다. Tailwind란? tailwind는 유틸리티 우선(Utility-First) css 프레임워크로 불립니다. 여기서 말하는 유틸리티 클래스는 버튼, 모달 등과 같이 주변을 구성하기 위한 css가 아닌 빨간색 글자 색상, xl 사이즈의 글자 크기 등과 같이 하나의 css에 정의된 속성과 값을 가지는 걸 의미합니다. 즉, 유틸리티 우선이라고 하는 것은 bootstrap처럼 기존에 정의된 값을 가져와 사용하는 것이 아닌 사용자가 원하는 데로 각각의 속성값을 적용하는 방식이라고 말할 수 있습니다. // css .container { border: 2px solid black;.. 2023. 5. 17. [CSS] linear-gradient에 transition 적용하기 안녕하세요. J4J입니다. 이번 포스팅은 linear-gradient에 transition 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 일반적인 경우 linear-gradient에 transition을 적용한 결과물을 만들기 위해 일반적으로 다음과 같은 형태의 코드를 작성할 것입니다. See the Pen linearGradientTransition-problem by 김 성찬 (@ksccmp) on CodePen. 위의 코드는 버튼을 클릭할 때마다 배경색을 입혀주는 코드입니다. 배경색은 linear-gradient로 입혀주고 transition을 적용했기 때문에 일반적으로 위의 코드에서 결과물이 transition에 적용된 시간 동안 천천히 배경색이 입혀지는 것을 생각할 수 있습니다. 하지.. 2023. 1. 2. [CSS] display: none이 transition으로 적용되지 않을 경우 안녕하세요. J4J입니다. 이번 포스팅은 display: none이 transition으로 적용되지 않을 경우 해결하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 발생되었던 상황 적용하고자 했던 css는 버튼을 클릭할 때 div 안에 포함되어 있는 모든 요소가 자연스럽게 화면에 보이지 않는 애니메이션을 적용하려고 했습니다. 간단하게 예시를 들어보면 다음과 같습니다. See the Pen displayNoneTransition-problem by 김 성찬 (@ksccmp) on CodePen. 위에서 toggle 버튼을 클릭하면 문구가 자연스럽게 사라지는 것을 확인할 수 있습니다. 하지만 문구가 있던 곳에 마우스를 가져다 대면 cursor: pointer을 적용했던 부분이 그대로 마우스에 표현되는 것.. 2022. 8. 29. [React] StyledComponents와 Emotion을 비교해보기 (2) - css 안녕하세요. J4J입니다. 이번 포스팅은 StyledComponents와 Emotion을 비교해보는 시간에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 styled를 이용한 비교를 원하시는 분들은 다음 링크를 참고해주시길 바랍니다. [React] StyledComponents와 Emotion을 비교해보기 (1) - styled 이번에는 Emotion을 사용할 때 styled가 아닌 css를 사용하여 구현하는 테스트 코드를 작성해보며 StyledComponents와 비교해보는 시간을 가져보겠습니다. StyledComponents 개발 환경 세팅 [ 1. 패키지 설치 ] $ npm install styled-components styled-reset $ npm install -D @types/s.. 2022. 2. 26. [CSS] 타이핑 치는 효과를 주는 CSS 안녕하세요. J4J입니다. 이번 포스팅은 타이핑 치는 효과를 주는 CSS에 대해 적어보는 시간을 가져보려고 합니다. 타이핑 치는 CSS 타이핑 치는 효과를 주는 방법에 대해 궁금증이 생겨 검색을 해봤을 때 정말 다양한 방법들을 발견할 수 있었습니다. 제가 해보고자 했던 것은 개행이 존재하는 장문의 글에 대해 타이핑 효과를 주며 화면에 보이게 하는 것이었는데 마땅한 레퍼런스를 찾지 못하다가 이런 방법도 있겠구나라는 생각을 가지며 한 번 구현해봤습니다. 기본적으로 해당 방법에서 메인 역할을 하는 것은 setInterval입니다. 조건에 도달할때까지 주기적으로 계속 반복하며 글자들을 하나씩 담아내는 방법을 사용해 봤습니다. See the Pen 타이핑 효과 by 김 성찬 (@ksccmp) on CodePen... 2021. 8. 9. 이전 1 다음 728x90 반응형
