순이코딩/Web (10) 썸네일형 리스트형 [JavaScript] 자바스크립트 - 객체 1. 객체(object) ■ 객체 기초 객체란 여러 데이터를 하나의 변수에 저장할 수 있는 데이터타입입니다. 객체의 구조는 다음과 같습니다. let object = { key1 : value1, key2 : value2, ... } 객체는 객체의 속성(property)인 key값과 속성 값인 value값을 가지고 있으며 value에 접근할 때는 key를 이용해 접근합니다. 그렇기 때문에 객체를 생성한 후 value값을 불러오거나 수정, 추가할 때 key값을 사용합니다. 객체명.key값 == value값 # 객체 생성 // 객체 생성 let person = { 'name' : '군순이', // key값은 따옴표를 써도 되고 안써도 됨 age : 16, favorite : { food : '피자', drin.. [JavaScript] 자바스크립트 - 함수 1. 함수(function) 함수란 특정 기능을 수행하는 소스 코드를 하나로 묶어서 필요할 때마다 사용하기 위한 구조입니다. 함수의 기본 문법은 다음과 같습니다. 매개변수와 리턴값은 생략이 가능합니다. 함수를 호출하는 방법도 간단하게 함수명()만 작성하면 호출할 수 있습니다. function 함수명(매개변수1, 매개변수2,...){ 로직 & 기능 구현을 위한 코드 작성 return } ■ 호이스팅 하지만 이렇게 함수를 선언하는 경우 호이스팅 현상이 발생합니다. 호이스팅 현상이랑 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 현상입니다. 소스 코드 처리 과정에서 소스코드를 평가하고 실행하게 됩니다. 이 소스코드를 평가하는 과정에서 모든 선언문(변수, 함수 등)이 등록되게 됩니다. 아래의 코드에서 lun.. [JavaScript] 자바스크립트 - 배열 1. 배열 ■ 배열의 기초 배열은 여러 데이터를 하나의 묶음으로 다루는 구조를 말합니다. 배열을 생성할 때는 여러 방법이 있습니다. // 1. let numList = []; // 2. let numList2 = new Array(5); // 3. let numList3 = new Array(1,2,3); JavaScript에서 배열은 가변적이므로 처음 생성할 때부터 배열의 길이를 정해줄 필요가 없습니다. 그렇기 때문에 1번처럼 배열에 아무 값도 담지 않고 생성을 한 후 나중에 값을 추가할 수 있습니다. 2번 같은 경우는 데이터 값은 정해지지 않았지만 길이는 5인 배열을 선언한 것입니다. 마찬가지로 이후에 데이터 5개를 넣어 생성할 때 길이에 맞추어도 되고 3개만 넣어도, 6개를 넣어도 상관없습니다. 3.. [Web] CSS 태그(5) - flex / animation / transition / transform 1. flex flex는 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. 여기서 flex container와 flex item가 있는데 container란 flex의 영향을 받는 전체 공간을 의미하고 item은 설정된 속성에 따라 어떠한 형태로 배치되는 것을 말합니다. box1 box2 box3 box4 box5 box6 이렇게 요소들이 있을 때, 아직 컨테이너가 만들어지지 않았기 때문에 요소들은 위에서 아래로 배치되어 있기만 합니다. 하지만 컨테이너클래스의 display를 flex로 지정하면 아이템들은 하나의 컨테이너로 묶여 설정된 속성에 따라 묶이게 됩니다. .container{ display: flex; } 이때 flex-direction .. 이전 1 2 3 다음
