본문 바로가기
반응형

개발 공부/JS, JQuery29

!important 선언으로 CSS 스타일 적용 !important 선언으로 CSS 스타일 적용 !important 순수 JavaScript를 사용하여 요소에 선언 일반 JavaScript에는 CSS 스타일을 적용할 수 있는 몇 가지 대안이 있다. ​ 1. 스타일시트에서 CSS 스타일 만들기 여기에서 아이디어는 다음을 사용하여 CSS 스타일을 만드는 것이다. !important 클래스 내부에 선언하고 해당 클래스를 요소에 적용한다. 일반 JavaScript에서 className 속성은 지정된 요소의 클래스 속성 값을 가져오고 설정하는데 사용할 수 있다. 따라서 이것을 다음과 같이 사용할 수 있다. ​ JS document.querySelector('input').className += " inputWidth"; CSS .inputWidth { widt.. 2023. 11. 24.
닷홈 호스팅하는 법(무료 웹 호스팅) 닷홈 호스팅이란? 닷홈이라는 서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해 주는 서비스이다. 닷홈 호스팅 닷홈은 도메인, 무료 웹호스팅, 웹빌더, 메일호스팅, SSL보안인증서, 서버호스팅, 코로케이션 등 다양한 호스팅 서비스를 제공하고 있습니다. ​ https://www.dothome.co.kr/ 무료홈페이지 | 무료호스팅 | 닷홈 닷홈은 도메인, 무료호스팅, 무료홈페이지, 웹호스팅, 홈페이지빌더, 메일호스팅, SSL보안인증서, 서버호스팅, 코로케이션 등 다양한 호스팅 서비스를 제공하고 있습니다 www.dothome.co.kr 서비스를 이용하기 위해서는 로그인이 필요하다. 회원가입을 먼저 하도록 한다. 로그인 > 웹호스팅 > 무료 호스팅 무료 호스팅 신청하기 신청하기를 누르면 몇 가지 안.. 2023. 11. 23.
Jquery(제이쿼리) 차트만들기, Ajax를 이용해 날씨차트만들기 ● 차트만들기 https://www.chartjs.org/ 왼쪽의 사이드바에서 쓰고 싶은 차트를 선택 ​ Vertical Bar Chart에서 밑의 Sample코드를 복사해서 사용 ​ 날씨출력 데이터 가져오기 # jquery 파일을 추가합니다 Chart.min.js 파일과 utils.js 파일은 첨부 ​ ​ 날씨출력 데이터 가져오기 ​ 1. 날씨데이터 가지고 오기 => ex01movie.html 참고 http://api.openweathermap.org/data/2.5/weather?q=seoul&appid=1eb1d18602c0e2dde562cdc2005a4495&units=metric ​ 2. console 창에 현재 기온, 최고 기온, 최저 기온을 가지고 올것 현재 기온 temp, 최고 기온 tem.. 2023. 10. 24.
Jquery(제이쿼리) 오픈API, Ajax방식으로 데이터를 요청해 json데이터 추출(영화, 지도) ● Ajax란? ​ ※ 오픈 API 사용하는 방법 1. 회원가입 2. 내가 필요한 API가 뭔지 찾기 3. 샘플코드 보기 (맨 위 OR 맨 아래) 4. ★★★★★ Key신청하기 5. 샘플코드 뜯어보고 수정하기 6. 모르는 내용은 문서확인하기 7. Url 테스트 8. 코드 개발 시작 ​ http://127.0.0.1:5500 인증키: 709950ed56fb6243b4b795fb49640262 https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=709950ed56fb6243b4b795fb49640262&targetDt=20211128 ​ ● 영화 데이터 추출 ​ https://www.kobis.. 2023. 10. 24.
자바스크립트 좋아요 및 댓글작성, 댓글창 ● 좋아요 및 댓글작성, 댓글창 좋아요 0 댓글작성 첫댓글삭제 부분 # jQuery를 사용하겠다고 선언 ​ 부분 좋아요 0 댓글작성 첫댓글삭제 ​ ​ .click vs .on('click') 동적 이벤트 바인딩 차이 .click : 최초의 페이지를 로딩할 때 선언되어있던 요소들에 이벤트를 바인딩 그 이후 더이상 바인딩하지 않음 on('click'): 동적으로 추가된 태그 이벤트 바인딩 ​ 1. '좋아요' 버튼을 눌렀을 때, 0->1 / 좋아요 -> 좋아요 취소 => id를 dislike로 변경 $(document).on('click','#like',function(){ # document에서 #like라는 id의 button를 클릭했을 때 //좋아요 0->1 $('span').text('1') # spa.. 2023. 10. 19.
자바스크립트 this 4가지 사용법 Javascript, This. 자바스크립트에는 this라는 키워드가 있다. this는 문맥에 따라서 다양한 값을 가지는 데, this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서 그 역할이 구별된다. this의 값들은 크게 4가지 정도로 나눌 수 있다. 즉, this를 이용하는 함수를 4가지 방식 중에서 어떤 방식으로 실행하느냐에 따라 this의 값이 결정된다는 뜻이다. 이러한 특성 때문에 this가 무엇을 지칭하는지 알기 위해서 우리는 this가 사용된 함수가 어디서 어떻게 실행되었는지를 찾아야만 한다. ​ ​ 1. 일반 함수 실행 방식 (Regular Function Call) 첫 번째로, 일반 함수 실행 방식으로 함수를 실행했을 때 this의 값은 Global Object를 가리킨다. 즉, .. 2023. 10. 19.
반응형

티스토리툴바