[CSS] animation에 대해 알아봅시다 CSS의 animation은 단어 그대로 html에 애니메이션을 입힐 수 있는 속성입니다.animation의 활용법은 무궁무진합니다. 가끔 코드팬을 둘러보면 무척 재밌고 유쾌한 코드들이 많이 있습니다시간이 있으실 경우 구글에 “codepen animation”이라고 검색해 보시면 다양한 개성의 코드들을 만나 보실 수 있을 겁니다.실 사용법:marquee 효과: See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.">See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen. 파도 애니메이션: See the Pen Untitled by 이종원 (@orugpbqu-the-solid) o.. 2024. 11. 22. [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.
