분류 전체보기30 [React]Tailwind CSS 적용해서 사용하기 테일윈드 란- 유틸리티 우선 CSS 프레임워크로써 미리 정의된 스타일을 사용하는 것이 아니라사용자가 원하는 대로 각 속성 값을 적용하고 사용하는 것임.(간단하게) 기존에 사용하던 scss,sass말고 요즘 많이 사용하는 테일윈드를 사용해서 새롭게 프로젝트를 진행 했었는데사용한 후기의 제일 큰 장점은 한 파일에 css코드까지 다있어서 직관적이고 한 눈에 다 보기 쉬운 것이였지만처음에는 확실히 적응하는데 시간이 걸리지만 그렇게 어렵지 않아서 적응만 하면 충분히 좋은 것 같습니다. 간단하게 사용하는 방식은Hello 이런식으로- 배경은 흰색(bg-white)- 배경은 흰색(text-xl) 대략 20px 전후- 배경은 흰색(mr-1) margin-right: 0.25rem (4px) 를 적용 이런식으로 사용 Ta.. 2025. 8. 20. css로 돌아가 업데이트(:is(),:has(),컴포넌트 반응형) css 지속적인 업데이트최근에는 Tailwind를 주로 사용하고 있지만 css기능들이 점점 업데이트 되면서 scss보다 css를 사용할지 고민이 되네요.새롭게 추 가된 기능을 소개해드릴께요. :is () 선택자 /* :is()를 사용한 예시 */:is(h1, h2, h3) { color: red;} 이렇게 하면 h1, h2, h3 태그에 모두 color: red 스타일이 적용됩니다. :is()는 선택자가 길어질 때 가독성을 높이고, 반복되는 스타일을 더 간단하게 작성할 수 있게 해줍니다. :has() 선택자:has()는 부모 요소가 특정 자식 요소를 포함할 때 스타일을 적용하는 선택자입니다. 예를 들어, 자식 요소가 있을 때 부모 요소에 스타일을 적용할 수 있습니다. 이는 "부모 요소가 자식 요소를 .. 2025. 2. 8. Volta!! node,package 버전 관리툴!!추천(nvm대체) 오늘은 nvm 대체 툴인 volta를 소개할려고 한다!!사내에서 nvm을 대체해서 좀 더 편하고 간단하게 node 버전을 관리하기 위해서 도입하게 된 툴인데 제가 꾸준히 보고 있는 IT정보 기사에서 알게 되어서 웹 개발팀에 도입하게 되었다. 간단하게 소개하면 node버전을 관리할 수 있는 툴로 Javascript Tool Manager 입니다. global package의 버전을 프로젝트에 따라 다르게 관리 할 수 있어서 좋음!! 그리고 Rust로 만들어져 굉장히 빠른데(nvm또 빨라서 속도면에서는 큰 체감이 안 느껴짐)Window,Linux,MacOS를 지원 설치https://docs.volta.sh/guide/getting-started Getting Started | VoltaGetting Sta.. 2024. 5. 30. React 상태관리 라이브러리 - Zustand 설명 및 사용법 사내에서 새롭게 시작하는 프로젝트에서 새로운 상태관리 라이브러리를 써보자고 해서 조사하다가 도입하게된 "Zustand"에 대해서 소개 하겠습니다. Zustand- Zustand는 독일어로 "상태"라는 뜻인데 "Jotai"라는 상태 라이브러리를 만든 개발자들이 만든 상태관리 라이브러리로 알려져 있습니다. Zustand의 가장 큰 장점은 매우 쉽다는 것입니다. 보일러플레이트 코드는 거의 없고 Redux Devtools를 사용할 수 있어서 Debugging도 용이하게 할 수 있다. Zustand 사용법1. Zustand 다운로드 npm i zustand # or yarn add zustand 2. store 생성 // store.js 타입스크립트이면 store.tsximport { create } from.. 2024. 5. 14. CSS button hover/active 웹 페이지 버튼 페이지 개발 할때 특정 이벤트 발생 시킬 때 많이 사용하는것이 button 이다. button의 onclick 기능으로 button을 click 했을 때 특정 작업이 일어나도록 할 수 있는데 이런 button을 조작 할 때 같이 사용 되는 것이 hover 및 active 이다. hover button을사용자가 click하는 것 처롬 보이게 하는 효과를 넣기 위해서 주로 사용 하는데 button 위에 mouse를 올려 두면 hover 효과가 나타난다 .button { background-color : white - 처음 기본 색깔이 흰색이지만 &:hover { background-color : red - 마우스를 올려두면 빨강색으로 변함 } } active button을 사용자가 눌렀을 때.. 2024. 4. 8. ChatGpt(새로운 직업 프롬프트 엔지니어)에 대해!! 엄청난 빠른 속도로 사용자를 모은 chatgpt 컴퓨터로 학업 및 일을 하는 사람들은 경험을 안해 본 사람들이 거의 없을 정도로 최근 가장 핫한 AI 기술이다. 엄청난 사용자를 모은 chatgpt 프롬프트 마켓플레이스 라는 새로운 시장을 통해서 앞으로 더욱 AI에 시장을 점령할거라고 생각하는데 이에 대해서 알아보자!! 프롬프트란?? - ChatGPT라는 대화형 인공지능을 더욱 효율적으로 사용하기 위한 기술로 사용자가 원하는 결과를 만들기 위해서 더욱 정확하고 명확한 프롬프트를 제공하는 것이 중요하다!! 프롬프트의 중요성 1. 정확한 결과물 생성 2. 더 빠른 결과 도출 3. 스타일 및 톤의 조절 4. 개인화된 대화 5. 다양한 활동 가능성 이러한 프롬프트를 잘 활용하고 사용자가 원하는 내용을 얻을 수 있.. 2024. 2. 8. 이전 1 2 3 4 5 다음
