Reference https://gurtn.tistory.com/195 [JS] 눈 내리는 효과 만들기 완성 코드 See the Pen Canvas Snow by hyukson (@hyukson) on CodePen. 전체코드(보기) 더보기 const $canvas = document.querySelector("canvas"); const ctx = $canvas.getContext("2d"); const getRandomRadius = () => Math.random() * 1 + 0.5; const getR gurtn.tistory.com 사실 여기서 HTML이랑 CSS는 별 거 없다. 진짜로 별 거 없다. 이게 HTML이고 html { margin:0; padding:0; } body { margi..

그 왜 가끔 사이트 보면 기깔나는 아이콘인데 텍스트처럼 선택이 되는 뭐 그런 아이콘이 있을 것이다. 그 있어... 뭐 햄버거 버튼 별 이런거 있는데 별의별게 다 있다. 그리고 개발자 도구를 봤더니... 폰트 패밀리에 FontAwesome? 이게 뭐시여? 폰트어썸은 아이콘 라이브러리이다. 당연한 소리지만, 내가 처음 네이버 마이홈을 쓸 때는 CSS라는 개념이 없어서 속성도 죄 인라인에 줬고, 아이콘? 아이콘은 이미지 파일을 서버에 직접 업로드해야 했다. 그러면 색깔 잘못 올리면 어떻게 되냐고요? 걍 주옥되는겁니다. 새로 작업해서 새로 올려야 하거든... 이 얼마나 힘듭니까... 그때 컴퓨터가 램 16기가면 쥰내 비쌌어요... 하지만 얘는 CSS로 제어가 가능하기때문에 그냥 CSS로 색깔을 바꾸면 된다. 즉..

씽크패드 펑션키 밖으로 뺀 사람 찾아서 조사버리겠다... 아무튼... 포고 인벤토리 보고 생각났던건데 이제서야 함... 귀차니즘이 이렇게 무섭습니다 여러분. https://github.com/koreanraichu/Javascript/tree/main/List-grid 코드는 여기 가서 봅시다. HTML이나 CSS 관련 코멘터리는 안할거임. 발단 일단 발단이 뭐냐... 위가 리스트 뷰, 아래가 그리드 뷰이다. 포켓몬고의 인벤토리는 원래 위쪽만 있었다가, 아래쪽도 일부 계정에 시범적용 후 현재는 전 계정에서 해당 설정을 할 수 있게 되었다. 일단 두 방식은 각각 장/단점이 있는데 리스트 뷰는 위의 사진처럼 아이템의 설명을 확인할 수 있고, 버리기 아이콘도 줄의 끝에 있기 떄문에 아이템이랑 거리가 있어서 아..

