천천히 차근차근

const element = document.getElementById('my_div'); element.innerHTML = 'InnerHTML'; 값을 변경하거나 추가하고 싶은 태그에 id를 지정하고 자바스크립트로 불러와서 활용하기❗❕

📌 문자를 숫자로 형변환하는 방법 1 // 숫자를 스트링로 바꾸기 var tt = 2 tt += ""; alert(typeof tt); // Result : string // 스트링을 숫자로 바꾸기 tt = "2" tt *= 1; alert(typeof tt); // Result : number 📌 문자를 숫자로 형변환하는 방법 2 // 숫자를 스트링로 바꾸기 var tt = 2 alert(typeof tt); // Result : number tt = String(tt); alert(typeof tt); // Result : string // 스트링을 숫자로 바꾸기 tt = "2" alert(typeof tt); // Result : string tt = Number(tt); alert(typeof t..

function onKeyDown() { if(event.keyCode == 13) { //TODO : 실행시킬 코드 alert('엔터 눌림'); } } event.keyCode 값을 활용할 수 있다. 아래의 key code 표를 참고하자❗❕❗❕❗❕❗❕❗❕❗❕ Key Code Reference Table 0 10 20 Caps Lock 30 40 Arrow Down 1 11 21 31 41 2 12 22 32 42 3 13 Enter 23 33 Page Up 43 4 14 24 34 Page Down 44 5 15 25 35 End 45 Insert 6 16 Shift 26 36 Home 46 Delete 7 17 Ctrl 27 Esc 37 Arrow Left 47 8 Backspace 18 Alt 28..

See the Pen 숫자 아닌 문자열을 제거하는 방법(정규식) by hyeryeonkim (@khr777) on CodePen. 😎 코드 설명 숫자와 문자열을 섞어서 입력하면, 문자열을 제거하고 숫자만 출력하는 정규식을 사용했다. 입력한 숫자가 3자리를 초과할 경우, 3자리까지만 입력하도록 제한한다. 숫자 없이 문자열만을 입력할 경우, 문자열이 모두 제거되어 입력받은 길이가 0이 되므로 입력 받은게 없는 경우(문자열만을 입력한 경우) 숫자를 입력해달라는 메시지를 출력한다. 입력 받은 숫자들은 배열에 담아 콘솔에 출력된다.(내가 사용할 용도로 만들어둠) 위의 코드는 코드펜에 직접 접속하여 참고하기를 권장한다.

난수 생성하기 (랜덤 숫자, Random Number) 출처:https://hianna.tistory.com/454 [Javascript] 난수 생성하기 (랜덤 숫자, Random Number) Javascript로 난수를 생성하는 방법을 소개합니다. Math.random() 범위를 지정한 난수 생성하기 0~9 0~10 0~99 0~100 1~10 2~5 난수 생성 함수 만들기 (범위 지정) min

문제 사항 이클립스로 톰캣 설정을 하는데, 다음과 같은 에러가 발생한다. 원인 분석 서버 설정에서 Path를 잘못 잡아줬기 때문. 해결 방법 서버 더블클릭해서 설정을 열고, 해당 항목을 ' / ' 하나만 남겨놓고 다 지워놓으면 된다. 하단에 Modules를 체크해야 화면이 나타나므로 눌러주기! Path는 수정 가능하며, 내가 사용하려는 Path에 맞춰서 설정&사용하면 된다.

JSP 파일을 생성 직후 The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path 에러가 발생 하는 경우가 있습니다. 해당 프로젝트 우클릭 -> Properties를 선택 합니다. 좌측에 Java Bulid Path -> Libraries 선택 우측에 Add Library 선택 합니다. Server Runtime을 선택 합니다. Apache Tomcat(아파치 톰캣) 선택 합니다. 적용 후 종료 합니다. 오류가 해결이 됩니다. 나의 경우 modulepath에는 아무것도 두지 않고, classpath에 server 관련과 JRE System java version을 변경해주고 maven update를 실행하니 오..

a태그를 활용한 파일 다운로드 기능 사용법 html에서 a태그를 이용하여 손쉽게 원하는 파일의 경로를 지정하고 다운로드할 수 있습니다. a태그 작성법 테스트 문서 다운로드 작성한 a태그에 대한 설명 Help. 1. a태그를 사용해서 파일 다운로드 기능을 구현할 수 있다. 2. href="" 속성에 파일이 존재하는 실제 경로를 지정해 준다. (위 예시 코드 참고) 3. a태그의 download 속성을 사용한다. 4. 다운로드하는 파일의 파일명을 원본 파일과 다르게 지정하고 싶은 경우에 위의 예시 코드와 같이 download="테스트" 라고 입력해 주면 '테스트'라는 파일명으로 파일을 다운로드할 수 있다. 5. download="" 를 공란으로 비워두면 원본 파일명 그대로 파일을 다운로드 받을 수 있다. 참..

See the Pen by hyeryeonkim (@khr777) on CodePen.

나는 이전에 필요한 것이 있었는지, 구글에서 이미 Web Developer 앱을 설치해두었었다. 이 앱을 설치한 후, 😉 아래의 순서로 접속하면 내가 작성한 CSS의 유효성을 검토할 수가 있다. Tools를 클릭하고 Validate CSS를 클릭한다. 그러면 위와 같이 CSS 검사 결과, 발견된 오류가 없음을 확인할 수 있다🎅 아래와 같이 HTML도 검사할 수 있음을 참고하자!!!! 🎁

사이트에서 이미지를 표현하는 방법 2가지(기본 원칙) 📌 html img 태그로 표현(의미가 있을 때_없으면 이 사이트인지 모를 때) alt 태그 - 대체 문자 표현 📌 css background 속성으로 표현(의미가 없을 때_장식용) 대체 문자 필요 없음 🤗 요즘에는 이미지를 모두 background 속성으로 표현 웹 표준을 준수하기 위해서는 이 2가지 알고 지켜야 한다. 가상으로 대체 문자를 만들어줌(IR 효과) 이미지 스프라이트 효과 기법을 사용하면 img 용량도 줄어들고 편하다. IR효과 (웹 준수하여 CSS 사용하는 방법) ✅ 의미있는 이미지의 대체 텍스트를 제공하는 경우 이미지가 없으면 대체 텍스트가 제공되지 않는 것 같음 .ir_pm { display: block; overflow : hid..

프로젝트 위치에서 yarn start 명령어로 시작해주자!!!!!

See the Pen by hyeryeonkim (@khr777) on CodePen. ✔ parent() 바로 상위 부모를 찾는다. ✔ parents() 최상의 부모를 찾는다.

See the Pen by hyeryeonkim (@khr777) on CodePen. 위와 같이 요소들 중에서 제외시키고 싶은 특정 요소를 not() 메서드 안에 입력하면 된다! 헷갈리지 않도록 주의하자❗ 😏

아래와 같이 jquery 를 작성하면 새로운 클래스명을 사용하고 싶을 때, 클래스명을 더하고, 삭제하지 않아도 손 쉽게 클래스명을 변경하여 사용할 수 있다.😍 $('변경하려는 요소').attr('class', '변경하려는 클래스명');

쿠키 저장 function setCookie(key, value, expiredays) { var todayDate = new Date(); todayDate.setDate(todayDate.getDate() + expiredays); document.cookie = key + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";" } 쿠키 불러오기 function getCookie(key) { var result = null; var cookie = document.cookie.split(';'); cookie.some(function (item) { // 공백을 제거 item = item.replace(' ', ''); v..

메뉴의 Application 을 클릭한 다음에 좌측의 Cookies 를 확인해보면 내가 지정한 쿠키의 값을 확인할 수 있다. 삭제도 가능하다😣

position: fixed; margin: 0 auto; left: 0; right: 0; 🎈 위와 같이 입력하면 fixed를 화면 정중앙에 배치할 수 있다❗