barcode

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

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

[HTML 요소] 체크박스 Coding/JavaScript

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

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

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

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

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

자바스크립트로 랜덤 아이디 생성기를 만들어보자 Coding/JavaScript

barcode
자바스크립트로 랜덤 아이디 생성기를 만들어보자 Coding/JavaScript 이거 로직 자체는 간단한데 뭐 사이드로 붙이다가 개같이 헤맸음... 사실 외형은 딱히 신경 쓸 게 없다. 그냥 적당히 색깔 고르고 배치 적당히 한게 다이므로 여기서 서술할것은 온니 JS뿐… https://github.com/koreanraichu/Javascript/tree/main/random%20ID%20generator 파일 여기 있습니다. 예. 기본적인 로직 const button = document.querySelectorAll('button'); const idLengthval = document.querySelector('.idlength'); const idCount = document.querySelector('.idhowmany'); const idValarea = document.qu..

자바스크립트로 계산기를 만들어보자 Coding/JavaScript

barcode
자바스크립트로 계산기를 만들어보자 Coding/JavaScript 내 33년평생 이거보다 (삐-) 언어는 없을것이다... 어떻게 중괄호 위치 하나 삐꾸났다고 버그가 아오 참고로 ㄹㅇ 사칙연산만 되고 일일이 AC를 눌러줘야 하는 매우 불편한 계산기입니다… 근데 솔직히 삼각함수 지수 로그 이딴거 계산할거면 여기를 찾을 게 아니고 울프램알파를 가셔야죠… Reference https://velog.io/@jhyun_k/js-calculator JS 로 계산기 만들기 자바스크립트 연습 겸 하여 사칙연산 계산기를 만들어보았다. 처음에는 간단할 거라 생각했지만 생각보다 고려해야할 점이 많았다. 복잡한 계산은 아니지만 사칙연산 기능은 문제없이 작동된 velog.io 일단 HTML이나 CSS는 그냥 계산기 구색만 맞추고 색깔 그렇게 신경 못 썼다. 왜? 분명 자바스크립트에서 뭔가 안될..

자바스크립트로 만나이를 구해보자 (후편) Coding/JavaScript

barcode
자바스크립트로 만나이를 구해보자 (후편) Coding/JavaScript https://koreanraichu.tistory.com/367 자바스크립트로 만나이를 구해보자 (전편)이게 왜 전후편이 나뉘었냐면 변수때문에 시간을 너무 잡아먹었고 나는 출근을 해야 하는 몸입니다... 그래서 자잘한 것들... 뭐 CSS 마진 패딩 이딴거라던가 날짜에 시작점 끝점 정하는 뭐 그런koreanraichu.tistory.com내 어제 만나이 구현하는걸 짜면서 몇가지 추가할 게 있는데 출근해야 해서 못했다고 한 게 있었다. 네가지 있었는데 오늘은 그걸 다 구현해볼거다. 근데 생각보다 자잘한 기능이라 금방 끝남둥.날짜 시작이랑 끝 정하기이거는 JS선에서 건들 게 아니라 HTML파일에 있는 인풋태그를 건드리면 된다. input type=date 속성 중에 min이랑 max가 있는데 말 그대로 최..

자바스크립트로 만나이를 구해보자 (전편) Coding/JavaScript

barcode
자바스크립트로 만나이를 구해보자 (전편) Coding/JavaScript 이게 왜 전후편이 나뉘었냐면 변수때문에 시간을 너무 잡아먹었고 나는 출근을 해야 하는 몸입니다... 그래서 자잘한 것들... 뭐 CSS 마진 패딩 이딴거라던가 날짜에 시작점 끝점 정하는 뭐 그런거 있죠? 그런게 아직 안됐음... 그래서 깃헙에 올린 버전은 '일단 계산만 해 주는' 버전입니다. 아무튼 그럼. 사실 기본적인 로직은 파이썬하고 다를 게 없다. 그리고 자바스크립트에서도 날짜를 다룰 수 있지. const birthday = document.querySelector('input[type="date"]'); const calButton = document.querySelector('button'); const yourAge = document.createElement('p'); const yourAg..

눈 내리는 효과 만들기 Coding/JavaScript

barcode
눈 내리는 효과 만들기 Coding/JavaScript 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..

폰트어썸(Font awesome) Coding/JavaScript

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

리스트뷰-그리드뷰 전환하기 Coding/JavaScript

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

[HTML 요소] 라디오 버튼 Coding/JavaScript

barcode
[HTML 요소] 라디오 버튼 Coding/JavaScript 라디오 버튼이 뭐임? 그 왜 회원가입 받거나 구글폼으로 설문조사 할 때 동그란 버튼 있죠? 중복으로 선택 안 되고 하나만 선택 되는. 지금은 그게 뭔데요? 지만 아래 예시를 보면 아마 바로 아 이거! 할 것이다. 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..

개발자 도구는 장식이 아니다 Coding/JavaScript

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

자바스크립트는 출력을 어떻게 하나요? Coding/JavaScript

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

강해져서 돌아온 ChatGPT에게 코딩을 시켜보자 (번외편) Coding/Python

barcode
강해져서 돌아온 ChatGPT에게 코딩을 시켜보자 (번외편) Coding/Python 아니 나 급 생각난건데 얘가 코딩한걸 보니까 변수명이 my_list 막 이렇더라고... 그래서 궁금해졌음. 과연 변수명을 지정해서 코딩할 수 있는가? 또 서버오류가 반기는거 아니냐 일단 걍 리스트를 만들어보자. 전에는 my_list였는데? 아무튼 그럼 변수명을 내가 지정해주자. 변수명은 one_to_ten으로 할거다. 사실 여기에는 숨겨진 주문이 하나 더 있는데... 다들 알겠지만, 언어가 파이썬이 아니라 자바스크립트다. 리스트 이름을 지정한 변수명으로 하는 것도 무난하게 된다. 그런데... 자바스크립트 출력 방식이 console.log만 있는 게 아니란말이지... alert로 띄우게 할 건데, alert라고 직접적으로는 얘기를 안 할거다. 사실 이거 말고 HTML 요소의 내용을 바꾸는 방법도 있긴 함...
1 2 3

티스토리툴바