javascript 변수의 선언 방법은 var, const, let 3가지가 있습니다. 각각의 차이점에 대해 알아보겠습니다. var var는 변수 선언 뒤 재선언을 해도 결과값이 에러없이 출력됩니다. 어떻게 보면 재선언 기능이 장점으로 보일 수 있겠지만 같은 변수명을 계속 사용할 경우 이미 선언한 변수값이 사라지는 문제가 발생해 치명적인 단점으로 작용할 수도 있습니다. let let은 재선언은 불가하지만 재할당이 가능합니다. 아래와 같이 재선언한 경우 에러 메시지를 출력합니다. 재할당한 경우는 제대로 출력되는 걸 볼 수 있습니다. const const는 재선언, 재할당이 모두 불가합니다. 먼저 재선언한 경우 let과 동일하게 에러 메시지를 출력합니다. 다음으로 재할당한 경우입니다. 처음 선언한 "hell..

이미지에 마우스를 올렸을 때(hover) 이미지가 확대되고 마우스가 벗어나면 원래 상태로 축소되도록 해보겠습니다. 소스 보시겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 마우스 올렸을 때 이미지 확대/축소 Colored by Color Scripter cs HTML파일은 태그에 클래스를 주고 태그로 이미지 하나를 불러오도록 했습니다. 1 2 3 4 5 6 7 8 9 .box img { /* hover 뒤 애니메이션 */ transform: scale(1.0); /* 이미지 확대 */ transition: transform .5s; /* 시간 설정 */ } .box img:hover { /* hover 시 애니메이션 */ transform: scale(1.5); /* 이미지 확대 */ t..

jQuery를 이용해서 의 글자수 제한을 둬 해당 글자수가 넘어가게 되면 alert를 띄워 더 이상 쓰지 못하도록 해보겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 textarea 글자수 제한 $(document).ready(function() { // textarea 글자 수 제한 $('#content').on('keyup', function() { if($(this).val().length > 10) { alert("최대 10자까지 입력 가능합니다."); $(this).val($(this).val().substring(0, 10)); } }); }); Colored by Color Scripter cs 먼저 jQuery 를 사용하기 위..

for문 안에 for문이 들어가 있는 형태로 간단한 예제를 통해 알아보겠습니다. 아래 예제는 1~6학년을 출력하고 각 학년마다 5반까지 출력하도록 했습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 중첩 for문 for(var i = 1; i

jQuery를 이용해서 웹페이지가 로드 됐을 때 특정 div 로 이동하는 방법을 알아보겠습니다. 아래 소스는 태그 안에 태그를 넣어 red, orange, yellow 색에 해당하는 jpg 이미지 파일을 지정했습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 javascript focus Colored by Color Scripter cs 웹브라우저로 열어보면 아래와 같은 구조를 갖고 있고 이 경우는 마우스로 스크롤을 내렸습니다. 이 상태에서 태그를 추가하겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 javascript focus $(document).ready(function ..

무료로 아이콘을 사용할 수 있는 웹사이트 중 Font Awesome 사용법에 대해 알아볼 텐데요. 모든 아이콘이 무료로 이용할 수 있는 건 아니지만 웬만한 기본형 아이콘은 무료이며 양도 많은 편이라 알아두시면 유용하게 사용할 수 있을 겁니다! 사이트 주소입니다. https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 접속하시면 이런 페이지가 뜰 텐데요. Start for Free를 선택해줍시다. 클릭하시면 이메일을 입력받을 수 있게 되어 있는데요. 입력 후 Send..