객체(object)

객체(object) 1. 객체(object) - 이름과 값으로 구성된 프로퍼티(property)의 정렬되지 않은 집합 ※ 프로퍼티(property) : 필드(데이터 멤버)와 메소드 간 기능의 중간인 클래스 멤버의 특수한 유형 2. 객체 생성 - var 변수명 = { } - { }는 객체를 변수 외부에 생성하고 주소값을 리턴한다는 의미 - 즉 변수에는 객체가 아닌 주소값이 저장됨 - 변수명.프로퍼티명 = 프로퍼티값 - 주소값을 이용해서 실체(객체)에 접근하여 프로퍼티를 만들고 값을 넣음 // Example 1 // 객체 생성 var 사람1 = {}; // 값을 넣음 사람1.이름 = '홍길동'; 사람1.나이 = '21'; // 출력 console.log('사람1 이름 : ' + 사람1.이름); // 사람1 ..

• format_list_bulleted Front-End Study/JavaScript
• · 2022. 11. 4.
• textsms

배열(array)

배열(array) 1. 배열(array) - 배열이란? 같은 타입의 변수들로 이루어진 유한 집합을 뜻함 - Javascript에선 다른 언어와 달리 데이터 타입이 서로 다를 수 있고, 배열의 크기는 동적으로 변경 가능함 2. 배열 생성 방법 - 배열 생성 방법은 크게 두가지로 나뉨 - 1) 배열 리터럴 대괄호([ ])를 사용 - 2) Array( ) 생성자 함수로 배열을 생성 3. 대괄호([ ]) 사용 // Example 1 // 배열 생성 (비어있음) var arr = []; // 배열에 값 삽입 arr[0] = 1; // 0번 방의 값 1 arr[1] = 2; // 1번 방의 값 2 arr[2] = 3; // 2번 방의 값 3 // 배열 출력 (.length : 배열의 길이) for (var i = ..

• format_list_bulleted Front-End Study/JavaScript
• · 2022. 11. 3.
• textsms

typeof 연산자

typeof 연산자 1. typeof 연산자 - 변수의 데이터 타입을 반환하는 연산자 - 반환되는 값의 종류는 다음과 같음 용어 설명 undefined 변수가 정의되지 않거나 값이 없을 때 number 데이터 타입이 숫자값일 때 string 데이터 타입이 문자열일 때 boolean 데이터 타입이 불리언일 때 object 데이터 타입이 함수, 배열 등 객체일 때 function 변수의 값이 함수일 때 symbol 데이터 타입이 심볼일 때 // Example var a = 10; console.log(typeof(a)); // 숫자타입 var b = '홍길동'; console.log(typeof(b)); // 문자열타입 var c = true; console.log(typeof(c)); // 불리언타입

• format_list_bulleted Front-End Study/JavaScript
• · 2022. 11. 3.
• textsms

미디어 쿼리

미디어 쿼리 1. 미디어 쿼리 - 웹 페이지가 표시되는 장치에 반응하도록 하여 반응형 웹을 구현할 수 있는데, 이때 사용하는 것이 미디어 쿼리임 - 미디어 쿼리는 두 가지 방법으로 사용 가능 - @media 규칙 - media 속성 2. @media 규칙을 이용해 미디어 쿼리 사용하기 Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit........... - max-width: 800px는 화면 너비가 800이 되기 전까지의 설정 (최대 너비) - min-width: 800px는 화면 너비가 800이 될 때부터의 설정 (최소 너비) 3. media 속성을 ..

• format_list_bulleted Front-End Study/HTML+CSS
• · 2022. 11. 2.
• textsms

flex 관련 속성

● flex-direction 속성 - 아이템의 배치 방향을 결정 - flex-direction: row | row-reserve | column | column-reverse | initial | inherit - row : 가로로 정렬 (기본값) - row-reserve : 가로로 오른쪽에서 정렬 - column : 세로로 정렬 - column-reverse : 세로로 밑에서부터 정렬 - initial : 기본값으로 설정 - inherit : 부모 요소로부터 상속받음 ● flex-wrap 속성 - 아이템이 컨테이너의 공간을 넘칠 경우, 아이템의 줄바꿈을 어떻게 할 것이지 결정하는 속성 - flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit - n..

• format_list_bulleted Front-End Study/CSS 사전
• · 2022. 11. 2.
• textsms

flex 관련 속성 정리 3

flex 관련 속성 정리 3 1. flex-basis 속성 - 아이템들의 기본 크기를 설정 (flex-direction이 row 일 경우 너비, column 일 경우 높이를 조절함) - 0, %, px, rem 등으로 설정 가능 ※ flex-basis에서 설정한 너비가 이미 넘은 아이템일 경우, 축소되지 않음 → 그럴 경우, word-wrap: break-word를 적용하여, 설정한 너비만큼 줄어들고 남은 텍스트는 줄바꿈됨 AAA BBB CCC .container { border: 1px solid black; width: 500px; height: 200px; display: flex; font-size: 2rem; font-weight: bold; } .container > div { margin: ..

• format_list_bulleted Front-End Study/HTML+CSS
• · 2022. 11. 2.
• textsms