코딩할때 많이 활용하는 사이트 모음

원래는 VScode 단축키 다룰까 하다가 너무 많아서 걍 이걸로 틀었음... VScode 단축키 중 외우고 있는 건 Ctrl+K+T(테마 변경)말고 없습니다. Two color combinationhttps://2colors.colorion.co/ Two Color CombinationsTwo color combination palettes2colors.colorion.co두 가지 색을 전경색/배경색으로 조합했을 때 어떤 느낌인지를 보여주는 사이트인데, 단점이 하나 있다. 저기서 맘에 드는 조합이 있으면 복사는 할 수 있는데 내가 원하는 색 조합을 '만들 수는' 없다. 일단 저거 비슷하게 두 가지 색을 입력하면 전경색/배경색 조합일때 어떻게 보이는지는 나중에 JS로 만들어볼거임. AI color pale..

• format_list_bulleted Coding/코딩잡담
• · 2024. 5. 19.
• textsms

모달 윈도우를 만들어보자

또 뭔지 모르는거 나왔다 그죠? 근데 이거 많이 보셨습니다. 위키피디아를 보면 '모달 윈도(Modal Window) 또는 모달 창은 사용자 인터페이스 디자인 개념에서 종속된 윈도에서 메인 윈도로 돌아가기 전에 사용자의 상호동작을 요구하는 시각적 제어 요소를 말한다. '라고 하는데, 예를 들자면 계정 생성이나 채널 생성, 파일 저장같은 걸 페이지 넘어가는 게 아니고 버튼 누르면 작은 창같은 거 띄워서 하는 경우가 있다. 그게 모달창, 모달 윈도우다. 이건 예전에 토이프로젝트로 하나 만들어둔 게 있는데… 하나 더 해?Referencehttp://yoonbumtae.com/?p=3632 자바스크립트: 모달(modal window) 만들기 - BGSMM모달 창이란 사용자 인터페이스 디자인 개념에서 자식 윈도에서..

• format_list_bulleted Coding/JavaScript
• · 2024. 5. 12.
• textsms

슬라이드 버튼 만들기

사실 JS까지는 필요 없는데 본격적으로 굴려먹으려면 JS가 필요하니까 그냥 넘어가자.Referencehttps://www.w3schools.com/howto/howto_css_switch.asp\ How To Create a Toggle SwitchW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com슬라이드버튼이 뭘 말하는거냐면저 오른쪽 저 버튼을 말한다. 체크박스가 원류이긴 한..

• format_list_bulleted Coding/JavaScript
• · 2024. 5. 6.
• textsms

숫자 야구에 새 게임 버튼을 넣어보자

이게 티스토리 문제인건지 테마 문제인건지 브라우저 문제인건지 글 삭제도 수정도 안되고 아주 지랄났음. 모바일에서는 잘 되는데 PC에서 글 수정도 삭제도 안되니 뭘 할 수가 있어야죠...  암튼 고맙다 티스토리. https://koreanraichu.tistory.com/413 자바스크립트로 숫자 야구를 만들어보자아니 이게 되더라고?https://codepen.io/koreanraichu/pen/VwNNZGW 숫자야구 ver. JS...codepen.io거기서도 제대로 작동할지는 모르겠는데 일단 코드펜에도 올렸다. 테스트는 월욜에 점심 먹으면서 해봐koreanraichu.tistory.com여기서 숫자 야구를 만들었는데, 생각해보니까 새 게임 버튼이 있었으면 좋겠는거다. 아니 새 게임 할라면 F5키 누르면..

• format_list_bulleted Coding/JavaScript
• · 2024. 4. 29.
• textsms

자바스크립트로 숫자 야구를 만들어보자

