JIN_CODER

2022.04.28 Javascript로 페이지 로드 시 자동으로 실행되는 함수를 구현하려면 window.onload 함수를 사용 페이지의 모든 요소들이 로드되어야 호출 됨(페이지가 모두 로드된 시점) 한페이지에는 하나의 window.onload() 가 적용됨 window.onload = function () { alert("hi") } jQuery는 자바스크립트의 window.onload 함수의 문제점을 해결하기 위해 $(document).ready() 함수를 사용 DOM이 모두 로드 되면 실행됨 중복 사용해도 순서대로 모두 실행됨 $(document).ready(function(){ alert("hi") }); // or $().ready(function(){ alert("hi") }); // 참고 ..

2022.04 28 Ajax란 Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나 javascript를 통해서 서버에 데이터를 비동기 방식으로 요청하는것 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신 Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다. 즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다. Uncaught TypeError: $.ajax is not a function → ajax라는 게 없다는 뜻 Ajax 기본 골격 $.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function..

2002.04.28 Javascript의 search() 함수는 문자열에서 조건 문자열을 찾아서 몇 번째 위치에 확인을 해주는 함수입니다. 매칭이 된다면 첫 번째로 매치되는 인덱스를 반환하게 되지만, 만약 찾지 못한다면 -1을 반환하게 됩니다.(없으면 -1) 쉽게 말하자면 검색되는 문자열의 위치값을 반환하게 됩니다. 영문의 경우 대소문자 구분하니 주의! let test1 = "Hello World"; let test2 = "안녕하세요 스파르타"; console.log(test1.search("W")); console.log(test1.search("w")); console.log(test1.search("Hello")); console.log(test1.search("스")); console.log(te..

2022.04.28 JQuery란, HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔것. 라이브러리 JQuery 사용 예시 // js 코드만 사용 document.getElementById("element").style.display = "none"; // jquery 사용 $('#element').hide(); jquery 사용시 코드가 짧아지고, 더 직관적임 JQuery 사용법 jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것입니다! (그렇게 때문에, 쓰기 전에 "import"를 해야합니다!) https://www.w3schools.com/jquery/jquery..

2022.04.26 배경에 이미지를 넣을때 공식이 대략 있는듯 이미지 주소(이미지) 배경 사이즈 : 커버 배경 위치 : 센터 .mainImg { background-image: url("https://cdn.pixabay.com/photo/2018/08/27/00/07/toy-3633751_960_720.jpg"); background-position: center; background-size: cover; width: auto; height: 500px; } 이렇게 넣으면 이쁘게 크기에 맞게, 중앙에 잘 들어감 +====+ 2022.05.03 배경이미지 반투명으로 넣기 * { margin: 0; padding: 0; } .container { position: relative; height: 100v..

2022.04.26 자바스크립트의 반복문 기본 형태는 for (변수선언; 끝날조건; 루프하고 뭐 할지){ 콘솔로그에 "hi"를 찍어라 } for (let i = 0; i < 10; i++){ console.log("hi") } 식으로 사용함 맨처음 i =0 인데 10보다 작으니까 콘솔을 찍고 i++ i에 1을 더함 그럼 이제 i는 1이 되고 10보다 작으니까 콘솔을 찍고 i에 1을 더함 ... i는 10이 되면 10보다 작지않으니까 반복문이 종료댐 보통 이렇게 딕셔너리가 들어있는 리스트인 mise_list를 돌면서 조건문과 함께 미세먼지가 40 초과 이면 구 이름과 미세먼지를 찍어라 하면서 돎 for (let i = 0; i < mise_list.length; i++){ let gu_name = mise..

2022.04.26 문자열 나누기 .split(" ") 보통 문자열을 변수에 담고 변수.split("기준으로 삼고싶은 문자") 하면 (" ")안에 기준 문자를 기준으로 나누어 져서 리스트 형태로 나뉘어진다. 리스트 형태니까 순서에 따라 꺼내 쓸수 있고, 그 안에서 또 나누기도 가능

2022.04.26 구글 웹폰트 사용법 https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 사이트에서 원하는 폰트 클릭 오른쪽 중앙 Select this style 누르면 장바구니(?) 같은 곳에 들어감 맨위 오른쪽 Hide selected family 누르면 오른쪽 에 내가 선택한 폰트들이 나옴 /* CSS에 이 부분을 추가하면 완성! */ * { font-family: 'Nanum Gothic', sans-serif; }

2022.04.26 웹 css 전체 중앙 정렬 index.html 로그인 페이지 아이디와 비밀번호를 입력해주세요 ID: PW: 로그인하기 mystyle.css .container { /*background-color: green;*/ width: 400px; margin: auto; text-align: center; } margin:auto 는 구역들이 중앙 정렬 되는거고 text 같은 요소들은 기본 정렬댐 ----- text-align:center 해주면 글 요소들도 가운데 정렬이 댐 ----- 크기를 볼라면 배경색을 넣어보고,(전체 다 잡혀 있으면 크기 조절) 크기를 정해주면 양옆으로 동등한 마진이 들어가서 중앙정렬이 댐 ----- button 중앙 정렬 .Btn{ margin: auto; disp..

2022.04.26 앞에 쓴 글과 똑같은것 같지만, 제대로 이해가 안대서 다시 작성 중 https://getbootstrap.com/docs/5.1/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. getbootstrap.com 이 부트스트랩 사이트 에서 DOCS 배너에서 왼쪽 맨위 Getting started 를 들어가면 css, js CDN을 받을 수 있다. CSS는 head 태그에 js의 script는 bo..