프론트엔드 첫걸음

See the Pen React Accordion 2 by JEONG (@cona) on CodePen. 제목을 저렇게 지은 이유는 transition 으로 펼쳐지는 아코디언을 구현할때 가장 어려웠던 부분이 바로 scrollHeight였기 때문이다. 펼쳐지는 부분 (보통 질문에 대한 답이 있는 부분) 의 높이가 각각 다른데 transition 하는 요소에서 펼쳐졌을때의 height를 100%로 하면 transition이 적용되지 않는다. scrollHeight로 펼쳐졌을때의 px 을 대입해주어야 한다.

body영역 마지막에 script를 넣을 시 "id"직접 불러와 이벤트를 적용할 수 있다. 나만 몰랐나?? See the Pen getElementById 생략 by JEONG (@cona) on CodePen. js코드를 head에서 부르면 window.onload = function() 를 사용해야한다. [출처] https://codejj.tistory.com/8

https://codepen.io/sosuke/pen/Pjoqqp CSS filter generator to convert from black to target hex color Added License 2022-07-15; this is retroactive for whatever help that is. 0-clause Free BSD License Permission to use, copy, modify, and/or distribute... codepen.io 여기 들어가서 내가 바꾸려는 색을 filter로 바꿔줍니다. 그 filter styled을 svg 아이콘의 class명으로 주면 됩니다.

길이가 다른 list item을 중앙정렬 하려면 ! 길이가 다른 list들을 list들의 위치를 지정해주는 div를 설정해서 위치를 잡아주어야한다....!! See the Pen list 가장 긴 item을 기준으로 중앙정렬하기 by JEONG (@cona) on CodePen.

clip-path 생성기 https://bennettfeely.com/clippy/ 클립패스 트랜지션 예시 See the Pen Untitled by JEONG (@cona) on CodePen. 클립패스 애니메이션 예시 See the Pen clip-path animation by JEONG (@cona) on CodePen.

https://stackoverflow.com/questions/13450039/how-to-undo-git-flow-feature-finish [How to undo git flow feature finish? I am learning git-flow and I just did git flow feature finish , which merged my feature branch to develop and removed it. Instead of this, I want to push the feature branch to ... stackoverflow.com](https://stackoverflow.com/questions/13450039/how-to-undo-git-flow-feature-finish..

갑자기 복붙도 안되고 되돌리기도 안되고..갑자기 웹스톰이 이상해졌을때 해결방법! https://rider-support.jetbrains.com/hc/en-us/community/posts/8858939260178-How-do-I-reset-all-settings-of-the-IDE-  기본설정으로 되돌리면 된다.

overflow-x: hidden; overflow-y: scroll;

import { useLocation } from "react-router-dom"; const location = useLocation(); console.log(location); hash : 주소의 # 문자열 뒤의 값 (주로 History API가 지원되지 않는 구형 브라우저에서 클라이언트 라우팅을 사용할 때 쓰는 해시 라우터에서 사용) key : location 객체의 고유 값, 초기에는 default 이고, 페이지가 변경될 때마다 고유의 값이 생성됨. pathname : 현재 주소의 경로 (쿼리스트링 제외) search : 맨 앞의 ? 문자를 포함한 쿼리스트링 값 //http://경로?id=10&count=2022 인경우 'id=10&count=2022' URLSearchParam..

https://codepen.io/cona/pen/wvQvPmy?editors=0110 {children} {children} .loop-slider { .inner { display: flex; width: fit-content; animation-name: loop; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: var(--direction); animation-duration: var(--duration); } }