qwef

const li = e.target.closest('li'); 이벤트 일어났을 때 부모 찾아서 통째로 지우거나 할 때 편리할 듯. html 태그 객체를 통해 지우는 것도 쉬움. li.remove(); 걍 이렇게 하면 지워짐.

$preventSpan.addEventListener('contextmenu',(e)=>{ e.preventDefault(); }) 이러면 우클릭 시 콘텍스트메뉴 생성되는거 막아줌. $preventSpan.addEventListener('contextmenu',(e)=>{ console.log('prevent element click'); e.stopPropagation(); e.preventDefault(); }) 이렇게 e.stopPropagation(); 까지 추가하면 부모로 가는 이벤트 버블링도 막고, 'contextmenu'의 기본 이벤트도 막아줌. 이 외에도 뭐 a링크의 클릭하면 페이지 이동하는 것을 막는다던지 그런 거 할 수 있음.

$preventSpan.addEventListener('contextmenu',(e)=>{ console.log('prevent element click'); e.stopPropagation(); }) 이렇게 하면 버블링을 막아줌. 부모까지 이벤트 전파가 되지 않음.

버블링 캡처링 const element1 = document.querySelector('#element1'); const element2 = document.querySelector('#element2'); const element3 = document.querySelector('#element3'); const element4 = document.querySelector('#element4'); element1.addEventListener('click', e=>{console.log('element1 clicked')}); element2.addEventListener('click', e=>{console.log('element2 clicked')}); element3.addEventListener(..

#ticket h2{ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right,red, purple); background-color: unset;} 우선, 뭔가 clip 기능 같은 것의 대상을 text로 설정한 다는 것이고, 텍스트를 채우는 데 그 color를 투명하게, 배경이미지는 실제로 url()해서 이미지로 해도 되고, 저렇게 그라디언트로 넣어도 된다. background-image 해서 할 수 있는 것은 다 되는 듯. 아니면 그냥 background-color도 되는 듯. 배경 뭐 해서 바꾸는 건 다 되는 듯 여튼 background-clip, 배경과 c..

뭔가 좀 겹쳐서 그 겹친 부분만 보여주는? 그런 기능인 것 같다. clip-path:polygon(0 0, 100% 10%, 100% 90%, 0 100%); polygon은 다각형 그리는 함수 같은데, 폴리곤이 다각형 이라는 뜻 이니까 저렇게 부모의 %에 맞춰 그릴 수 있고, (가로, 세로) 그렇게 선으로 이어 가다가 마지막은 처음 시작했던 점과 자동으로 연결되는 듯. clip-path:ellipse(80% 100% at 50% 0) ellipse(가로반경 세로반경 at 중심축위치x 중심축위치y) 타원 clip-path: circle(50% at 50% 50%); circle(반지름 at x중심축 y중심축) 원

mix-blend-mode: overlay; 글자에 쓸 수 있음. background-blend-mode는 배경용이고, mix-blend-mode는 글자? 요소? 용 인 듯. 자신의 배경 또는 부모와 어떻게 혼합될지 지정하는 속성 자신의 배경 또는 부모와 관련이 있어야 함. 조상도 되긴 하는 듯..?

position:sticky 이거 top, left 등 설정하면 스크롤 내릴때 평범히 내려가다 화면의 top이라던지 그 위치에 오면 붙어버림. 이거는 부모안의 영역까지만 붙어져 있음. 부모 영역을 벗어나면 그 부모의 맨 끝에 막혀서 더이상 못 따라옴. 부모의 position이 뭐든 그건 상관 없음.

우리가 굳이 setAttribute()나 이런 거 안해도. $tag.id나 이런 거 지원해 주는 게 몇몇 있음. $input.value나 꽤 있음

querySelectorAll() 해서 가져온 거 .item(인덱스) 하면 됨.