![]()
input 태그의 다양한 속성 1. autofocus 속성 - 폼의 요소 중 원하는 요소에 입력 커서를 표시함 - 웹 요소에 들어가면, 바로 autofocus를 입력한 요소에 마우스가 클릭된 상태로 열림 이름 비밀번호 2. placeholder 속성 - 입력란에 힌트 내용을 표시함 - 사용자가 어떤 내용을 입력해야 하는지 알려 줄 경우에 사용 - 사용자가 내용을 입력하면 placeholder로 입력한 텍스트가 사라짐 전화번호 3. readonly 속성 - 읽기 전용 필드 생성 - 사용자가 입력하지 못하고 읽게만 할 수 있음 영업시간 4. required 속성 - 필수 필드 지정 - 이 속성을 사용하면, 무조건 입력해야 넘어가게 끔 설정할 수 있음 신청자 이름 신청 5. min, max, step 속성 -..
![]()
input 태그 1. input 태그 - 입력 항목 생성 - 태그 안에 있는 type 속성을 이용해 폼 요소를 구분함 - id 속성을 이용하여 폼 요소를 구분할 수 있음 2. text 속성 - 텍스트 필드 생성 - 다음 속성들은 텍스트 필드에서 사용할 수 있는 속성값임 속성 설명 name 텍스트 필드를 구별하는 이름을 설정 size 텍스트 필드의 길이 지정 value 텍스트 필드 부분에 표시될 내용 입력 maxlength 텍스트 필드에 입력 가능한 최대 문자 개수 지정 3. password 속성 - 비밀번호 입력란 생성 - text 속성과 달리 입력한 내용이 * 또는 · 으로 표시됨 5. 그 외의 속성값 - search : 검색 상자 생성 - url : URL 입력란 생성 - email : 메일 주소 입..
![]()
클로저 (Closure) 1. 클로저 (Closure) - 외부 변수를 기억하고, 이 외부 변수에 접근할 수 있는 함수 - 자바스크립트의 함수와 그 함수가 선언될 때의 환경으로 이루어짐 console.clear(); function countFunction(num) { var count = num; function Increase() { count++; console.log(count); } return Increase; } var counter1 = countFunction(0); var counter2 = countFunction(5); counter1(); counter2(); - 결과를 보면, counter1( ) 함수의 값은 1이고, counter2( ) 함수의 값은 6임 → 그 이유는 coun..
![]()
메서드와 this 1. 메서드 (method) - 함수가 객체의 속성 값이 될 경우 그 함수를 메서드라고 함 - 다음과 같이 첫 번째 Hello World는 a( ) 함수, 두 번째는 바인드된 메서드로 호출된 것 function a() { console.log('Hello World'); } var b = {name : 'object', method : a}; a(); b.method(); 2. this - 함수가 호출되었을 때, 어떤 객체에 바인드된 속성으로 호출된 것인지를 보여 줌 - this는 예약어임 ※ 예약어 : 프로그래밍 언어에 미리 정의된 키워드
![]()
폼 관련 태그 1. form 태그 - 폼을 생성함 ※ 폼(form) : 아이디와 비밀번호 또는 로그인 버튼, 회원가입 창 등 웹 사이트로 정보를 보낼 수 있는 요소들 - 폼 요소 - form 태그는 여러 속성을 통해 서버로 자료를 넘김 - method 속성 : 사용자가 입력한 내용을 서버 쪽으로 넘기는 방식을 설정함 (속성 값으로 get과 post가 존재) - get : 주소 표시줄에 사용자가 입력한 내용이 그대로 표시됨 (256byte~4096byte 까지의 데이터만 가능) - post : 사용자의 입력을 표준 입력으로 전달됨 (데이터 길의 제한을 받지 않고 입력 내용이 표시되지 않음) - name 속성 : 폼의 이름을 지정 - action 속성 : 내용을 처리해 줄 서버 상의 프로그램을 지정 - ta..
![]()
객체(object) 1. 객체(object) - 이름과 값으로 구성된 프로퍼티(property)의 정렬되지 않은 집합 ※ 프로퍼티(property) : 필드(데이터 멤버)와 메소드 간 기능의 중간인 클래스 멤버의 특수한 유형 2. 객체 생성 - var 변수명 = { } - { }는 객체를 변수 외부에 생성하고 주소값을 리턴한다는 의미 - 즉 변수에는 객체가 아닌 주소값이 저장됨 - 변수명.프로퍼티명 = 프로퍼티값 - 주소값을 이용해서 실체(객체)에 접근하여 프로퍼티를 만들고 값을 넣음 // Example 1 // 객체 생성 var 사람1 = {}; // 값을 넣음 사람1.이름 = '홍길동'; 사람1.나이 = '21'; // 출력 console.log('사람1 이름 : ' + 사람1.이름); // 사람1 ..
![]()
배열(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 = ..
![]()
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)); // 불리언타입
![]()
미디어 쿼리 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 속성을 ..
![]()
● 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..
![]()
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: ..
![]()
flex 관련 속성 정리 2 1. justify-content 속성 - 메인축 방향으로 아이템들을 정렬 ※ justify와 align - justify : 메인축(가로 방향)으로 정렬 - align : 수직축(세로 방향)으로 정렬 - flex-start (기본값) : 아이템들을 시작점으로 정렬 (flex-direction이 column일 경우, 위로 정렬) A B C .container { border: 1px solid black; width: 400px; height: 100px; display: flex; font-size: 2rem; font-weight: bold; justify-content: flex-start; } .container > div { width: 50px; height: 50..
![]()
flex 관련 속성 정리 1 1. display: flex 속성 - 레이아웃을 배치하는데 사용 - 속성에 따라 각각의 아이템들이 어떠한 형태로 배치되는지 설정 - display: flex를 적용하면 블록 형태로 배치된 div가 가로 방향으로 배치 red blue green /* display: flex를 적용할 경우, 세로로 배치되었던 아이템들이 가로로 배치됨 */ .container {display: flex;} .box { width: 100px; margin: 10px; font-size: 2rem; font-weight: bold; } .red {background-color: red;} .blue {background-color: blue;} .green {background-color: gre..
![]()
Console 1. console.clear( ); - 출력창을 초기화함 2. console.log( ); - ( )안에 들어가는 값을 출력함
![]()
Ⅲ. 반복문 1. 반복문 - 자바스크립트에는 반복문이 존재 - for문, while문, do while문이 있음 2. for 문 - 범위의 횟수 동안 특정 문장을 여러 번 반복하여 실행하는 반복문 ※ 변수 선언 시, const를 쓰면 값 변경이 불가하여 에러 발생 console.clear(); // (시작; 조건; 증가) for (i = 0; i
