I'm a Fig, Not a Pig

목차 1. target, currentTarget 2. target과 currentTarget의 차이 3. 퀴즈 자바스크립트에서 이벤트를 다룰 때 클릭한 요소를 가져오는 방법으로 event 객체의 target 또는 currentTarget 프로퍼티를 사용합니다. 1. target, currentTarget 요약 - target: 이벤트가 발생한 바로 그 요소를 직접 가리킴 - currentTarget: 이벤트 리스너를 가진 요소를 가리킴 예제 다음과 같은 코드가 있습니다. span 실행결과 위 결과에서 검은색은 div, 핑크색은 span입니다. 코드를 보면 onClick 이벤트는 div에 설정을 했지만 검은색, 핑크색 클릭 시 둘 다 이벤트가 발생합니다. div에만 이벤트를 설정했는데 자식요소인 span..

목차 1. prompt() 2. confirm() 3. alert() 4. confirm()과 alert()의 차이 5. 퀴즈 1. prompt() 함수 - 문자열을 입력할 때 사용합니다. - 숫자를 입력해야 한다면 입력한 값을 숫자로 변환하여 사용해야 합니다. - prompt("메세지", "디폴트 값") 에서 첫번째 파라미터는 입력 창에 띄워지는 메세지이며 두번째 파라미터는 입력 부분의 기본 디폴트 값 입니다. let promptObj = prompt('값을 입력하세요', 'Default Value'); - prompt() 만 사용하는 경우 아무런 설명없이 문자열만 입력받습니다. 예제 prompt() 함수를 사용해보겠습니다. let promptObj = prompt('값을 입력하세요', 'Default..

1. return 정의MDN의 설명에 따르면 'return 명령문은 함수 실행을 종료하고 주어진 값을 함수 호출 지점으로 반환합니다.' 라고 되어있다. 1. 함수 중단 2. 주어진 값을 함수 호출 지점으로 반환 2. return 설명함수 본문에서 return문을 만나면 함수는 그 지점에서 중단된다. 값을 제공한 경우에는 함수를 호출한 곳에 그 값을 반환하며 값을 명시하지 않으면 undefined를 반환한다. 아래의 return 명령문은 모두 함수 실행을 중단한다.return; return true; return false; return x; return x + y / 3; break와의 차이break란? 현재 루프 즉, switch나 for, while문 등을 종료하고 루프에서 빠져나오는 것 return..

목차 1. event.stopPropagation(); 2. event.preventDefault(); 1. event.stopPropagation(); Propagation는 전파, 확산이라는 의미를 가지고 있다. 사용자가 웹페이지 내의 버튼을 누르면 대부분의 사람들은 버튼만 반응했다고 생각하지만 웹페이지 내부에서는 버튼을 감싸고 있는 부모 태그를 또한 클릭 이벤트에 반응하게 된다. Hello 위의 코드를 보면 a태그는 li, ul 두 개의 부모태그가 있다. 사용자가 a태그를 클릭하면 클릭이벤트가 li, ul 태그가 순차적으로 실행된다. 만약 a태그를 클릭했을때 li, ul 태그가 실행되지 않게 하려면 event.stopPropagation();를 사용하면 된다. 2. event.preventDefau..

목차 1. box-sizing 속성값 2. 예시 3. 정리 4. 퀴즈 1. box-sizing 속성값 box-sizing는 박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다. width와 height는 엘리먼트의 컨텐츠 크기를 지정한다. 그러나 테두리가 있는 경우 테두리 두께로 인해 원하는 크기를 찾기 어렵다. 따라서 box-sizing 속성 중 border-box를 지정하면 이를 해결할 수 있다. 2. 예시 content-box border-box 결과: width가 500px로 동일하지만 box-sizing 속성에 따라 크기가 다른 것을 볼 수 있다. content-box는 테두리를 제외한 부분이 500px이지만 border-box는 테두리를 포함한 부분이 500px이기 때문에 border-bo..

1. Position의 정의 Position는 요소를 원하는 위치에 자유롭게 이동시키기 위해 사용하는 property이다. 2. Position의 사용방법 Position을 사용하는 방법은 1. 기준점을 잡는다 (예- position: absolute;) 2. 이동시킨다. (예- bottom: 100px;) 이렇게 나눌 수 있으며 1번을 실행하기 위해서는 position의 속성을 알아야 한다. 3. Position 속성 Position은 static, relative, absolute, fixed, sticky 총 5개의 속성을 가지며 각각의 기준점은 다음과 같다. static 기준점 없음, 기본값(가장 일반적인 상태) relative 자기 자신을 기준으로 함 absolute 자신의 부모(조상)을 기준으..

목차 1. 데이터 타입이란 2. 데이터 타입의 종류 1. 데이터 타입이란 데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터 (숫자, 문자열, 불리언 등)의 종류를 말한다. 2. 데이터 타입의 종류 1. 원시 타입: 불변 값(변경할 수 없는 값) Number String Boolean null undefined BigInt Symbol 2. 객체 타입 데이터 타입을 하나씩 알아보자. 1. Number (숫자형) 숫자 표현, 산술 연산에 사용되는 데이터 타입이다. 자바스크립트는 다른 언어와 다르게 정수 값과 실수 값을 구분하지 않으며 모든 숫자를 64비트 실수로 표현한다. +, _, *, /의 산술연산이 가능하며 Math라는 내장객체를 이용하여 수학함수를 이용한 결과를 얻을 수도 있다. 2. Stri..

목차 1. 영어 대소문자와 $, _를 사용하기 2. camelCase 3. 변수 이름으로 사용하면 안 되는 것들 1. 영어 대소문자와 $, _를 사용하기 한국어, 중국어, 일본어, 특수문자 등 모두 가능하다. 그러나 세계적으로는 영어 대소문자와 $, _만 사용한다. 따라서 만든 프로그램이 세계적으로 사용되길 바란다면 영어 대소문자와 $, _를 사용하길 추천한다. 또한 첫 글자는 숫자를 사용할 수 없다. 2. camelCase 변수 이름에는 띄어쓰기가 들어가면 안된다. 따라서 camelCase로 변수명을 만들어야 한다. camelCase는 무엇일까? 예제를 통해 알아보자. let firstName = 'Jane'; 위의 예제를 보면 firstname이 아니라 firstName라고 썼다. 두번째 단어의 첫글..

HTML은 다양한 태그가 존재한다. 오늘은 여러 태그 중 태그에 대해 다뤄볼 것 이다. 우리는 링크를 어떨때 사용할까? 보통 현재 페이지에서 다른 페이지로 이동할 때 많이 사용한다. html에서는 태그를 이용해 다른 페이지로 이동할 수 있다. 태그를 통해 페이지 뿐 만 아니라 이미지, 파일, 이메일 등 다양한 곳으로 이동이 가능하다. 1. href 속성 걸음마코딩 위 코드의 결과는 아래와 같다. 1-1. 태그의 주소 태그(Tag) 의 주소는 다양한 방식으로 지정 할 수 있다. 1. 절대 경로 url : 링크의 전체경로 걸음마코딩 2. 상대 경로 url : 같은 프로젝트 폴더 내의 경로 메인으로 바로가기 3. 엘리먼트 ID 를 이용한 url : 같은 문서 내의 엘리먼트 ID, 페이지 내 이동 hello로 ..

1. 리스트 태그 (List tag) 리스트 관련 태그들은 텍스트나 이미지 등을 목록화하여 정리해주고 카테고리 등을 표현하기 위해서도 자주 사용되는 중요한 태그 중 하나다. 2. 리스트 태그 종류 리스트는 세 종류가 있다. 1. Ordered List: 순서가 있는 리스트 2. Unordered List: 순서가 없는 리스트 3. Definition List: 정의 리스트 3 - (1) Ordered List (ol 태그) 태그는 순서가 있는 리스트이다. 따라서 순서가 중요한 목록에서 많이 사용되며 앞뒤 연결성이 있는 내용을 만들 때 주로 사용한다. 요리 레시피 같은 경우에 이 태그를 사용할 수 있을 것 이다. 안에 각 항목들을 나열할 때 를 사용하는데 li는 List item의 약자이다. Ordered..