Web Study

tympanus.net/codrops/2019/12/03/motion-paths-past-present-and-future/ Motion Paths - Past, Present and Future | Codrops Let's explore a few ways of moving an element along a path, including the upcoming CSS motion path module and the newly released GSAP3. tympanus.net #SVG #Motion-Paths #GSAP #CSS Motion SVG를 이용한 모션 경로 에니메이션 + GSAP 출처 > codrops > by Cassie Evans

가상클래스 ::after를 사용하였는데 jQuery에서 선택이 안된다ㅠ.ㅠ 그래서 찾아보다가 아래와 같이 사용할 수 있다는 걸 알았다. 하지만 이마저도 ie11이상의 브라우저만 지원한다고 한다. 이외에도 몇가지 방법이 있었지만, 좋은 방법인지 모르겠다. 코드 사용도 늘어나고... 그냥!! jQuery쓸거면 왠만하면 가상클래스는 사용하지 않는게 좋을 것 같다는 생각이다. active를 다른 곳에 걸어주고 사용하는 걸로 간단하게 해결됐다.(바보ㅠ) 그래도 jquery사용시 가상클래스를 범위로 선택하면 안된다는 것을 알게 됐다. 부모 영역 #parent { width: 200px; height: 200px; position: relative; background: #f1f1f1; pointer-events: ..

각 속성의 개념 property : transition을 적용시킬 속성을 정한다 timing-function : transition의 진행 속도를 정한다 duration : transition의 총 시간을 정한다 delay : transition의 시작을 연기한다 initial : 기본값으로 설정한다 inherit : 부모 요소의 속성값을 상속 받는다 단축 문법시 css div { transition: ; } transition-timing-function 기본값 : ease ease : cubic-bezier( 0.25, 0.1, 0.25, 1 ) linear : cubic-bezier( 0, 0, 1, 1 ) ease-in : cubic-bezier( 0.42, 0, 1, 1 ) ease-out : ..

z-index 우선순위 규칙>>> 1. position 속성이 없는 태그들은 나오는 순서대로 쌓인다. 2. position 속성이 있는 태그들은 없는 태그들보다 위에 나오는 순서대로 쌓인다. 3. position 속성에 z-index까지 있다면 z-index가 큰 태그가 위에 쌓인다. 4. 하지만 z-index가 아무리 크더라도 부모 태그의 z-index가 더 우선이다. 5. z-index는 position이 relative거나 absolute여야 동작한다. 먼저 position이 static인 태그들이 나오는 순서대로 쌓이고, 그 위에 relative나 absolute인 태그들이 나오는 순서대로 쌓인다. See the Pen LYRQrmr by issue72y (@issue72y) on CodePen.

www.youtube.com/watch?v=2mIQTxRyn-0 #웹폰트 단위 #웹폰트 사이즈 #px #rem #em #vh vw 반응형 웹을 제작할 때 생각보다 그 쓰임새가 헷갈리는 개념이다. 나는 한가지만 쓰면 되겠지 라고 생각할수도 있지만, 막상 작업할 때 어떤걸 만드는지 그 목적에 따라 쓰임새가 좀 달라지기도 하는 것 같다. 이참에 개념을 되새겨 보는 것도 좋을 것 같다는 생각이다. 웹 폰트 사이즈 단위 알아보기(px, rem, em, vw, vh) 출처 > 유튜브 > Ami Design TV