라디오 버튼이 뭐임? 그 왜 회원가입 받거나 구글폼으로 설문조사 할 때 동그란 버튼 있죠? 중복으로 선택 안 되고 하나만 선택 되는. 지금은 그게 뭔데요? 지만 아래 예시를 보면 아마 바로 아 이거! 할 것이다. See the Pen Radio button 1 by koreanraichu (@koreanraichu) on CodePen. 봐봐요 이 버튼 어디서 봤잖아. 이게 라디오 버튼이다. 해당 예시에 JS는 적용 안돼서 그냥 선택만 할 수 있는 정도다. 바깥은 위험하니 이 아이들을 데려가렴! 이상해씨 파이리 꼬부기 { if (node.checked && node.value == "meat") { selectDish = "T본스테이크"; } else if (node.checked && node.valu..

브라우저에서 F12를 누르면 개발자 도구가 나온다. 아, 오페라는 컨트롤 시프트 I 눌러야 나옴. 아무튼... 가끔 글쓰다가 열리면 어이 이거 뭐야 하게 되지만 사실 이거, 장식이 아니다. 자바스크립트에서 console.log()로 출력하게 되면 결과물 확인할 때 콘솔창을 들러야 한다...만 그거 말고 다른 쓸모가 또 있다. 예전에 고대에서 일할 때 도움 됐던 팁임. 오늘은 파폭으로 열었다. 파폭도 개발자 도구 오른쪽에 고정할 수 있는데... 보니까 뭔가 복잡하다 그죠? 검사기에 있는 것들은 지금 내가 보고 있는 이 사이트(네이버 메인)의 DOM이다. 뭐 네이버 검색창이라던가, 내 정보창(로그인 상태니까), 뉴스, 웹툰 이런거 말하는거다. 여기서 DOM을 선택해서 볼 수도 있고, 직접 보고자 하는 요소에..

자 생각해봅시다. 파이썬은 print문으로 출력하잖음? 근데 자바스크립트에는 그런게 없어요. 여기서 오해하시면 안되는 게, 출력이 안되는 게 아니라 파이썬이나 C언어처럼 print 어쩌고로 적는 출력문이 없다는 얘기다. 그럼 어떻게 출력하나요? 그걸 이제 알아볼거다. 자바스크립트는 프론트엔드 삼신기(HTML, CSS, JS) 중 유일한 프로그래밍 언어이다. 거기서 더 나가면 리액트 뷰 앵귤러 삼대장이 기다리고 있지만 아무튼... 삼대장의 삼대장 걔네는 뭐 확장팩같은거고 걍 자바스크립트도 있긴 있잖아요? 그런데 자바스크립트가 왜 프론트엔드 삼신기냐... 프론트엔드 개발자는 HTML로 뼈대를 만들어서 CSS로 살을 붙이고 자바스크립트로 동작하게 하기 때문이다. 하아니 그런데 출력문이 없다고요? 그럼 어떻게 ..

https://koreanraichu.tistory.com/118 정규식(Regular Expression)-기호와 메타문자 문자 찾는 것 자체는 find()도 해주는데, 얘는 딱 정확하게 일치하는 문자열만 찾아준다. 그럼 정규식은? 그건 대충 와일드카드같은 거다. 그러니까 find()는 소라빵 찐빵 팥빵 붕 koreanraichu.tistory.com 여기서 정규식이 대충 와일드카드 같은거고(글은 분량상 두개로 나눴음) 파이썬에서는 re모듈을 쓴다고 했는데, 사실 파이썬 뿐 아니라 자바스크립트에서도 정규식을 쓸 수 있다. 정규표현식, 그러니까 정규식은 파이썬만의 전유물이 아니기때문에 다른 언어에서도 사용하는 방법이 다를 뿐이지 일단 쓸 수는 있다. 정규식에 대해 설명하면서 대충 '와일드카드 같은 것'이..

Python에는 for와 while이라는 반복문이 있고, 이 둘은 범위냐 조건이냐의 차이만 빼면 반복문이라는 기본 골자는 같은데, 이런 게 자바스크립트에도 당연히 있다. 라디오버튼 뺑뺑이 돌면서 얘가 뭘 체크했나 보는 것도 반복문의 일이기 때문. 그런데 이 반복문... Python처럼 심플하지 않아요... for, for in, for of See the Pen for, for in, for of by koreanraichu (@koreanraichu) on CodePen. 얘네들은 Pyhlogenic tree로 치자면 그 트리가 막 갈라지는 와중에도 진화적으로 매우 유사한 homolog이기 때문에 또이또이 쌤쌤임을 인정받은 애들... 맞는 비유인지는 모르겠지만, 자매나 형제같은 느낌이다. 그래서 형식 ..

addEventListener에 대해 설명하면서 스크롤 이벤트도 '있다'고 했는데, 이건 말 그대로 마우스를 스크롤했을 때 일어나는 이벤트이다. 그게 다다. Reference https://velog.io/@dunde/Javascript-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%9D%B4%EB%B2%A4%ED%8A%B8 Javascript 스크롤 이벤트 web에서 발생하는 스크롤 이벤트를 이용해 다루는 방법을 써보았습니다. velog.io https://velog.io/@dunde/Javascript-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%9D%B4%EB%B2%A4%ED%8A%B8 Javascript 스크롤 이벤트 web에서 발생하는 스크롤 이벤트를 이용해 다루는 방법을..

DOM은 Document Object Model의 약어로, XML이나 HTML에 접근하기 위한 일종의 인터페이스이다. 자바스크립트는 프론트엔드에서 많이 사용하는 언어의 특성인지는 모르겠지만 아무튼 이 DOM들을 지지고 볶는 게 가능하다. 이벤트 추가는 기본이고 생성 삭제 CSS 클래스 부여까지 다 된다. 남자친구 못 만드는 것만 빼면 만능... 어차피 여욱이도 못 구함 질량이 0이라 document.querySelector() 얘는 같이 다니는(?) 친구가 하나 있는데 바로 querySelectorAll()이다. 그럼 같은 역할인가요? 기본적으로는 그렇다. 기본적으로는 그런데 친구인 쿼리셀렉터올은 해당하는 요소를 죄다 가져온다. 예를 들어서 어떤 문서에 p태그가 6개 있다 그러면 쿼리셀렉터는 맨 위에꺼 ..

근데 생각해보니까 이거 전에 픽하는게 먼저 와야 하지 않나... 뭐 아무튼. 뭔가 기깔나는 것을 구현하기 위해 이 블로그 혹은 다른 블로그를 보다 보면 그런 게 있다. 어? HTML에서 온클릭도 안 줬는데 작동하네? 어? 이거 더블클릭 하니까 작동하네? 어? 스크롤 내리니까 작동하네? 를 알아보자. 굳이 버튼에 온클릭을 안 줘도 작동하는 비결이 바로 addEventListener()이다. getElementByID나 querySelector같은 걸로 DOM(쉽게 말하자면 문서의 어떤 요소)을 가져와서 addEventListener()로 이벤트를 추가할 수 있다. 이 추가라는 게 단순히 알림이나 콘솔 이런걸 떠나서 뭐 모달 소환 곱하기 이런 함수까지 된다. See the Pen Eventlistner by..

근데 말이 간단이지 헐 나 이것도 못해 개발자 하면 안되나봐 ㅠㅠ 이럴 정도는 아닙니다… Reference https://blogpack.tistory.com/1117 다크모드 토글 기능 구현과 다크모드 토글 디자인 구현 웹페이지, 또는 사이트에 적용하는 다크 모드는 구현하는 방법이 여러 가지 있습니다. CSS 속성을 기준으로 구분하면 사용된 배경색과 전경(글자) 색들을 바꾸기만 하는 간단한 구현이기 때문에 blogpack.tistory.com https://www.w3schools.com/howto/howto_css_switch.asp How To Create a Toggle Switch W3Schools offers free online tutorials, references and exercises..