[CSS] transition에 대해 알아봅시다 transition은 요소의 상태 변화에 따라 부드러운 애니메이션 효과를 제공하는 CSS 속성입니다. animation과 달리, transition은 요소의 상태 변경(예: hover, focus, active 등)에 반응하여 특정 방향으로만 애니메이션을 적용할 수 있다는 특징이 있습니다.실 사용법:바쁘신 분들은 아래 코드팬 코드를 우선적으로 보셔도 됩니다. See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.">See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.hover 이벤트에 transition을 주고 싶을 경우 주체가 되는 요소에 transitinon을 주어야 합니다.여기서.. 2024. 11. 21. [Node JS] TypeError: value.replaceAll is not a function 만약 현재 node 14 이하의 버전을 사용하고 계신다면 아래와 같은 에러 코드가 나올 수 있습니다.connect-pg-simple의 오류인데요.이 오류를 해결하기 위해서는 node 버전을 15 이상으로 업그레이드해 주시면 됩니다. 2024. 11. 20. [Node JS] 윈도우에서 14, 15버전 설치가 안되는 이슈 해결 방법 원인:어느 날부터 갑자기 nvm에서 node 14와 15 버전을 포함해 그 이하 버전을 지원하지 않게 되었습니다. node js 설치 후 사용 시:현재 PC에서는 이 앱을 실행할 수 없습니다. nvm install 명령어 실행 시 nvm isntall 14 #코드 실행 시 아래와 같은 failed 반환Rollback failed. remove D:\_16_nvm_root\nvm\v14.21.3\node64.exe: The process cannot access the file because it is being used by another process.위와 같은 문제가 발생하신다면 아래 방법을 시도해 보시기를 바랍니다.윈도우 시작 버튼 클릭 > cmd 열기cmd에서 where nvm을 통해 nvm 위치.. 2024. 11. 19. display:grid 간단 사용법과 grid로 반응형 하는 법 오늘은 저번 flex에 이어 grid를 알아보겠습니다.flex는 1차원(선) 컨텐츠에 적합하고, grid는 2차원(면) 컨텐츠에 적합합니다. flex와 grid가 무엇이 다르냐 여쭤보시면 직관적인 설명으로는 아래 구조를 보여드릴 수 있을 것 같습니다.대부분의 사이트는 flex로 구현할 수 있습니다.그러나 2번째 예시 같은 구조는 반응형까지 고려하였을 때 그리드로 만드는 게 무척 편합니다. 그럼 이어서 알아두면 쓸모 많은 grid에 대해 설명해 드리겠습니다.아래 설명에서 “중요”라고 적은 속성들만 우선 외워두시거나 메모해 두시면 큰 도움이 될 겁니다.실제 사용 예시바쁘신 분들은 아래 CodePen 코드만 보셔도 됩니다!0.25x와 0.5x를 통해 코드창에서 반응형을 체험하실 수 있습니다.Grid 레이아웃 .. 2024. 11. 18. display: flex;에 대해 알아봅시다 오늘은 display: flex;에 대해 알아보겠습니다.최종적으로는 flex를 통해 display: gird;를 소개해드리는 것이 목표입니다.grid에 관한 설명은 다음 글에서 이어서 하겠습니다.grid를 이해하기 위해서는 먼저 flex를 이해해야합니다.flex는 가로나 세로로 컨텐츠를 배치할 수 있는 CSS 속성입니다.1차원(선)이 flex, 2차원(면)이 gird라고 이해하면 편합니다.그러나 flex-wrap을 사용해서 flex도 면과 같이 사용할 수 있고 grid도 1차원적으로만 사용할 수 있기 때문에 정확한 설명은 아닙니다.flex 이전에는 float라는 속성을 사용했습니다.float: right; float: left;를 사용해서 컨텐츠를 좌에서 우로, 우에서 좌로 흐를 수 있도록 했었지요.가끔.. 2024. 11. 17. 아웃룩 사용 팁 + 토틀 프로그램 추천 저는 업무 중 아웃룩을 사용하고 있습니다.아웃룩은 무겁고 복잡하기에 진입 장벽이 다소 있는 편입니다.하지만 사용하다 보면 아웃룩만한 메일 프로그램도 없기에 여러분이 아웃룩과 좀 더 친해지기를 바라는 마음으로 글을 적어보겠습니다.클래식 아웃룩과 새 아웃룩 동시에 열기:최근 마이크로소프트가 새 아웃룩(웹 기반의 아웃룩)으로 넘어가려고 다양한 시도를 하는 것이 보입니다.새 아웃룩으로 넘어가지 않겠냐는 팝업부터, 우측 상단에 계속해서 눈에 띄는 “새 아웃룩으로 전환” 버튼이 바로 그것입니다.하지만 인터페이스나 기능의 이유로 클래식 아웃룩을 사용하셔야 하는 분들도 있습니다. 그리고 간간히 새 아웃룩을 써야 하는 상황이 있을 수도 있지요.이때 아래 방법을 참고해 보시기를 바랍니다.윈도우 시작 버튼 클릭 > Outl.. 2024. 11. 16.
