문제 우리가 input의 checkbox를 떠올렸을 때, 가장 먼저 생각나는 건 조그마한 박스에 파란색 체크 모양일 것이다. html을 처음 배울 때만 해도 이 모양 자체를 바꿀 수 있다는 건 상상조차 못했었다. 하지만, checkbox도 그렇고 radio도 그렇고 input의 타입들 또한 css를 통해 다양하게 커스터마이징 할 수 있으며 이 글에서는 input의 checkbox 타입을 기준으로 간단히 커스터마이징 하는 방법에 대해 소개하려고 한다. 방법 HTML 체크포인트 여기서는 html을 잘 봐둬야 한다. 여기서 반드시 기억해야할 점은 딱 2가지이다. 첫 번째, input의 id와 연결될 label의 for 값이 서로 같아야 연결이 된다. 두 번째, 체크박스 1개당 2개의 label 태그를 만들어준..

개념 transform은 간단하게 말해서 css를 이용해 요소의 위치, 크기 등을 자유롭게 바꿔주는 기능을 수행한다. 이 글에서는 특정 요소의 위치, 크기, 회전, 기울임을 바꿔주는 transform 속성을 다뤄볼 예정이다. 유형 translate translate은 좌우로 이동시키는 기능이다. translate(x축 이동거리, y축 이동거리)로 쓰이며, 각각 translateX(), translateY()로도 쓰인다. 값으로 음수를 쓰면 X축 기준 왼쪽으로 이동되며, Y축 기준 아래쪽으로 이동된다. 우리가 수학 시간에 배운 그래프의 좌표 값과 똑같다고 생각하면 된다. 뿐만 아니라, 이동 거리를 픽셀 값과 퍼센트 값 모두 줄 수 있다는 것도 특징이다. rotate rotate는 좌우로 회전시키는 기능이다..

개념 setTimeout() function hello(){ alert("Hello!"); }; let timeOut; start.onclick = function(){ timeOut = setTimeout(hello, 2000); }; setTimeout(실행할 함수, 딜레이 시간)은 특정 함수를 일정 시간 이후 딱 1번 실행시켜주는 함수이다. 위의 코드에서 setTimeout(hello, 2000)은 hello() 함수를 2초 뒤 실행하라는 뜻이다. 시간 지연 함수를 사용할 때는 몇 가지 주의해야 할 점이 있다. 먼저, 변수 선언을 해야 한다. 위의 코드인 경우 timeOut으로 값 없이 먼저 변수 이름만 선언을 해주었고, 클릭했을 때 setTimeout()을 할당해주었다. 이렇게 한 점은 시간 지연..

개념 해당 글은 자바스크립트 엔진의 입장에서 함수를 호출했을 때 준비-초기화-실행 단계 중 준비 과정에서의 실행문 생성과 실행 과정을 글쓴이 한 사람의 입장에서 보기 쉽게 정리한 글이다. 따라서 다른 자바스크립트 교재나 실제 자바스크립트 엔진의 논리 구조와 비슷할 지는 몰라도 내용의 깊이 정도는 다를 수 있다. 그저 이해하기 쉽게 정리한 글임을 다시 한 번 더 강조하는 바이다. 함수가 작동하는 데에는 총 3가지의 단계를 거친다. 준비 단계 - 초기화 단계 - 실행 단계로 준비 단계에서는 실행 컨텍스트를 생성하고 스코프, 변수와 함수, this 바인딩 등 함수를 실행하는 데 필요한 기본의 것들을 실행 컨텍스트에 저장(참조)하는 단계이다. 초기화 단계는 준비 단계에서 정리된 변수와 함수 값에 undefine..

개념 함수 실행(해석) 과정 자바스크립트에서 가장 많이 사용하는 오브젝트는 단연 함수(function) 오브젝트일 것이다. 단순 반복을 줄여주는 함수는 개발에 있어 필수적인 도구지만, 함수가 어떻게 작동하는 지는 알지 못했고 굳이 함수가 어떤 원리로 구현되는지 알려고 하지도 않았다. 자바스크립트를 사용하는 개발자 입장에서, 단순히 "함수는 그냥 그런 애니까~"라며 함수의 작동 원리를 그냥 지나쳐버리는 건 굉장히 모순적인 일이다. 그냥 함수를 코드로써 치기만 했다면, 이번에는 개발자 입장이 아닌 스스로가 자바스크립트 엔진이 되었다고 생각하고 내 몸의 함수를 접했을 때 어떻게 반응을 보이는지 이해해보자. function book(){ var title = "Good"; // 변수 선언 function get..