본문 바로가기
반응형

IT/HTML & CSS & JavaScript47

css 이미지 겹치기 2개, 3개 (position: absolute, relative) 이번 시간에는 html에서 CSS style을 이용하여 2개 or 3개의 이미지를 겹치는 방법에 대해서 알아보겠습니다. 예제를 잘 이해하기 위해서 기본적인 개념만 잡고 넘어가도록합시다. position 속성 요약 static : 위치를 지정하지 않을 때 사용합니다. (기본값) relative : 위치를 계산할때 static의 원래 위치부터 계산한다. absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다. fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다. 기존 이미지 위에 이미.. 2021. 9. 14.
[자바스크립트] 배열(array) 추가(unshift), 삭제(shift) / 앞쪽 연속추가 배열의 앞쪽에 데이터를 추가하는 추가(unshift), 삭제(shift)에 대해서 알아보겠습니다. 배열 추가 배열을 추가하는 방법은 unshift를 사용하시면 됩니다. //배열 생성 let month = ['1월','2월','3월'] //배열 추가 (여러개 추가 가능) month.unshift('4월','5월'); //결과 console.log(month) // ['4월','5월','1월','2월','3월'] 배열 앞에 4월, 5월이 추가된 것을 알 수 있습니다. 배열 삭제 배열을 삭제하는 방법은 shift를 사용하시면 됩니다. 배열끝의 요소를 제거합니다. //배열 생성 let month = ['1월','2월','3월'] //배열 삭제 month.shift(); //결과 console.log(month).. 2021. 9. 13.
[자바스크립트] 배열(array) : 추가(push), 삭제(pop) 이번시간에는 배열을 생성하고 생성된 배열에 데이터를 추가(push), 삭제(pop) 하는 방법에 대해서 알아보겠습니다. 배열 추가 배열을 추가하는 방법은 push를 사용하시면 됩니다. //배열 생성 let month = ['1월','2월','3월'] //배열 추가 month.push('4월') //결과 console.log(month) // ['1월','2월','3월','4월'] 배열 삭제 배열을 삭제하는 방법은 pop을 사용하시면 됩니다. 배열끝의 요소를 제거합니다. //배열 생성 let month = ['1월','2월','3월'] //배열 삭제 month.pop() //결과 console.log(month) // ['1월','2월'] 이상으로 배열에서 데이터를 추가(push), 삭제(pop)하는 방법.. 2021. 9. 13.
[자바스크립트] 배열(array) 길이 확인 length 이번 시간에는 배열(array)의 길이를 구하는 매서드인 length에 대해서 간단히 알아보게습니다. 배열 선언 후 length를 사용해서 배열의 총 길이를 확인합니다. //배열선언 let name = ['민수','철수'] //배열 길이(length) 가져오기 console.log(name.length); //2 이상으로 배열의 길이를 가져오는 length에 대해서 알아보았습니다. 2021. 9. 13.
[자바스크립트] 배열(array) 생성 및 인덱스 탐색 이번 시간에는 자바스크립트 배열(array)을 생성하는 방법에 대해서 알아보겠습니다. 배열선언 배열은 만드는 방법은 다음과 같습니다. 배결은 배열의 값을 담을 변수를 선언하고 대괄호[]안에 쉼표로 구분하여 값을 입력여 생성합니다. let 변수명 = ['값1', '값2'... '값12'] 베열탐색 배열을 탐색하기 위해서는 index를 사용합니다. 배열을 인덱스 초기값이 0부터 시작됩니다. 따라서 값1의 인덱스 번호는 0이 되겠습니다. console.log(변수명[0]); //값1 console.log(변수명[1]); //값2 console.log(변수명[1]); //값12 결과보기 //배열 선언 let month = ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월.. 2021. 9. 13.
[자바스크립트] this 사용법 및 개념 이번 시간에는 자바스크립트 this 사용법과 개념에 대해서 알아보도록 하겠습니다. this 사용법 자바스크립트 객체안에 객체 프로퍼티로 할당되어 존재하는 함수를 매서드(METHOD)라고 합니다. 아래의 객체의 bebe, nana의 매서드는 color가 됩니다. //매서드 color의 this는 해당객체인 bebe를 가르킨다. const bebe = { name : "bebe", age : 1, color : function(){ console.log(`${this.name}의 색깔은 검은색 입니다.`) } } //매서드 color의 this는 해당객체인 nana를 가르킨다. const nana = { name : "nana", age : 1, color : function(){ console.log(`$.. 2021. 9. 13.
[자바스크립트] 객체 for..in 반복문 이번시간에는 자바스크립트 객체의 길이를 이용한 반복문 사용벅인 for..in 반복문에 대해서 알아보겠습니다. 예제 먼저 bebe 라는 객체를 아래와 같이 만듭니다. 그리고 for..in 문을 통해서 객체안의 변수만큼 반복문을 진행합니다. //객체만들기 const bebe = { name : "bebe", age : 1, color : "black", } //for..in반복문 for ( x in bebe){ console.log(bebe[x]) } 결과 bebe 객체 안에있는 변수에 대한 값을 반아온 것을 확인할 수 있습니다. 이상으로 객체 반복을 위한 for..in 구문에 대해서 알아보았습니다. 2021. 9. 10.
[자바스크립트] 객체(Object) 안에 있는 변수 존재유무 확인방법 이번시간에는 자바스크립트 객체(Object)를 함수로 생성하고 호출하여 결과값을 반환하는 내용과, 만들어진 객체 안에 변수가 존재하는지 확인하는 방법에 대해서 알아보겠습니다. 객체 함수반환 function makeObject(name,age) { return{ name : name, age, //함수에서 받는 이름과 동일할 시 축약가능 color: "black" } } const bebe = makeObject("bebe",2); console.log(bebe); 객체 안에 변수 존재유무 확인 기본 변수명 in 객체명 으로 변수가 객체에 존재하는지 확인합니다. function makeObject(name,age) { return{ name : name, age, //함수에서 받는 이름과 동일할 시 축약가.. 2021. 9. 9.
[자바스크립트] 객체(Object) 생성, 추가, 삭제, 이번시간에는 자바스크립트 객체(Object)를생성하여 접근하는 방법과 객체의 추가,삭제 하는 방법에 대해서도 알아보겠습니다. 문법 먼저 객체 이름을 선언한 뒤 중괄호{}안에 객체 리스트를 작성합니다. const 객체이름 = { 객체내부이름1 : 내용1, 객체내부이름2 : 내용2, } 예문 객체만들기 const cat = { name : 'bebe', age : 2, } console.log(cat) //객체전체 출력 console.log(cat.name) //객체 name값 출력 console.log(cat['age']) //객체 age값 출력 객체 추가하기 const cat = { name : 'bebe', age : 1, } cat.weight = '5kg'; // 객체추가 cat.color = 'b.. 2021. 9. 9.
[자바스크립트] 화살표 함수 => 사용법 이번 시간에는 일반 함수를 화살표 함수로 변경 방법을 몇 가지 예제를 통해서 알아보겠습니다. 들어가기 앞서 함수의 2가지 개념인 함수 표현식과 함수 선언문의 차이를 알아야 합니다. 함수의 2가지 선언방식 함수 표현식 선언된 함수보다 상단에 있는 구문은 실행이 불가능합니다. showError() let showError = function (){ console.log("error") } 함수 선언문(자주사용) 자바 스크립트는 순차적으로 위에서 아래로 읽어오지만 함수 선언문은 시작 전 function을 모두 저장해두기 때문에 아래의 코드는 실행됩니다. showError() function showError(){ console.log("error") } 화살표 함수(=>) 자바스크립트 ES6에서 자주 사용되기.. 2021. 9. 9.
반응형