창고

mdn 터치 이벤트 https://developer.mozilla.org/ko/docs/Web/API/Touch_events 보통 많이 쓰는 슬라이더인 swiper의 기능중 하나를 vanilla javaScript로 구현해보았다. 터치 환경에서만 동작 (웹에서 확인하려면 크롬기준 F12 > Toggle Device Toolbar(ctrl shift m)으로 확인해주세요) 터치하여 이동하는 동안(touchmove) 슬라이더가 transform의 translateX 값으로 움직입니다. (예전에 만들었던 바닐라 자바스크립트 터치 슬라이더(링크)는 움직이는 모습이 보이지 않았죠) 터치가 끝나면(touchend) 슬라이더를 감싸고 있는 부모의 좌측에 snap 됩니다. 성격 급한 사람은 샘플코드를 다운받으세요 HT..

참고 : https://www.wellihillipark.com/ 웰리힐리파크 www.wellihillipark.com HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 샘플 - 웰리힐리 LoremIpsum Lorem Ipsum Lorem ipsum dolor sit amet consectetur adipisicing ur adipisicing elit. button__01 button__02 LoremIpsum Lorem Ipsum Lorem ipsum dolor..

참고 사이트 : http://www.lxinternational.com/ LX International LX International www.lxinternational.com HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 스크롤 실험 - LX인터내셔널 HELLO lorem lorem lorem lorem lorem lorem lorem lorem Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3..

https://www.youtube.com/watch?v=VMrT1wwXxY0 html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 sin 구하기(cos은 덤~) https://www.youtube.com/watch?v=VMrT1wwXxY0 올라간 거리 올라간 각도 올라간 높이는?(sin) result Colored by Color Scripter cs css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 *{margin:0;padding:0;box-sizing..

https://www.youtube.com/watch?v=4IwcqHazkfY https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2 Math.atan2() - JavaScript | MDN The Math.atan2() function returns the angle in the plane (in radians) between the positive x-axis and the ray from (0,0) to the point (x,y), for Math.atan2(y,x). developer.mozilla.org html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17..

https://css-tricks.com/complete-guide-to-css-functions/ A Complete Guide to CSS Functions Like any other programming language, CSS has functions. They can be inserted where you’d place a value, or in some cases, accompanying another value declaration. css-tricks.com html 123456789101112131415161718192021222324252627282930313233343536 cornic-gradient cornic-gradient, repeating-cornical-gradient h..

https://aosceno.tistory.com/443 CSS 커스텀 체크박스 + vanilla JS로 체크박스 전체선택, 전체해제 (2) https://aosceno.tistory.com/435 전 게시물 참조. 해당 부모에 해당하는 자식 체크박스들 전체 선택 2) 전체선택 해제시 > 해당 부모에 해당하는 자식 체크박스들 전체 해제 3) 자식.." data-og-host="aosceno.ti.. aosceno.tistory.com 원리는 같지만, 이벤트 위임 방식으로 바꾸어 해봤음 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 체크박스 전체 선택/해제 전체 선택or해제..

개인 호스팅 페이지 :http://dpffpself2.dothome.co.kr/shooshook/ (GIT 페이지) : https://ohikmyeong.github.io/shooshook/ 2글자 / 4글자가 가장 이상적입니다 그럼 이만

삼항연산자 A ? B : C A의 조건이 True면 B // False 일땐 C를 실행하는것임 삼항연산자로 flat long shadow를 만든 예는 이거 : https://aosceno.tistory.com/528 삼항연산자로 Flat Long Shadow 만들기 (HTML/CSS/vanilla JS) 원본 소스 https://www.youtube.com/watch?v=xrmdn1t5moA HTML 1 2 3 4 5 6 7 8 9 10 11 12 삼항연산자 HELLO WORLD Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11.. aosceno.tistory.com 즉 const a = true; 일때 if(a){ console.log('참이에용');..

https://zellwk.com/blog/css-translate-values-in-javascript/ HTML,CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 matrix와 정규식을 이용한 transform 값 가져오기 *{margin:0;padding:0;box-sizing:border-box;} html,body{width:100%;min-height:100vh;background:#000;} #myDiv{ display:flex;flex-wrap:wrap; flex-direction:column; justify-content:center;align-items:center; p..

https://aosceno.tistory.com/416 바닐라 자바스크립트로 자동재생 되며 재생/멈춤 버튼, 페이저, 이전페이지 다음페이지 버튼 있 기본 소스는 w3school의 HOW TO 항목에서 slide show 입니다. https://www.w3schools.com/howto/howto_js_slideshow.asp 기본 예제중에 자동재생, 페이저, 이전·다음페이지 버튼, 재생 멈춤 버튼을 모두 제공하는.. aosceno.tistory.com 바닐라 자바스크립트 슬라이더 1.2 이전에는 id로 단 한개만의 슬라이더를 만들었다면 지금은 class로 여러개의 슬라이더를 생성할 수 있게 만들어보았다. 그리고 내가 원하는 슬라이더의 setTimeout을 clearTimeout 할 수 있도록 하였다. ..

