![]()
※ abc 순으로 정렬 ● direction 속성 - 글자 쓰기 방향 지정 - direction : ltr | rtl - ltr : 왼쪽에서 오른쪽 (left-to-right)으로 텍스트 표시 (기본값) - rtl : 오른쪽에서 왼쪽 (right-to-left)으로 텍스트 표시 ● line-height 속성 - 줄 간격 조절 - line-height: normal | | | | inherit - normal : 설정하지 않음 (기본값) - , , : 글자 크기를 기준으로 간격 크기 지정 ● text-align 속성 - 텍스트를 정렬 - text-align: left | right | center | justify | initial | inherit - left : 왼쪽 정렬 - right : 오른쪽 정렬..
![]()
※ abc 순으로 정렬 ● color 속성 - 글자 색 지정 - color: (rgb or rgba) | (색상이름) | (16진수) - rgb 값 : 빛의 삼원색으로 빨간, 녹색, 파란색을 이용해서 색을 표시하는 방식 (각 값 당 255까지 가능) ※ rgba는 투명도 까지 가능한 값 - 색상이름 : red, blue 처럼 색상 이름으로 표기 - 16진수 : 16진수로 #000000 처럼 표기 가능 (ex : 파란색(#0000ff)) ● letter-spacing 속성 - 글자 간격 조절 - letter-spacing: normal | length - normal : 기본 값 (문자에 공백이 들어가지 않음) - length : px, %, em, rem 등으로 간격 설정 ● text-decoration..
![]()
● button 태그 - 버튼을 삽입함 - - submit 속성 : 폼을 서버로 전송함 - reset 속성 : 폼에 입력한 모든 내용을 초기화함 - button 속성 : 기능은 없는 그냥 버튼
![]()
● textarea 태그 - 여러 줄을 입력하는 텍스트 영역 생성 -
![]()
드롭다운 목록 태그 1. select 태그 - select 태그를 사용해 드롭다운 목록을 생성함 - select 태그에는 추가 속성이 존재 - size 속성 : 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정 - multiple 속성 : 드롭다운 메뉴를 중복 선택이 가능함 (ctrl 키를 사용) 2. option 태그 - option 태그로 드롭다운 목록에 표시되는 옵션들을 생성함 - option 태그에는 추가 속성이 존재 - value 속성 : 옵션을 선택 했을 때, 서버로 넘겨질 값을 지정 - selected 속성 : 화면에 표시될 때, 기본적으로 선택되어 있는 옵션을 지정 메뉴판 커피 메뉴 아메리카노 카페 라떼 카푸치노 바닐라 라떼 녹차 라떼 3. optgroup 태그 - 옵션끼리 그룹 지정 - 이..
![]()
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..
![]()
커밋 내용 확인 1. 커밋 내용 확인 - 커밋 기록 확인 : git log 2. 변경 사항 확인 - #1. vim test를 입력하여, 'Good Day!!!'를 삭제하고 'I love you!!' 내용을 추가함 - #2. git status를 입력하여, 상태를 확인 - Changes not staged for commit: modified: test.txt는 파일이 수정되었고, 스테이징 상태는 아니라는 뜻 - #3. git diff를 입력하여, 저장소에 있는 test.txt 파일과 방금 수정한 test.txt의 차이를 확인 - -Good Day!!를 삭제하였고, +I love you!!를 추가하였음을 확인 - -는 삭제한 내용, +는 추가한 내용
![]()
버전 생성 및 커밋(Commit) 1. 버전 - 문서를 수정하고 저장할 때마다 업데이트 되는 것 - 원래 파일 이름은 유지하면서 파일에서 무엇이 변경했는지를 변경 시점마다 저장할 수 있음 2. 작업 트리 - 파일수정, 저장 등의 작업을 수행하는 디렉터리 3. 스테이지 - 버전으로 만들 파일이 대기하는 곳 4. 저장소(repository) - 스테이지에서 대기하고 있는 파일들을 버전으로 생성하여 저장하는 곳 5. 원리 - #1. 작업 트리에서 파일을 생성하여 수정 및 저장함 - #2. 파일을 버전으로 생성하기 위해 스테이지에 넣음 - #3. 준비된 스테이지가 버전을 생성하기 위해 깃에게 커밋(Commit)명령을 내림 ※ 커밋(Commit) : 파일 및 폴더의 추가/변경 사항을 저장소에 기록 - #4. 커밋..
![]()
객체(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)); // 불리언타입
