박금향의 코드 공부용 블로그 박금향의 코드 공부용 블로그

Select는 CSS로 커스텀하기 매우 빡세고, 특히 option부분은 건드리지도 못한다.그래서 다들 div로 어케어케 바꿔 만들거나, 라이브러리를 쓴다.몇 번 div로 직접 바꿔가면서 만들어 썼었는데, 그냥 라이브러리가 훨씬 편해서 앞으로 라이브러리를 쭉 쓰자고 마음먹었다. 가볍고 쓰기 편한 select dropdown 라이브러리 제이쿼리 나이스 셀렉트 jQuery Nice Select 다.매우 가볍고 쓰기 쉬워서 난 이게 더 좋았다. https://jqueryniceselect.hernansartorio.com/ jQuery Nice SelectUsage 1. Include jQuery and the plugin. 2. Include the plugin styles, either the compile..

게임 UI처럼 팝업을 원하는 위치로 이동시키고 싶을 때가 자주 있다. 아래 제이쿼리로 화면 내에서 팝업이 벗어나지 않게 하면서팝업 헤더를 드래그 해서 팝업을 움직이는 기능 function enablePopupDrag() { var $currentPopup = null; //현재 드래그 중인 팝업 요소 저장 var clickOffsetX, clickOffsetY; //팝업이 클릭된 위치와 팝업의 left, top 경계 사이의 offset(거리) 저장 $('.popup_header').on('mousedown', function(e) { //사용자가 팝업 헤더에 마우스를 눌렀을 때 이벤트 시작 $currentPopup = $(this).closest('.popup'); //이벤트..

https://www.typeitjs.com/ TypeIt | The most versatile JavaScript typewriter effect library on the planet. www.typeitjs.com 개인적인 용도로는 자유롭게 사용이 가능하다. 하지만 상업적인 용도로는 한 프로젝트만 사용시 9$, 프로젝트 수 제한없이 무제한으로 사용시 29$를 지불해야 한다. CDN 코드 기본 사용 예시 자바스크립트 코드 new TypeIt("#hero", { speed: 50, startDelay: 900, }) .type("the mot versti", { delay: 100 }) .move(-8, { delay: 100 }) .type("s", { delay: 400 }) .move(null, ..

자바스크립트에서 자주 쓰이는 이벤트들을 알려달라고 했다. CHAT GPT의 답변 : JavaScript에서 자주 사용되는 이벤트 중 일부를 아래에 나열하겠습니다. 이러한 이벤트들은 웹 애플리케이션을 상호작용 가능하게 만드는 데 중요합니다. click: 요소를 클릭할 때 발생하는 이벤트. 버튼, 링크 등을 클릭할 때 사용됩니다. mouseenter/mouseleave: 마우스가 요소에 들어가거나 나갈 때 발생하는 이벤트. 주로 마우스 호버 효과를 구현하는 데 사용됩니다. keydown/keyup: 키보드의 키가 눌렸을 때 (keydown) 또는 떼어졌을 때 (keyup) 발생하는 이벤트. 주로 키보드 단축키나 입력 검증 등에 사용됩니다. submit: 요소가 제출될 때 발생하는 이벤트. 주로 폼 데이터를 ..

W3Schools 에 있는 내용들 기반 작성 - 보통 변수를 사용하기 전에 변수를 선언하는 것이 좋다. - 스크립트의 시작 부분에 모든 변수를 선언하는 것이 좋다. var 사용 예제 var x = 5; var y = 6; var z = x + y; - var는 1995년부터 2015년까지 모든 자바스크립트 코드에서 사용되었다. - let과 const는 2015년에 자바스크립트에 추가되었다. - var는 이전 브라우저용으로 작성된 코드에서만 사용해야 한다. const는 상수값으로, 변경할 수 없다. let은 변경할 수 있다. 변수를 만들 때 일반적인 규칙 - 변수의 이름에는 문자, 숫자, _ , $ 가 포함될 수 있다. - 변수의 이름은 문자로 시작해야 하지만, $나 _로 시작할 수도 있다. - 변수의 이..

jquery 버전 = 뒤에다가 " "를 붙여서 쓴다. 문장입니다. 태그글자바꾸기 vanila javascript 버전 html(" ") 안에 바꾸고 싶은 내용을 쓴다. 문장입니다. 태그글자바꾸기

헤더에 있는 애들은 depth1, 헤더에 마우스 커서를 올렸을 때 슬라이드든 show든 해서 보이는 애들은 depth2. header의 배경은 header:after. :after와 :before는 script에서 선택자로 선택되지 않는다. $("header:after") -> 이딴 게 전혀 먹히지 않음 그래서 header에 active 클래스를 추가해서 호버했을 땐 active 클래스 추가ㅡ 호버 안 할 땐 active 클래스 삭제를 하는 방식으로 만들었다. jquery 로 짰을 때 LOGO 메뉴1 depth2 메뉴1 depth2 메뉴2 depth2 메뉴3 depth2 메뉴4 메뉴2 depth2 메뉴1 depth2 메뉴2 depth2 메뉴3 depth2 메뉴4 메뉴3 depth2 메뉴1 depth2 메..

vscode에서 live server 로 브라우저 열 때 웨일로 열고 싶어서 찾아봄. 기본은 chrome으로 열린다.(예전에 설정에 손대서 기본이 크롬이 아니었을 수도 있음) 비주얼스튜디오코드 켜기 ➡ 왼쪽 5개 아이콘이 있는데 그 중 '확장' 클릭(네모 4개 있는 아이콘) 검색창에 live server를 치고 내가 설치한 live server의 오른쪽 아래 톱니바퀴 클릭 톱니바퀴 누르면 이렇게 메뉴들이 나오고 아래에서 두 번째 확장 설정 클릭 검색창에 custom browser 나 그냥 browser를 쳐서 맨 위의 옵션에서 null 로 되어있는 부분을 바꿔서 live server로 여는 브라우저의 종류를 고를 수 있다. 크롬, 크롬 비밀모드, 파이어폭스, 파이어폭스 비밀모드, 엣지, 블리스크(처음 봄..