https://aosceno.tistory.com/519 twitter app header처럼 vanilla JS로 스크롤에 따라 내려오고 올라가는 헤더 만들기 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 twitter App Header 구현하기 This is Header NAV hello world! hello world!.. aosceno.tistory.com 훨씬 더 간단하게 리팩토링?? 해봄 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 twiiterHead(BETTER) ... nav header Colored by Color Scripter ..

모든것을 다 올리면 너무 길어... HTML 동적으로 생성할것이기 땜시 json으로 뿌려줄 애들은 자식없이 텅텅비었다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110..

보호되어 있는 글입니다.

오버워치 패치노트 통계 페이지 만들어보기 http://dpffpself2.dothome.co.kr/ovwPatch/ 회사에서 일 없을 때 짬짬이 만들어봤음. 목적 : 아 모이라 패치노트 더 보고싶어 대체 다른 영웅들에 비해 얼마나 나온걸까? / json과 fetch를 이용해서 동적으로 DOM을 생성하는 방식에 익숙해져보자 / 기상청 쪽 인포그래픽 샘플 만들면서 사용했던 수식을 여기 그래프에 이용할 수 있겠다 우선 시안 : 인디자인 작업 소요기간 약 이틀? 순수시간 한 4~6시간? HTML, CSS, JS 1차 완료 아직 select box와 중간 checkbox에 대응하는건 만들지 않았고 1차적으로 json에서 가져와서 뿌려주는거 완료한 예제 함께한 영웅의 이름을 한글로 아직 반영 안했음 그래도 ㅎ,....

원본 소스 https://www.youtube.com/watch?v=xrmdn1t5moA HTML 1 2 3 4 5 6 7 8 9 10 11 12 삼항연산자 HELLO WORLD Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 @charset "utf-8"; :root{ --font : rgb(76, 168, 204); --shadow : rgba(52, 126, 155);} *{margin:0;padding:0;} html,body{ display:flex;flex-wrap:wrap; justify-content:center;align-items:center; width:100vw;heigh..

소스 참고 : https://penguingoon.tistory.com/257 자바스크립트 모바일 터치 슬라이더 구현하기 (feat. 터치 이벤트) 안녕하세요! 오늘은 모바일 전용 이미지 슬라이더를 간단하게 구현해보았습니다. 모바일에서는 손가락을 이용해 영역을 터치하면 터치이벤트가 발생하게 되는데, 이 터치의 시점과 위치를 잘 penguingoon.tistory.com 탐구소년님이 올려주신 소스를 바탕으로 1) 웹에서는 mousedown / mouseup 으로 작동되게 2) 모바일에서는 touchstart / touchend 3) 자동재생 / 일시정지 / 다시 재생 4) 좌우 화살표 페이저 있음 5) 하단에 슬라이드 갯수만큼 자동으로 생성되는 페이저 있음 6) mousedown / touchstart /..

lanbelle.com/ 랑벨 (Lanbelle) 원스토어 랑벨 공식 브랜드 및 원스토어 홈페이지, 프리미엄 천연화장품, 타마누, 기능성 화장품, 임산부용 화장품, 아기 화장품, 베이비용 화장품, 남성용 화장품, 기능성 화장품, 피부 트러블, 아토피, lanbelle.com 해당 홈페이지 뒷배경에 깔린 올리브가 1) 스크롤시 특정 높이에 다다르면 스크롤에 따라옴 2) 커서 상하좌우 무빙에 따라 3d 효과가 적용 됨 1번이야 쉬운데 2번은... 2D 이미지로 3D효과를 내는거다. 정확한건 아니지만 마우스 커서의 좌표값에 따라 이미지 scale을 늘려줌으로써 3d처럼 보이는 효과를 주고있다. 우선은 Pixi.js로 하면 된다 redstapler.co/3d-photo-from-image-javascript-t..

developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee : The Marquee element - HTML: HyperText Markup Language | MDN The HTML element is used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes. developer.mozilla.org 옛날옛적 끊임없이 텍스트가 흐르던 효과 marquee 이젠 웹표준이 아니어서 제공하지 않는 브라우저들도 있다. 그렇다면 CSS로 이를 다시 구현해줘야하는데 생각보다 ..

developer.mozilla.org/ko/docs/Web/CSS/animation-fill-mode animation-fill-mode - CSS: Cascading Style Sheets | MDN animation-fill-mode CSS 속성은 CSS 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정합니다. developer.mozilla.org HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 animationFillMode none forwards backwards both Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23..

aosceno.tistory.com/492 커스텀 셀렉트 박스 만들기 - HTML DOM에는 select만 작성하고 vaniila JS로 알아서 DIV 생성 HTML CSS JS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64.. aosceno.tistory.com 이벤트 위임 방법에 대해 모르던 시절 구현한건 코드가 오질나게 길죠 이벤트 위임을 사용해서 좀 더 줄여봤습니다. HTML 1 2 3 4 5 6 7 8 9 10 11 1..

