[jQuery] 제이쿼리 button click trigger / enter key event

2021-03-24 위와 같은 형식의 텍스트를 입력할 수 있고 우측에 내용을 검색할 수 있는 버튼이 있는 형식이 있다. 이는 구글 / 네이버 / 다음과 같은 웹사이트에서 흔히 볼 수 있다. 여기서의 검색이 진행되는 방식은 흔히 버튼을 누르거나 Enter 키를 통해서 페이지가 넘어가는 형태이다. 이는 한 가지의 동작에 두 가지 방식이 적용되는 형태인데, 이를 구현하는 방법을 알아보자. - 구현코드 바로 구현 코드를 첨부하였다. 코드의 내용은 버튼을 클릭하면 이벤트가 발생하여, 콘솔 창에서의 해당 input 창에 입력한 내용을 출력하고 알림 창도 뜰 수 있도록 구현하였다. 이후 Enter 키 입력 시에도 구현한 click 이벤트가 발생할 수 있도록 keydown시 클릭 트리거가 발생할 수 있도록 하였다. 여..

• format_list_bulleted WEB/jQuery
• · 2021. 3. 24.
• textsms

[CSS] CSS Combinators Selector(선택자) (자식 형제 선택자 종류)

2021-03-23 Combinators 선택자들은 각 선택자들의 관계를 설명하며, 특정한 부호로 이들과의 관계를 규정하며 표현할 수 있다. - descendant selector( " " ) descendant 한국어로 번역하면 자손이라는 의미를 가지고 있다. 때문에 [ 부모선택자 자손 선택자 ]라고 지정 시 해당 부모의 모든 자손이 선택된다. (space 키 즉 하나의 빈공 백문자가 기호로 사용된다.) AAA BBB BBB-1 BBB-2 BBB-3 CCC DDD 위의 예제는 가장 상위 부모태그 outset을 기준으로 하위에 있는 li 태그를 선택하였다. 그 결과 outset이 감싸고 있는 모든 li 태그들이 영향을 받는 것을 확인할 수 있다. - child selector( " > " ) child ..

• format_list_bulleted WEB/CSS
• · 2021. 3. 23.
• textsms

[JavaScript] JS 변수 키워드 let 과 var 알아보기

2021-03-21 자바스크립트 내부에서 변수를 선언하는 키워드 let과 var 이 존재한다. 해당 두 키워드는 변수를 선언하는 측면에서는 비슷하다. 때문에 둘을 비교하는 경우가 많은데, 오늘은 이둘의 기능적인 측면에서의 차이점을 비교하면서 알아보자. - 선언 변수 선언은 두 키워드 차이가 없다. 또한 var 와 let으로 선언된 변수는 호이스팅이 적용되기 때문에 아래와 같이 변수명만 선언하는 것도 가능하다. var num1 let num2 console.log(num1) console.log(num2) num1 = 10 num2 = 20 - 블록스코프(Block Scope) 블록 스코프에서는 조금에 차이가 있다. 아래의 코드를 보자. 위와 같이 블록 내부에서 각 키워드 변수들을 100 / 200으로 값..

• format_list_bulleted WEB/JavaScript
• · 2021. 3. 21.
• textsms

[JavaScript] JS 변수 키워드 const 알아보기

2021-03-20 자바스크립트 내부에서 변수를 선언하는 키워드 중에 const가 존재한다. 해당 키워드는 변수 선언 시 초기화해야 하며, 이후에는 값을 부여할 수 없다. - 선언 방법 사실 일반변수 var 키워드와 같이 선언하는 방식은 동일하나 선언과 동시에 초기화를 시켜주어야 한다. 선언과 동시에 초기화해주지 않으면 브라우저 console 창에 아래와 같이 오류가 발생한다. 때문에 호이스팅도 불가한 점도 참고하면 좋을 것 같다. Uncaught SyntaxError: Missing initializer in const declaration - 블록 스코프(Block Scope) 위와 같이 const 변수를 블록 내부에서 선언했다면, 해당 선언된 블록 내부에서만 접근이 가능하며, 블록 이외의 영역에서는..

• format_list_bulleted WEB/JavaScript
• · 2021. 3. 20.
• textsms

[HTML] HTML button 의 type 종류들 (submit/button/reset)

2021-03-19 button의 type 크게 3종류로 나누어진다. 종류로는 button / submit / reset 있다 이 세 가지의 버튼 타입의 기능에 대하여 알아보도록 하자. ( 게시글 제일 아래 전체 코드를 같이 올려 두었다.) - button button은 말그대로 클릭을 할 수 있는 버튼이 브라우저 창에 생겨나며, 클릭해도 아무런 기능이 없다. 이와 같은 button은 자바스크립트와 같은 다른 언어의 함수 및 기능을 구현하면, 해당 기능을 실행하기 위한 대상(버튼)의 역할을 한다. 버튼(button) - submit submit은 과 동일한 기능을 수행하며, 서버로 데이터를 전달하는 역할을 하는 타입이다. 참고로 아무런 타입 부여 없이 " 버튼 " 을 설정해도 button의 기본 defa..

• format_list_bulleted WEB/HTML
• · 2021. 3. 19.
• textsms

[CSS] CSS top: 50% 와 bottom: 50% 의 차이점 알아보기.

2021-03-18 처음에는 top: 50%의 값과 bottom: 50% 의 값이 서로 같은 영역을 차지할 거라고 생각하지만 막상 해당 옵션을 가지는 태그들을 비교해보면 그렇지 않다. 오늘은 그 이유를 알아보도록 하자. - 예제 아래는 예제 코드로써 부모 태그 안에 두 자식 / 들이 위치하고 있다. 이후 자식태그들에게 옵션값으로 top: 50% / bottom: 50% 값을 부여해주었다. 여기는 div 태그 두 번째 영역입니다. 여기는 div 태그 세 번째 영역입니다. 결과를 확인해보면 서로 다른 영역을 차지하고 있는 것을 확인할 수 있다. 여기서 의문점이 발생한다 똑같이 상단(top) or 하단(bottom)에서 시작하는데 막상 50%를 매개 값으로 주면 각 div 태그들이 차지하는 영역이 달라진다는 ..

• format_list_bulleted WEB/CSS
• · 2021. 3. 18.
• textsms