본문 바로가기

728x90
반응형

전체 글

(269)
[HTML] Empty tag(빈 태그) ▶ Empty tag(빈 태그) 일반적으로 태그는 열리고 닫히는 범위가 존재함. ... Empty tag의 경우 닫히는 태그가 별도로 없음. 따라서 비어 있다(empty)고 표현함. 또는 Self closing tag라고 해서 스스로 닫히는 형식으로 쓰이기도 함. 열리는 동시에 스스로 닫아버리는 것. ▶ Empty tag(빈 태그)의 두 가지 방식 '/'가 없는 empty tag - HTML 1, 2, 3, 4에서 사용 가능. '/'가 있는 empty tag - XHTML에서 사용 가능. HTML5에서는 두 가지 방식 모두 사용 가능함. ▶ 사용 시 유의 사항 XHTML 버전이나 Lint 환경 혹은 프레임워크 세팅에 따라 '/'을 사용하는 것이 필수가 될 수 있음. 개발 환경에 따라 '/'을 사용하거나 ..
[Javascript] 배열 내장 함수 정리(shift & pop, unshift, concat, join) shift 는 첫번째 원소를 배열에서 추출한다. const numbers = [10, 20, 30, 40]; const value = numbers.shift(); console.log(value); console.log(numbers); pop은 맨 마지막 원소를 배열에서 추출한다. const numbers = [10, 20, 30, 40]; const value = numbers.pop(); console.log(value); console.log(numbers); unshift는 shift의 반대 개념으로 배열의 맨 앞에 새 원소를 추가한. const numbers = [10, 20, 30, 40]; numbers.unshift(5); console.log(numbers); concat은 여러 개의..
[Javascript] 배열 내장 함수 정리(splice, slice) splice는 배열의 특정 항목을 자를 때 사용한다. splice를 사용할 때 첫 번째 인자 값에는 시작점이고 두 번째 인자는 시작점부터 몇개까지 지울지를 적어준다. const numbers = [10, 20, 30, 40]; // 배열 선언 const index = numbers.indexOf(30); // 삭제할 인덱스 추출 let delList = numbers.splice(index, 1); // 삭제 리스트 console.log(numbers); // 삭제 후 배열 출력 console.log(delList); // 삭제 항목 출력 3행과 같이 splice한 항목을 변수에 담게 되면 삭제된 항목이 무엇인지 알 수 있다. slice 는 splice와 같이 배열을 잘라내는 용도로 사용되나 기존의 배열..
Vue - script에 추가 Vue를 스크립트에 추가하는 방법 1. 직접 Vue.js 파일을 받아 script 구문 추가하기 직접 경로를 설정해 script src에 넣어서 사용 2. CDN을 사용하여 script 구문 추가하기 해당 script 구문을 추가하고 사용 Vue사용해보기 CSS .active { color : red; } HTML {{ msg }} SCRIPT 실행결과 CSS로 active클래스의 글자색을 변경함 아이디가 app인 div 생성, 내부에 Vue Active클래스 값을 가지는 div생성, 해당 데이터의 msg 문장을 출력 새로운 Vue 객체 생성 -> element명 : app => msg : Hello Vue! , active : true 값을 가짐 active 값이 false 일 경우 active 클래스..
[Javascript] 배열 내장 함수 정리(indexOf, findIndex, find) indexOf는 내가 원하는 텍스트 위치를 알려준다. const animals = ['호랑이', '사자', '사슴', '토끼', '거북이']; const index = animals.indexOf('사자'); console.log('사자의 위치는 : ' + index); 하지만 indexOf의 경우 대상이 객체이거나, 특정 대상의 값으로 찾는 것이 아닌 어떤 조건을 가지고 찾을 경우 값을 찾을 기 어렵다. 이럴 때 findIndex를 사용한다. findIndex는 파라미터 값으로 함수를 넘겨준다. 특정 조건을 확인하여 그 조건이 일치하면 일치하는 원소가 몇 번째인지 알려주는 함수다. const todos = [ { id: 1, text: '자바 입문', done: true }, { id: 2, text:..
[Javascript] 배열 내장 함수 정리(forEach, map) forEach 구문 일반 for문 사용 const animals = ['호랑이', '사자', '사슴', '토끼', '거북이']; for (let i = 0; i < animals.length; i++) { console.log(animals[i]); } forEach 사용 const animals = ['호랑이', '사자', '사슴', '토끼', '거북이']; function print(animal) { console.log(animal); } animals.forEach(print); forEach 및 익명 함수 사용 const animals = ['호랑이', '사자', '사슴', '토끼', '거북이']; animals.forEach(function(animal) { console.log(animal)..
[Javascript] 변수와 상수 변수 : let 키워드 이용하여 선언 상수 : const 키워드 이용하여 선언 ** var 키워드는 권장하지 않는다 ** 주요 차이점으로 var는 똑같은 이름으로 여러 번 사용할 수 있다. let과 사용하는 범위가 다른데 이것은 나중에 별도로 정리할 예정이다. 아래는 let 과 var의 차이에 대한 예시다. let a = 1; if (a + 1 === 2) { let a = 2; console.log("if문 안의 a 값은 " + a); } console.log("if문 밖의 a 값은 " + a); var a = 1; if (a + 1 === 2) { var a = 2; console.log("if문 안의 a 값은 " + a); } console.log("if문 밖의 a 값은 " + a); let과 co..
웹에서 사용되는 이미지(jpg, gif, png, webp, svg) 이미지(그래픽)는 크게 비트맵과 벡터로 구분된다. ▶ 비트맵(Bitmap) - 각 픽셀이 모여 만들어진 정보의 집합. - Raster 이미지라고도 함. - 픽셀 단위로 화면상에 렌더링함. - 일반적으로 사용하는 대부분의 이미지가 비트맵 형식으로 그림판, 포토샵 등의 툴로 편집할 수 있음. - 정교하고 다양한 색상을 자연스럽게 표현 가능. - 이미지 확대/축소 시 계단 현상, 품질 저하 발생. ▶ 벡터(Vector) - 수학적 정보의 형태들이 만들어내는 결과물. - 이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히 가지고 있으며 그것을 화면상에 렌더링함. - 따라서 조금 더 많은 연산이 필요하지만 비트맵 이미지와는 달리 해상도(픽셀)로부터 자유롭게 렌더링할 수 있음. - 이미지 ..

728x90
반응형