우선 소스코드 다운로드는 상단에서 참고 1) thead의 td와 th에 position:sticky;를 주는 방법 velog.io/@drawyourmind/table-thead-%EA%B3%A0%EC%A0%95%EA%B3%BC-tbody-%EC%8A%A4%ED%81%AC%EB%A1%A4 table thead 고정과 tbody 스크롤 image HR시스템이 유난히 테이블과의 싸움이다. 그중 하나가 헤더 고정 이슈인데 이 한개가 아니고 colspan, rowspan으로 셀이 합쳐지면서 헤더가 고정되는 부분들이 있다보니 은근히 노가다 이슈 velog.io 장점 : CSS로만 해결 가능. 간단함 단점 : tr이 한줄이 아니라 2개 이상 될 땐 css로 일일히 설정해야한다. / IE 미지원 참고2) thead에 ..

HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 twitter App Header 구현하기 This is Header NAV hello world! hello world! hello world! hello world! hello world! hello world! Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 @charset "utf-8"; *{margin:0;padding:0;box-s..

지난 게시물 참조 : 시작점과 반지름과 각도만 주어진 상황에서 끝점 x,y좌표를 삼각함수를 이용하여 찾는 방법 aosceno.tistory.com/511 sin, cos로 각도와 대각선 길이만 가지고 x,y좌표 찍기 HTML,CSS 1 2 3 4 5 6 7 8 9 10 11 *{margin:0;padding:0;box-sizing:border-box;} #myDiv{position:relative;width:100%;height:100vh;} #myCanvas{width:100%;height:100%;background:#ccc;} 이 브라우.. aosceno.tistory.com HTML과 CSS JS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22..

HTML,CSS 1234567891011*{margin:0;padding:0;box-sizing:border-box;}#myDiv{position:relative;width:100%;height:100vh;}#myCanvas{width:100%;height:100%;background:#ccc;} 이 브라우저는 캔버스를 지원하지 않습니다Colored by Color Scriptercs JS 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364const myDiv = document.getElementById('myDiv');const myCanv..

HTML CSS JS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 /* 셀렉트 박스 옆에 DIV 추가하기 */ //셀렉트 박스 가져오기 let selectBox = document.getElementsByTagName('SELECT'); for(let i=0; i

보통 앱에서 드래그앤 드롭으로 기간 설정하거나...그런걸 바닐라 자바스크립트로 구현하고 싶었음 A,B,C,D,E 중에서 내가 첫번째 클릭을 B를 하고 두번째 클릭 D를 하면 최종적으로 B,C,D에 클래스가 추가되어 >> 선택된 효과가 나타나는것임 이때 시각적인 구분을 위해 최초와 두번째 클릭한 B와 D에는 별도의 클래스가 더 붙음 HTML,CSS !! sel과 on의 스타일 선언 순서에 주의 JS 나중엔 드래그앤 드롭 (mousedown mouseup)으로도 구현해볼 예정 소스파일

이전 참고 문서 aosceno.tistory.com/488 $(el).siblings(); 를 vanilla JS로 구현하기 (자바스크립트 siblings() 대체) 참고사이트 vanillajstoolkit.com/helpers/getsiblings/ getSiblings.js /*! * Get all siblings of an element * (c) 2018 Chris Ferdinandi, MIT License, https://gomakethings.com * @param {Node} elem The e.. aosceno.tistory.com gent.tistory.com/295 [Javascript] 자바스크립트 배열 추가, 삭제 방법 (push, pop, splice) 자바스크립트 배열 추가, 삭..

이전 글 aosceno.tistory.com/359 sticky Header(2) 스틱키 헤더 - 자바스크립트 없이 CSS만으로 스티키헤더 만들기 W3schools를 참고한 지난번 포스팅 https://aosceno.tistory.com/358 sticky header 스티키 헤더 - 상단에 광고바도 붙어있는데 정신없이 나왔다 들어갔다 하는 효과 말고 정말 원래 걍 착 붙어있는것마냥 스르 aosceno.tistory.com (1)jQuery로 header를 인클루드 시켰을 때엔 해당 인클루드 파일에서 스크립트를 실행해야만 header의 높이 및 위치 값을 정확히 불러옵니다. 외부에서 스크립트를 실행하면 인클루드 된 header의 높이값,위치값을 읽지 못함 (2)반응형 (헤더 상단의 광고 갯수, 광고 높이..

참고사이트 vanillajstoolkit.com/helpers/getsiblings/ getSiblings.js /*! * Get all siblings of an element * (c) 2018 Chris Ferdinandi, MIT License, https://gomakethings.com * @param {Node} elem The element * @return {Array} The siblings */ var getSiblings = function (elem) { return Array.prototype.filter.call(elem.parentNod vanillajstoolkit.com github.com/nefe/You-Dont-Need-jQuery/blob/master/README.k..