전체 글153 [TIL] 대소문자 구분없이 검색 기능 구현하기 영화 리스트 중에서 제목을 검색하면해당 영화만 페이지에 나올 수 있도록 구현해봤다. 그런데 영화 제목에 대문자도 들어있다보니똑같이 대소문자를 구별하여 검색해야만 했고이는 사용자들에게 매우 불편함을 줄 것 같았다. 그래서 대소문자를 구별하지 않아도 검색이 가능한 코드를 짜봤다. //html에 들어갈 영화 카드 + 검색 값 세팅 function movieList(val = "") { movieCard.innerHTML = movieData.map((data) => { if(data.title.toLowerCase().includes(val.toLowerCase())) { return` //생략// `; .. 2024. 4. 29. [TIL] 웹꾸_파비콘 적용하기 웹페이지에 없으면 섭섭한 파비콘(Favicon)을 넣으려 한다. *파비콘(Favicon)이란 웹 페이지를 대표하는 작은 이미지로 웹 페이지 탭의 좌측에서 볼 수 있다. 우선 파비콘에 넣으려고 하는 이미지를 미리 다운로드하고파비콘으로 파일을 변환해주는 사이트에 접속한다.https://www.favicon-generator.org/ Favicon & App Icon GeneratorUpload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.www.favicon-generator.org 파일선택란에 원하는 이미지 파일을.. 2024. 4. 26. [TIL] 자바스크립트 실수를 정수로 변환하기 위 문제를 풀기 위해 코드를 아래처럼 작성하니 예제 두번째가 틀린 값이 나왔다. 두번째 예제의 결과 값은 3을 원했는데 3.5가 나왔으므로 실수를 정수로 변환해야겠다고 생각했다.실수를 정수로 변환하는 코드인 parseInt();로 바로 적용해주었다. 2024. 4. 25. [TIL] 자바스크립트 버튼 클릭 시 alert창 띄우기 HTML문서 안에 를 넣고 onclick="내가설정한 함수이름"을 넣어준다. 검색 스크립트파일 안에는 아래와 같이 함수를 선언하면 완료! function btn() { alert("안녕하세요"); } 2024. 4. 24. [TIL] 데이터의 유형_숫자 데이터의 타입에는 숫자와 문자가 있다. 먼저 숫자에 대해 알아보자. //1-1, 정수 let num1 = 10; console.log(num1); console.log(typeof num1); 값 : 10 타입 : number 변수를 정수 10을 주면 데이터의 타입이 숫자형으로 그대로 반환된다. // 1-2. 실수(float) let num2 = 3.14; console.log(num2); console.log(typeof num2); 값 : 3.14 타입 : number 실수 또한 데이터 타입이 숫자형임을 알 수 있다. //1-3. 지수형(Exp) let num3 = 2.5e5; //2.5 X 10^5 console.log(num3); console.log(typeof num3); 값 : 250000 .. 2024. 4. 23. [TIL] 마우스 클릭 시 효과음 넣기 팀프로젝트로 웹페이지를 만들며 컨셉에 맞게간단한 게임 요소를 넣기로 했다.그래서 구현하게 된 퍼즐게임. 퍼즐게임은 '데브리'님의 강의 영상을 참고했다.https://youtu.be/iTBZdg7tg-w?si=m6GbOKlwihkJPyDV 아래 영상처럼 퍼즐게임이 잘 구현되었지만퍼즐이 옮기는데에 있어 조작감이 아쉬운 느낌이다.그래서 퍼즐 클릭 시 효과음을 넣기로 했다. 효과음 반영하는 코드 작성은 아래 블로그를 참고했다.https://record-ay.tistory.com/32 [HTML] 클릭시 효과음 넣기1. 스킨 편집 들어간 후 html 편집 들어가기 html편집하기에서 아래 소스 복사해서 넣기 2. 마우스 클릭 효과음 다운로드 http://itthe.net/15 3. 클릭 효과음 다운받고 적.. 2024. 4. 18. [TIL] var, let, const의 차이 var, let, const는 스크립트에서 변수를 할당할 때 쓰이는 예약어이다. 그런데 var 예약어는 잘 사용하지 않는다. 그 이유는 다음과 같다. var 예약어 사용 시 실수로 빼먹게 되면 지역변수(로컬변수)가 전역 변수(글로벌변수)가 될 수 있고 프로그램이 길어지면 중간에 변수가 재선언 되거나 재할당 되어 오류가 발생한다. 이를 방지하기 위해 let과 const를 사용한다. let 예약어로 선언한 변수는 변수를 선언한 블록({}로 묶은 부분)에서만 사용 가능하고 블록을 벗어나면 사용할 수 없다. 또 재선언은 할 수 없지만 재할당은 가능하다. const는 변하지 않는 상수변수다. 그래서 값을 여러번 바꿀 때에는 let을, 고정된 값이면 const를 사용하면 된다. [참고문헌] Do it! 한권으로 끝.. 2024. 4. 18. [TIL] <ul>, <ol>, <li> 앞에 점 삭제하기 웹문서 작성 시 리스트를 나열하는 경우가 많다. 그래서 , , 코드가 많이 쓰이는데 이 코드들은 앞에 숫자나 영어, 점이 자동으로 붙는다. 웹 컨셉에 맞게 디자인 하려면 삭제하는 것이 좋은데 css에 list-style-type: none; 태그를 사용하면 없어진다. .empty { list-style-type: none; } -------------------------------------------------- 안녕하세요 감사해요 잘 있어요 다시 만나요 안녕하세요 감사해요 잘 있어요 다시 만나요 2024. 4. 17. [TIL] 배경 이미지 전체 채우기와 고정하기 style> body { background-image: url(https://images.freeimages.com/images/large-previews/529/nature-1492826.jpg); background-repeat: no-repeat; background-size: cover; } style> 위에 처럼 작성하면 전체 창 크기에서는 이미지가 화면 전체에 채워지지만창 크기를 축소하면 아래 사진처럼 화면 하단에 공백이 생긴다. 이미지를 중복없이 화면을 채우기 위해서는 background-attachment: fixed; 태그를 적용하면 된다.이 태그는 스크롤이 생겨 이동 시에도 배경화면이 고정되어 웹페이지를 깔.. 2024. 4. 16. 이전 1 ··· 10 11 12 13 다음
