quantumcode

javascript 내장 된 함수 중 문자열을 나누는 메서드에 대해서 알아보고 예시를 통해서 활용해보자. split(“”) split함수는 split(“”)와 같이 사용 배열로 반환한다. var a = "1,2,3" ; var array = a.split(","); //출력 array[0] : 1 substr() substr함수는 substr(시작인덱스,길이)와 같이 사용 var a = "1234567890" ; var abc = a.substr(2, 5); //출력 abc : 34567 substring() substring함수는 substring(시작인덱스,종료인덱스)와 같이 사용 시작인덱스는 추출포함(O), 종료인덱스는 추출포함(X) 음수 입력시 ‘0’으로 인식 매개변수 작은 숫자가 시작인덱스, 큰..

브라우저가 랜더링 되는 과정 1. HTTP 통신을 통해서 파일 로딩 2. HTML 파일을 파싱 3. 랜더트리구축 4. 랜더트리배치 5. 화면에 그리기 위 순서대로 브라우저는 랜더링 과정을 거쳐서 클라이언트는 브라우저화면을 통해 웹정보를 확인 할 수 있다. jquery의 $(document).ready() 의 경우 DOM이 로드된 시점 즉 3번에 해당하면 배치와 그리기가 완료 되지 않은 상태에서 실행문을 실행된다. 반면 window.onload의 경우 랜더링이 완료된 시점에서 실행구문이 실행된다. DOM 요소를 조작하는 코드를 head 영역에서 실행할 경우 아래와 같이 해당 DOM 요소 배치 되지 않았기때문에 노출할 수 없다. javascript는 인터프리터 언어이기 때문에 html 코드의 상단에서 부터 ..

Jquery jquery는 html의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리입니다. html elements를 동적으로 구현하기에 적합한 스크립트 아래 jquery 라이브러리의 DOM 요소를 선택하는 방법과 문법에 대해서 알아보겠습니다. jqeury 코드 추가하기 추가방법 1 : https://jquery.com/download/ 위 주소에서 라이브러리 코드를 가져옵니다. 다운로드 또는 CDN방식으로 적용할경우 파일 주소를 가져와서 html head 영역에 추가해 줍니다. jquery는 DOM 요소를 조작하는 경우가 많으므로 아래와 같이 실행코드를 작성하기 전에 ready method를 사용하여 document가 모두 준비된 이후 로직을 작성합니다. $(do..

var, let, const 차이점 var​: 재선언(O), 재할당(O) var(variable)는 변수 선언 후 재선언이 가능하고 재할당도 가능하다. let​: 재선언(X), 재할당(O) let는 변수 선언 후 재선언이 불가능하고 재할당만 가능하다. let으로 선언한 변수는 자신을 선언한 블록과 모든 하위 블록을 스스로의 스코프로 가집니다. 이런 점에서는 let이 var와 유사합니다. 그러나 둘의 중요한 차이는, var의 경우 스코프가 '자신을 선언한 블록'이 아니라, 자신의 선언을 포함하는 함수라는 점입니다. const​(constant ): 재선언(X), 재할당(X) const는 변수 선언 후 재선언 및 재할당 불가능하다. 호이스팅 호이스팅(Hoisting)이란, var 선언문이나 function ..

키워드 자바스크립트가 처음 만들어질 때 정해진 특별한 의미가 있는 단어를 ‘키워드’라고 합니다. 키워드 참고: https://www.w3schools.in/javascript-tutorial/keywords/ 식별자 자바스크립트에서 이름을 붙일때 사용하는 단어입니다. 식별자의 예로는 변수명과 함수 명이 있습니다. 식별자 규칙: ● 키워드를 사용하면 안됩니다. ● 숫자로 시작하면 안됩니다. ● 특수 문자는 _와 $만 허용합니다. ● 공백 문자를 포함할 수 없습니다. 식별자의 의미를 더 명확하게하는규칙: 예) 사용가능 : alpha, alpha10, _alpha, $alpha, Alpha, ALPHA 사용 불가능 : break, 234alpha, has space ● 생성자 함수의 이름은 항상 대문자로 시작..

transition transition-property​ ​: css 속성 이름을 지정합니다. 표기 )​ transition-property : width; transition-duration ​: 이벤트 발생 후 동안 재생할지 지정합니다. 표기 )​ transition-duration : 1s transition-timing-function ​: 이벤트 발생후 재생 속도를 지정합니다. 표기 )​ transition-timing-function : ​esae transition-delay​ ​: 몇 초 후에 이벤트가 발생할지 지정합니다. 표기 )​ transition-delay : .5s 참고 사이트 : https://www.w3schools.com/cssref/css3_pr_transition.asp ..

사용방법 : display : flex​ ​- 박스를 블록 수준의 플레서블 박스로 작동하게 합니다. 표기 )​ display: flex; flex 속성 : flex-direction row ​: 박스를 왼쪽에서 오른쪽으로 배치합니다. 해당 속성값으로 설정 시 주축은 가로가 되고 , 교차축은 세로가 됩니다. 표기 )​ flex-direction : row; row-reverse ​: 박스를 가로로 배치하되 역방향으로 배치합니다. 즉, 오른쪽에서 왼쪽으로 배치합니다. 해당 속성값으로 설정 시 주축은 가로가 되고,교차축은 세로가 됩니다. 표기 )​ flex-direction : row-reverse; column ​: 박스를 위에서 아래로 배치합니다. 해당 속성값으로 설정 시 주축은 세로가 되고, 교차축은 가..

pointer-events : 해당 속성은 그래픽 요소가 어떤 상황에서 포인터 이벤트의 대상이 될 수 있는 지정합니다. 키워드 값 중 auto, none을 제외한다면 대부분 SVG에 적용되는 속성입니다. /* 키워드 값 */ pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: visibleStroke; /* SVG only */ pointer-events: visible; /* SVG only */ pointer-events: painted; /* SVG only */ pointer-eve..

html 속성 중 dir이라는 속성이있다. direction을 의미하며 속성 값은 dir="ltr" 또는 dir="rtl"입니다. ltr 은 left to right 이고 rtl 은 right to left입니다. 즉, 요소의 정렬이 왼쪽에서 오른쪽으로 정렬하거나 오른쪽에서 왼쪽으로 정렬할때 사용된다. 왼브라우저는 기본 왼쪽 상단에서 오르쪽으로 정렬이 되며 기본 default left to right 입니다. html : ltr 적용시 : rtl 적용시 :

viewport ( 뷰포트 ) 뷰포트 meta 태그 ( meta tag : 브라우저의 화면 설정과 관련된 정보를 제공합니다. ) 모바일 웹페이지의 특정한 정보를 제공합니다. 예 ) width : 화면의 너비 예시 - ​​width = 240 , width = device-width height : 화면 높이 예시 - ​​height = 240 , width = device-height initial-scale : 초기 확대 비율 예시 - ​​initial-scale = 2.0 user-scalable : 확대 및 축소의 가능 여부 예시 - ​​user-scalable = no minimum-scale : 최소 축소 비율 예시 - ​​minimum-scale = 1.0 maximum-scale : 최소 축..