열정과 게으름 사이

html에 마퀴태그가 있으나, 지원이 언제 안되도 이상할 것 없다하니 다른 방법을 찾아보기로 했다. 텍스트의 길이가 일정하고 짧은 문구라면 슬라이딩을 응용하면 되겠다 싶었지만, 길이가 일정하지 않은 긴 문구 두 개를 로딩지연 없이 슬라이딩 하려니.... 그래서 찾다가 발견한 코드를 살짝 응용. 흐르는 것이 아니고 한글자식 앞뒤로 자르고 붙여주는 방식으로 흐르는것 같은 효과이다. 자르고 붙이는 방식이다 보니. 조금은 어색하고, 앞쪽을 보면 정신없다. ㅎㅎㅎ let position = 0; let text = $('.text-container').data('text'); let size = text.length; function scrollText() { if (position < size) { $('.te..

더보기 버튼을 클릭하면 숨겨진 요소가 보이는... 뭐... 흔하게 보는 그 이벤트. -HTML 현장 1 현장 2 현장 3 현장 4 현장 5 현장 6 현장 7 현장 8 현장 9 현장 10 현장 11 현장 12 현장 13 현장 14 현장 15 현장 16 더보기 닫기 -JAVASCRIPT const moreEvent= function more(el,tg ,min,add){ const $box=document.querySelector('#'+el.id);//모든 컨텐츠를 담은 박스 const $more_box=$box.querySelector('.more-box');//갯수에 의해 늘어나거나 줄어들 박스 const _item=$more_box.getElementsByClassName('item');//컨텐츠 c..

1. window.location.href="url" 이용 :현재 화면이 대체 됨. 2. widdow.open("url", "name", "specs","replace" )이용 - url : 이동할 주소 - name : 새로 열릴 창의 속성 or 이름 지정 " _blank ": 새 창이 열림. 기본값 " _parent" : 부모 프레임에 열림 " _self ": 현재 페이지 대체 "- _top" : 로드된 프레임셋을 대체 " name(임의)" : 새창 이름을 지정함. 동일한 이름에 다시 open()을하면 기존의 열린창의 내용이 바뀜. - ​specs : 선택적인 값 "channelmode= yes" : 전체화면으로 창이 열림,IE에서만 동작 (값:yes,no,1,0) "fullscreen= yes" : ..

CSS변수 선언 선언식 : --font-color: #fff; or --width: 100px; 와 같이 앞에 두 개의 바가 들어간다. 변수의 사용 범위 : 변수가 선언된 요소의 하위 트리. 전역 변수로 사용할 경우 :root{ --font-color: #fff; } 내에 선언하면 되고, 지역 변수로 사용할 경우는 사용할 트리의 기준이 되는 상위 요소에 선언. CSS변수 사용 요소{ color: var(--font-color);} //지역 변수 선언 :root{ --bg-color:#26ae9a; } //지역 변수 선언 section2 .outbox{ --fnot:'Roboto', sans-serif; } // 변수 사용 section1{ background-color:var(--bg-color:#26a..