아니 이게 되더라고?https://codepen.io/koreanraichu/pen/VwNNZGW 숫자야구 ver. JS...codepen.io거기서도 제대로 작동할지는 모르겠는데 일단 코드펜에도 올렸다. 테스트는 월욜에 점심 먹으면서 해봐야징. 숫자야구가 약간 코더들에게는 국룰같은건지 언어별로 이게 하나씩 있다. 물론 파이썬에도 있지… 그러다보니 궁금해진게 그럼 JS도 프로그래밍 할 때 쓰는건데 숫자야구가 있겠지? 예, 있습니다. 놀랍게도. 그래서 해봤습니다.Referencehttps://yjg-lab.tistory.com/322 [JavaScript] 숫자야구 풀이숫자야구 4자리 정답 숫자를 찾는 문제. 입력값 4자리 수 중 숫자가 포함되어 있는 경우 볼, 자리까지 동일하면 스트라이크. 모두 맞추면 ..

• format_list_bulleted Coding/JavaScript
• · 2024. 4. 28.
• textsms

자바스크립트향 첨가 드롭다운 메뉴

아 배수판별 해달라고요? 내 보낼라카나? 일단 드롭다운 메뉴가 뭐냐면 이런거다. 저기 오른쪽에 점 세개 눌린거. 이건 잘 안 보이지만 이거. 위키피디아에 있는 언어 선택란인데 이것도 그거다. 오늘의 참고문헌은 https://www.doyeon0430.com/engineer/django/25/ [JavaScript] 자바스크립트로 예쁜 드롭다운 메뉴바 만들기 이번시간에는 자바스크립트를 사용해서 드롭다운 메뉴바에 클릭 이벤트를 구현볼거에요. 모바일 버전에서 사용 될 예정이라 HTML과 CSS를 쓰기엔 칸이 너무 좁아서 JavaScript에 도움을 받았습니다. www.doyeon0430.com 요기입니다. 아주 간단하게 설명 잘 됐음. 사실 HTML에서는 그렇게 특별하게 설명할 거 없다. CSS의 경우 드롭다..

• format_list_bulleted Coding/JavaScript
• · 2024. 4. 21.
• textsms

배수 판별을 해보자

왜 우리 초딩때 배웠던 배수 판별법 있죠? 짝수면 2의 배수, 끝자리가 5나 0이면 5의 배수, 자릿수 다 더해서 3의 배수이면 3의 배수 뭐 이런거. 그걸 해 볼거다. 솔직히 배수 판별이라고 해서 엥 그거 걍 나눠서 나머지 없으면 배수 아니냐 했던 분들 반성하십쇼. 그런 심플한거나 하겠답시고 내가 여기다 올리겠수? https://ko.wikipedia.org/wiki/%EB%B0%B0%EC%88%98_%ED%8C%90%EC%A0%95%EB%B2%95 배수 판정법 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 배수 판정법은 배수인지 확인하려는 수의 배수가 맞는지 간단히 확인하는 절차이다. 일반적으로 정수 m , n {\displaystyle m,n} 에 대해 m {\displays..

• format_list_bulleted Coding/Python
• · 2024. 4. 10.
• textsms

[HTML 요소] 체크박스

저번 시간(이라고 해봐야 한참 전)에 알아봤던 라디오 버튼 기억나시쥬? 동글뱅이 버튼. 오늘 알아볼 체크박스 역시 그거랑 비슷한데 약간 다르다. 대충 Python의 for문과 while문같은 느낌. See the Pen Checkbox 1 by koreanraichu (@koreanraichu) on CodePen. 대충 이렇게 생긴건데, 라디오버튼과 비슷하게 선택지를 제공해주지만 라디오버튼과 달리 여러개를 선택할 수 있다. 그래서 여러개 중 하나를 선택할때는 라디오버튼(예: 성별/태어난 달/별자리)을, 여러개를 골라도 되는 선택지에는 체크박스(예: 취미/관심사)를 주로 쓴다. 근데 라디오버튼에도 CSS를 줬으면, 체크박스에도 줄 수 있나요? 줄 수 있죠. See the Pen Checkbox 2 by ..

• format_list_bulleted Coding/JavaScript
• · 2024. 4. 9.
• textsms

구구단을 이차원 배열로 출력해보자

