처음부터 차근차근

$("선택자").css('속성', '값'); jquery를 이런식으로 사용하면 css요소를 변경할 수 있다. 하지만 ::before이나 ::after같은 css 요소는 jquery로 변경할 수 없다. 왜냐하면 css : after 및 : before 규칙은 DOM의 일부가 아니기 때문이다. 하지만 직접적인 방법이 아닌 다른 방법으로 css after나 before 요소를 변경할 수 있다. 다양한 방법이 있지만 자주 사용하는 방법 2가지를 정리했다. 1. removeClass와 addClass를 이용해서 아예 클래스 자체를 변경해버리는 방법 .arrow_carrot-down:before { content: "\33"; } .arrow_carrot-up:before { content: "\32"; } 예를 ..

다중 파일을 업로드 할 때 드래그 앤 드롭 할 수 있는 기능을 구현해보았다. js $('.content') .on("dragover", dragOver) .on("dragleave", dragLeave) .on("drop", uploadFiles); function dragOver(e) { e.stopPropagation(); e.preventDefault(); $(e.target).css({ "background-color": "#fff", "outline-offset": "-30px", "outline": "2px dashed #ffb341", "color" : "#ffb341", "font-size" : "30pt" }); let str = 'Drop'; $(e.target).html(str); }..

OpenWeatherMap는 날씨와 관련된 데이터를 제공해주는 API이다. https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local weather models, satellites, radars and a vast network of weather stations. how to obtain APIs (subscriptions w openweathermap.org 사용방법 1..

이벤트 전파를 막는 함수이다. 예를들어 코드의 구조가 이런식으로 되어 있다고 가정해보자. div 2개와 span에 onclick 이벤트가 걸려있으면 span을 클릭했을 때 두개의 div의 클릭 이벤트도 같이 실행된다. 당연히 span은 div들의 자손 노드이기 때문이다. 이런 상황에서 span을 눌러도 div의 이벤트가 실행되지 않게 하는 함수가 있다. 바로 이 함수이다. $('span').onclick = function(e) { // 상위 이벤트(div 두개) 동작하지 않게 하기 e.stopImmediatePropagation(); } 이 함수를 사용하면 상위 노드의 이벤트가 실행되지 않는다! 이벤트 중복 처리 때문에 오류났었는데 한참을 못찾았었다... 결국 오류 발견하고 구글에다 검색해서 찾은 해결..

$("선택자").click(function(){ //코드 }); jquery click 이벤트는 정적 페이지에서는 잘 작동이 되지만 동적 페이지 (예를들어 js 구문으로 추가한 코드라던지...)에서는 작동이 되지 않는다. 그럴 땐 아래의 on 이벤트를 사용하면 된다. $(document).on("click", "선택자", function(){ // 코드 }); 이걸 사용하면 동적 페이지에서도 click이벤트가 잘 실행 된다. 참고 : https://vlog.tion.co.kr/%ED%95%B4%EA%B2%B0-jquery-click-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%95%88%EB%90%A8-%EB%8F%99%EC%A0%81-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC..

fontawesome 5.15.4 free icon을 사용하여 만든 동적 별점 기능이다. html 코드 0 {{-- 나중에 데이터베이스에 저장할 값 --}} js 코드 function change_star(me) { let empty_star = 'far fa-star fa-lg'; let half_star = 'fas fa-star-half-alt fa-lg'; let full_star = 'fas fa-star fa-lg'; let empty_star = 'far fa-star fa-lg'; let half_star = 'fas fa-star-half-alt fa-lg'; let full_star = 'fas fa-star fa-lg'; if (me.value == 0) { $('#star1').at..

Full Calendar는 달력 프레임워크 라이브러리이다. full calendar을 사용하면 일정을 만들고 그 일정을 이동(변경)하는 것을 쉽게 할 수 있다. 그 밖에도 일정 만들기 색깔 지정이나 이벤트 고르기 등 다양한 기능들이 있다. Full Calendar 공식 사이트 https://fullcalendar.io/ FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more fullcalendar.io full calendar 사..

jquery datepicker을 사용하는 방법에 대한 글이다. datepicker 공식 사이트 : https://jqueryui.com/datepicker/ Datepicker | jQuery UI Datepicker Select a date from a popup or inline calendar The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (b jqueryui.com 1. jquery datepi..