background-image는 링크가 걸리지 않으므로 이미지 등에 링크를 걸 때는 img태그를 사용해야 한다 a태그 target속성 _self : 링크된 문서를 링크가 위치한 현재 프레임에서 오픈함(기본값) _blank : 링크된 문서를 새로운 윈도우나 탭에 오픈함 _parent : 링크된 문서를 현재 프레임의 부모 프레임에서 오픈함 _top : 링크된 문서를 현재 윈도우 전체에서 오픈함 프레임 이름 : 링크된 문서를 명시된 프레임에서 오픈함 참고 http://www.tcpschool.com/html-tag-attrs/a-target

Blog Facebook Instagram Youtube English $('.hamMenu').off('click').click(function(e){ e.preventDefault(); $('header nav').slideToggle(300); }); slideToggle 적용 시 display:none에서 block이 된 후 다시 none이 되는 문제 발생 .off()만으로는 해결되지 않았으나 일단 넣어둠 e.preventDefault(); 혹은 return false; 로 중복실행문제 해결 하지만 span으로 만들어둔 햄버거 메뉴의 transform으로 만들어둔 애니메이션이 꺼짐 참고사이트 https://m.blog.naver.com/PostView.naver?isHttpsRedirect=tru..

HTML 바로가기 CSS .btn { background: linear-gradient(91.45deg, #833AB4 3.65%, #FD1D1D 50.45%, #FCB045 98.37%); color: transparent; background-clip: text; -webkit-background-clip: text; } 결과물

HTML button CSS .btn { --border-width: 1px; --border-radius: 20.5px; width: 188px; height: 41px; border: 0; background:linear-gradient(91.45deg, #833AB4 3.65%, #FD1D1D 50.45%, #FCB045 98.37%) border-box; position: relative; border-radius: var(--border-radius); z-index: 1; } .btn::before { content: ""; display: block; width: calc(100% - calc(var(--border-width)*2)); height: calc(100% - calc(var(-..

/* Scroll Animation (sa, 스크롤 애니메이션) */ 위에서 아래로 이해하기 for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다. 1) '.sa'클래스가 포함된 모든 요소를 saElementList에 선언 (array) 2) element는 saElementList의 배열값을 하나씩 반복함 (const element of saElementList) 3) 만약 element에 클래스명 'show'가 포함되어 있지 않다면 4) window.innerHeight(창 틀을 뺀 브라우저의 높이값..

Fade In 효과