![]()
Ⅰ. 조건문 1. 조건문 - 자바스크립트의 제어문에는 if 조건문과 switch 조건문이 있음 2. if 문의 구조 - if 문의 조건식 결과가 True라면 명령문을 실행 - 조건식의 결과가 False라면 명령문을 건너 뜀 console.clear(); var a = 10; // a가 5보다 크므로 조건문이 True임 if (a > 5) { console.log('참'); // 참 } 3. if ~ else 문의 구조 - if 문의 조건식 결과가 True라면 명령문을 실행 - if 문의 조건식 결과가 False라면 if문 안에 명령문을 실행하지 않고 else문 안에 명령문을 실행 console.clear(); var a = 3; // a가 5보다 작으므로 조건문이 False임 if (a > 5) { co..
![]()
연산자 1. 연산자 - 자바스크립트는 연산자를 활용할 수 있음 2. 연산자 종류 기호 설명 사 칙 연 산 + 더하기 - 빼기 * 곱하기 / 나누기 논 리 연 산 A == B A와 B가 같음 A != B A와 B가 다름 A > B A가 B보다 큼 (초과) A = B A가 B보다 크거나 같음 (이상) A
![]()
자료형 1. 자료형 - 자바스크립트에는 여러가지의 자료형이 존재 - Boolean 타입 - Number 타입 - String 타입 - Null 타입 - Undefined - Symbol 타입 - Object (객체) 2. Boolean 타입 - True(참) or False(거짓) 둘 중 하나의 값을 갖는 논리적인 요소 var a = true; 3. Number 타입 - -(253-1) ~ (253-1) 사이의 숫자값을 갖는 요소 (이 범위 밖은 안전하지 않은 숫자) var a = 10; 4. String 타입 - 텍스트 데이터를 나타낼 경우에 사용 - 작은 따옴표(' ')안에 입력함 var a = 'Hello World'; 5. Null 타입 - 빈 값을 뜻함 - 이 경우, 타입은 존재하지만 값은 없다..
![]()
Ⅱ. 스코프 (Scope) 1. 스코프 - 유효한 참조 범위 - 자바스크립트에는 함수 레벨 스코프(ex : var)와 블록 레벨 스코프(ex : let, const)가 존재 2. 함수 레벨 스코프 (Function-level scope) - var 문은 함수 내부에 선언된 변수만 지역변수로 한정함 ※ 지역변수 : 프로그램 내 변수가 선언된 영역만 접근 가능한 영역으로 취하는 변수 - 나머지 변수는 전부 전역변수로 간주 ※ 전역변수 : 프로그램 내 모든 모듈들을 변수 선언의 유효한 영역으로 취하는 변수 - 다음 예제를 보면 abc 함수 내부에서 선언된 a 변수는 함수 내부에서만 참조 가능 - 외부에서 참조할 경우, 오류가 발생 console.clear(); // 콘솔창 초기화 function abc() {..
![]()
Ⅰ. 변수 및 변수선언 1. 변수 - 하나의 값을 저장하기 위해 확보한 메모리 공간 2. 변수명명의 규칙 - 식별자는 알파벳 대소문자, 숫자, 달러기호($), 밑줄(_)을 사용 - 숫자를 첫 글자로 사용할 수 없음 - 변수 명은 첫 번째 글자는 소문자, 다음 단어의 첫 번째 글자는 대문자로 표기 (ex : randomDice) - 예약어(if, for, var 등)은 변수명으로 사용할 수 없음 - 들여쓰기는 스페이스 2번 - 문자열은 작은 따옴표로 통일 3. 변수 선언 - 변수 선언에는 크게 3가지 방법이 존재 - var - let - const 4. var - var 문에서 변수에 초기값을 지정함 - 변수는 값이 설정될 때 까지 undefined 값을 가짐 - 중복선언 가능 - 재할당 가능 (변수 선언..
![]()
자바스크립트 (Javascript) 1. 자바스크립트 - HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어 2. 자바스크립트의 특징 - 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어임 ※ 인터프리터 : 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경 - 멀티 패러다임 프로그래밍 언어임 (명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 지원) - 프로토타입 프로그래밍 언어임
![]()
● float 속성 - 정렬하기 위해 사용되는 속성 - float: none | left | right | initial | inherit - none : 띄우지 않음 (기본값) - left : 왼쪽에 띄움 - right : 오른쪽에 띄움 - initial : 기본값으로 설정함 - inherit : 부모 요소로부터 상속함
![]()
float 속성 정리 1. float 속성 - 요소를 정렬하기 위한 속성 2. float의 속성값 용어 설명 none 띄우지 않음 (기본값) left 왼쪽에 띄움 right 오른쪽에 띄움 initial 기본값으로 설정 inherit 부모 요소로부터 상속 .red { width: 100px; height: 100px; background-color: red; float: left;/* 박스를 왼쪽에 정렬함 */ } .blue { width: 100px; height: 100px; background-color: blue; float : right;/* 박스를 오른쪽에 정렬함 */ }
![]()
● opacity 속성 - 요소의 불투명도를 설정함 - 최소 0에서 최대 1까지 가능 - 0 : 투명도100% - 1 : 투명도0%
![]()
● transition 속성 - 웹 요소의 스타일 속성이 바뀜 - transition-property : 트랜지션 대상 설정 - transition-duration : 트랜지션 진행 시간 설정 - transition-timing-function : 트랜지션 속도 설정 - transition-delay : 트랜지션 지연 시간 설정 - transtion : 위 4가지의 속성을 한꺼번에 설정
![]()
트랜지션 (Transition) 속성 정리 1. 트랜지션 (백과사전 바로가기) - 웹 요소의 배경 색이 바뀌거나 도형의 테두리가 원형으로 바뀌는 것처럼 스타일 속성이 바뀌는 것 2. 트랜지션의 유형 속성 설명 transition-property 트랜지션 대상을 설정 transition-duration 트랜지션 진행 시간을 설정 transition-timing-function 트랜지션 속도 곡선을 설정 transition-delay 트랜지션 지연 시간을 설정 transtion 위 4가지의 속성을 한꺼번에 설정 3. 연습문제 .tr1 { width: 100px; height: 100px; background-color: blue; border: 1px solid black; /* 너비를 2초 동안, 높이를 ..
![]()
가상 요소 1. 가상 요소 - 내용의 일부만 선택해 스타일을 적용할 때 사용함 - 가상 클래스와 구별하기 위해 클래스 이름 앞에 콜론 두 개(::)를 붙임 2. ::first-line 요소와 ::first-letter 요소 - ::first-line 요소 : 첫 번째 줄에 스타일 적용 - ::first-letter 요소 : 첫 번째 글자에 스타일 적용 ※ br 태그로 글을 나눌 수 있음 걱정도 별을 둘 나는 계십니다. 나는 무덤 새워 이런 버리었습니다. p::first-line { background-color: lightseagreen; } p::first-letter { background-color: lightcoral; } 3. ::before 요소와 ::after 요소 - 내용의 앞뒤에 콘텐츠 ..
![]()
● table, tr, td, th 태그 - table 태그 : 표의 기본 틀을 생성 - tr 태그 : 표의 행을 생성 - td 태그 : 표의 열을 생성 - th 태그 : 표의 제목 셀을 생성
![]()
테이블 관련 태그 정리 1. 표 만드는 태그 (백과사전 바로가기) - , , , 태그 : 기본적인 표를 제작 - 태그 : 표의 기본 틀을 제작 - 태그 : 행을 제작 - 태그 : 셀(열)을 제작 - 태그 : 표의 제목 셀을 제작 제목 셀 1행 2열 1핼 3열 제목 셀 2행 2열 2행 3열 2. colspan, rowspan 속성 - 행 or 열 합치기 - colspan 속성 : 가로로 합침 - rowspan 속성 : 세로로 합침 이름 연락처 주소 자기소개 3. 표에 제목 붙이기 - 태그일 경우, 제목 타이틀 소 제목 타이틀 이름 연락처 주소 자기소개 - 태그일 경우, 제목 타이틀 소제목 이름 연락처 주소 자기소개
![]()
주요 선택자 1. 전체 선택자 - 스타일을 모든 요소에 적용할 때 사용 - * (별표)를 사용 HTML5 웹 프로그래밍 h1 {background-color: lightseagreen;} /* 마진과 패딩을 0으로 설정하여 브라우저 창에 바짝 붙게 함*/ * { margin: 0; padding: 0; } 2. 태그 선택자 - 특정 태그가 쓰인 모든 요소에 스타일을 적용 제목 타이틀 소제목 타이틀1 내용내용내용내용내용내용내용.... 소제목 타이틀2 내용내용내용내용내용내용내용.... h2 {color: blue;} /* p 선택자를 정의하면 웹 문서의 모든 p 요소들에 스타일이 적용됨 */ p { font-size: 12px; margin-left: 20px; } 3. 클래스 선택자 - 특정 부분에 스타일..