아오 티스토리에 왜이렇게 뻘댓글이 많은지… ㅡㅡ 심지어 내가 달지 말고 걍 가라했는데도 계속 달아서 티스토리도 스팸필터 달고 있음… 네이버는 한줄+답글이지만 티스토리는 한명이 서너개 두두두두 달고 갑니다. 하지 말라면 좀 하지 말라고… 생각해봅시다. 반복문 하면서 제일 만만한게 구구단인데, 이거 보통 for i in range(2,10): for j in range(2,10): print('{} * {} = {}'.format(i, j, i * j)) 이렇게 하잖아요? 그래서 저거 실행하면 2 * 2 = 4 이런 식으로 줄줄이 뜨잖음. 그러니까, 한 줄로요. 이걸 이차원 배열... 그러니까 표로 출력할거다. 상당히 간단한 절차이니 걍 보고 따라해보자. gugudan_array = [['*' for i i..

• format_list_bulleted Coding/Python
• · 2024. 3. 12.
• textsms

우분투 부팅디스크를 만들어보자

https://koreanraichu.tistory.com/392 셋업할거 정리중... https://koreanraichu.tistory.com/390 어영부영 3월입니다. 일단 아직 상순이지만 눈감으면 중순이오 눈감으면 하순이오 눈감으면 아 생일이네... 만나이 증가! 뭐... 진짜 그래요. 세월이 다 그렇지 뭘... koreanraichu.tistory.com 여기에 대충 새 노트북에 세팅할거랑 이것저것 해서 정리해뒀다고 했는데, 윈도건 리눅스건 일단 FreeDOS에 설치할거면 CD(혹은 USB에 부팅디스크 만든거)가 있어야 한다. 보통 윈도우는 FreeDOS 사면서 윈도우 같이 사고 깔아달라 하면 파시는 분들이 알아서 찰떡같이 깔아주시지만(물론 윈도우 몸값도 지불했으니까...) 리눅스는 그렇지 않..

• format_list_bulleted Coding/코딩잡담
• · 2024. 3. 10.
• textsms

현재 시각을 십이지시로 바꿔보자 Ver.JS

https://koreanraichu.tistory.com/364 현재 시각을 십이지시로 바꿔보자 요즘은 뭐 열두시 한시 이런 식으로 얘기해서 십이지시 잘 모르는 사람도 많다. 사실 이거 쓰는거 사주 볼 때 말고는 없는데, 뭐 개인이 보는 경우도 있지만 가끔 남녀가 결혼하기 전에 궁합이 koreanraichu.tistory.com 여기서 했던 그거 맞다. 근데 실시간 시계는 안됨… setInterval 찾아봤는데 지금 코드 상태로는 안되고 실시간 시계는 죄다 함수 때려박은거라 아예 코드를 엎어야 할 수준이더라… 였는데 결국 해결 봤다. const currentTime = document.querySelector(".currenttime"); const earthBranch = document.queryS..

• format_list_bulleted Coding/JavaScript
• · 2024. 2. 12.
• textsms

테마 변경을 해 보자(feat. 라디오 버튼)

일단 미리 말씀드리고 갈 부분이 있다. 자바스크립트 코드가 내가 원했던 로직이 아니기때문에 테마가 추가되거나 할 때 if문이 아주 덕지덕지 붙어서 뵈기 싫은데 이걸 대체 어떻게 깔끔하게 해야 할 지 모르겠다. 이건 나중에 방법 찾으면 보완할 예정. HTML이나 CSS는 걍 깃헙 가서 보는 게 편한데, 기존에 체크박스나 라디오버튼과 달리 이번에는 라벨태그를 추가했다. 라벨태그는 아무개 이런 식으로 쓰는 태그인데, label for=""에 라디오버튼이나 체크박스의 아이디를 넣으면 꼭 그 라디오버튼이나 체크박스를 정확하게 클릭하지 않더라도(글자를 눌러도) 선택이 되게끔 해 주는 매우 편한 태그다. 특히 화면이 작은 모바일에서 말이지. 이게 기본 테마. 글자색은 아이보리 블랙이다. .vandyke { color..

• format_list_bulleted Coding/JavaScript
• · 2024. 2. 10.
• textsms