CSS / DISPLAY Display 란? 해당 요소가 어떻게 보여야 할 지를 결정하는 속성 이 속성의 기본값으로는 inline과 block이 잇다. 기본적으로 태그에는 인라인, 블록요소들이 정해져있지만 바꾸지 못하는 것은 아니다 (ex div의 block속성을 inline으로 변경 가능) style태그 내에서 작성해도되고 인라인으로 작성해도 된다. Inline 요소의 특징 문단 내부에서 영역을 지정할 때 사용. 새 줄에서 시작하지 않고, 필요한 내용만큼의 영역을 차지한다. padding과 margin을 고려하지 않고 배치한다. Block 요소의 특징 항상 새로운 줄에서 시작 기본 너비는 100%여서 화면 끝까지 뻗어나감 padding과 margin이 제대로 작동한다. 박스 취급 예제 Inline In..
JAVASCRIPT / ARRAY JavaScript에서 배열 사용 배열은 기본적으로 Object Type이다. 자바스크립트에서 배열을 생성하는 방법은 두 가지가 있다. 1. [] 를 사용 2. Array() 생성자를 사용 배열 선언하기 예제 1. [] 로 생성하는 방법 // 1 배열 생성후 값 할당 var arr = []; arr[0] = '0'; arr[1] = '1'; arr[2] = '2'; // 2 초기값 할당 var arr = ['0','1','2']; // 3 배열 크기 지정(쉼표 갯수만큼) var arr =[,,,] 2. Array() 생성자로 생성하는 방법 // 1 배열 생성후 값 할당 var arr2 = new Array(); arr[0] = '0'; arr[1] = '1'; arr[2..
숫자 타입들을 다룰 수 있는 메소드 종류 메소드 기능 text.toString() 숫자를 문자열로 변환 Number() 다양한 자바스크립트 값들을 숫자타입으로 변환해주는 메소드 parseInt() 문자열을 정수 타입으로 변환 parseFloat() 문자열을 실수 타입으로 변환 예제 function print(text) { console.log(text); } 콘솔 출력 메소드를 미리 만들어 놓고 실행 toString() const num1 = 123; // 숫자를 문자열로 변환 print(num1.toString()); print(typeof num1.toString()); 숫자를 문자타입으로 변환 하고 typeof로 확인해보면 String이 된다. Number() print(Number(true)); ..
자바스크립트에서 문자열을 다루는 메소드 종류 자바스크립트에서는 문자열을 편하게 다루게 해주기 위한 메소드들이 있다. 메소드 기능 length 문자열의 길이 반환 slice, substring, substr 문자열을 원하는 길이만큼 자르기 trim 공백제거 toUpperCase, toLowerCase 대/소문자 치환 padStart().padEnd() 문자열을 원하는 길이만큼 다른 문자로 채우기 'strtext'.charAt(n), 'strtext'[n] 문자열의 원하는 인덱스의 문자를 찾기 'strtext'.charCodeAt(n) 문자열의 원하는 인덱스의 문자를 유니코드로 변환 'strtext'.indexOf(ch) 문자열의 원하는 문자의 인덱스를 찾기 strtext'.includes('str') 문자..
JAVASCRIPT / NODE Node DOM객체의 모든 것은 Node에 속한다. 요소를 더욱 세분화 하면 element node와 text node로 나눌 수 있다. (주석은 comment node) 각각의 노드에 접근하고 변경할 수 있다. element node, text node element node HTML의 태그들이라고 생각하면 된다. (, 등 ) ex > 이거는 text node 입니다. text node 각각의 태그 사이에 들어가는 정보 ex > 이게 text node 입니다. 문법 // element node에 text node를 삽입한다. element_node.appendChild(text_node) // text node가 삽입된 (안돼도 됨) element node를 html 요..
CSS / PSEUDO-CLASS Pseudo-Class 선택자에 가상 클래스를 사용하여 해당 요소의 특정 상황만을 선택할 수 있다. 선택자 뒤에 : 을 붙혀 원하는 상황을 선택한다. 가상 클래스의 종류 first-child, nth-child(n/even/odd), last-child -> 요소가 부모의 특정 번째 요소일 때를 선택 first-of-type, nth-of-type(n/even/odd),last-of-type -> 요소가 같은 타입들 중에서 특정 번째 요소일 때를 선택 ※ 둘다 동일한 방법으로 사용 예제 1 2 3 /* span 하위의 첫번째 div */ span > div:first-child{ border: solid 1px; } /* div중 짝수만 (우선순위 낮음) */ div:n..
JAVASCRIPT / 비교연산 JavaScript의 비교연산 (자바와의 차이점) 자바스크립트의 비교연산은 자바와 거의 비슷하지만 다른것들이 몇가지 있다. ==, != : 값이 일치(불일치) 하면 true ===, !== : 값과 타입이 모두 일치(불일치)해야 true 예제 console.log('1 == 1 ? ', 1 == 1); // true console.log('1 == \'1\' ?', 1 == '1' ); // true console.log('1 == 2 ? ' , 1 == 2); // false console.log('--------------------') console.log('1 === 1 ? ', 1 === 1 ); // true console.log('1 === \'1\' ?', ..
element.style.property 요소의 스타일 속성에 접근해서 값을 변경할 수 있다. 문법 const yellow = document.getElementById("yellow"); yellow.style.backgroundColor = "yellow"; id가 yellow인 요소에 배경색을 노란색으로 변경한다. 예제 여러개의 요소를 선택하고 반복문을 사용하여 선택된 요소 전체의 값을 변경하는 방법 여러개의 요소를 선택하고 각각의 요소에 접근하고 싶을땐 배열처럼 사용할 수 있다. class가 "yellow"인 모든 것들의 style을 변경 노란색 안 노란색 노란색 노란색 노란색아님 위의 반복문을 아래처럼 변경 가능하다. ( for -> forEach ) Array.from(yellow).forEa..
javascript / getAttribute() getAttribute() 선택한 요소의 선택한 속성 값을 가져온다. 문법 element.getAttribute('attribute'); document.getElementById('div1').getAttribute("class") id가 div1인 요소의 class값을 가져온다 . 예제 출력된 이미지의 경로를 가져오기 id가 img-1인 것의 src값을 가져올 수 있다.
JAVASCRIPT / attribute attribute 요소의 속성에 접근하여 값을 변경, 추가할 수 있다. element.attribute = "값" 의 형태로 사용한다. 문법 const img = document.getElementById("img"); img.src = "./아무사진1.png"; 위의 코드를 사용하면 인 태그를
JAVASCRIPT / innerHTML innerHTML 요소의 태그 사이 내용을 변경할 수 있다. 문법 // 1 html 객체에 바로 접근해서 사용 document.getElementById("out").innerHTML = "추가할 내용 " // 2 html 객체에 변수에 담아서 사용 var out = document.getElementById("out"); out.innerHTML = "추가할 내용" 예제 id가 "out"인 태그내에 innerHTML을 이용해서 내용 추가
JAVASCRIPT / getElementById() getElementById('id') HTML 태그의 id값을 가져오는 메소드 문법 document.getElementById('id'); //id정보를 변수에 저장 var item = document.getElementById('item'); 예제 id값을 가져와서 innerHTML로 태그사이에 값 넣기 기존 div 내용 getElementById 이외의 다른 메소드들 getElementById 이외의 HTML 태그에 접근하는 방법은 여러가지가 있다. 요소를 가져올 때 값이 여러개라면 (class, tag등) 배열처럼 사용할 수 있다. getElementsByTagName('tag_name') 태그 정보를 가져온다. // 태그가 div인 것들 doc..