자바스크립트의 내장객체로는Number Array Date String 가 대표적이다. Number 객체 참고. Number 메서드 var n = 10; // 💡 MAX_VALUE, MIN_VALUE : 최대값, 최소값 console.log(Number.MAX_VALUE); console.log(Number.MIN_VALUE); // 💡 toString : 수치값을 문자열로 변경 console.log(n.toString(), typeof n.toString()); // 10 string console.log(n.toString(2), n.toString(8), n.toString(16)); // 2진수 8진수 16진수 변경 // 💡 toFixed() : 소수 부분 자릿수 반환 var n2 = 15.6749..
객체(object)란? 자바스크립트에서 객체는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다. 흔히 자바스크립트는 모든 것이 객체 라는 말이 있을정도. 객체의 종류 3가지 내장 객체 : Number String Boolean Date Array 👉 내장 객체 바로가기 브라우저 관련 객체 : Window Navigation Screen History Location 👉 BOM객체 바로가기 문서 객체 모델(DOM) : document image link 👉 DOM객체 바로가기 웹 문서 자체도 객체이고 그 안에 삽입된 이미지와 링크, 텍스트 필드도 모두 객체이다. 객체의 인스턴스 자바스크립트에서 객체는 참조 형태로 사용한다. 즉, 객체 자체가 아니라 예약어 new를 이용하여 인스턴스의 형태로 만든다. //..
즉시실행 함수 (IIFE) 즉시실행함수(IIFE, Immediately Invoked Function Expresstion)는 함수를 정의하면서 동시에 호출한다. 자바스크립트의 프레임워크에서 주로 사용한다. // 이름이 없는 익명 함수를 만들자 마자 바로 호출 (function() { console.log("hello"); }()); // arrow 함수로도 가능 (() => { console.log("hello"); })(); 필요없는 전역 변수의 생성을 줄일 수 있다. 또한 즉시 실행 함수는 외부에서 접근할 수 없는 자체 scope를 생성한다. 내부 변수를 외부로부터 보호해 private하게 보호할 수 있다는 장점이 있다. 또한 초기화 코드나 모듈화 패턴을 만들 때 유용하게 사용된다. 즉, IIFE ..
함수 function JavaScript에서 함수는 일급 객체(first-class)이다. 함수를 변수, 객체, 배열 등에 저장할 수 있고, 다른 함수에 전달하는 콜백함수 또는 리턴 값으로 사용 가능 일급객체란? 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다. 자바스크립트에서 함수를 생성하는 방법은 다음과 같다. 함수 선언식 function Add(a, b) { // a, b 👉 파라미터 return a + b; } console.log(Add(10,20)); // 10, 20 👉 인자값 함수 선언식은 function 키워드로 시작하고 함수 이름을 지정한 후, 괄호 안에 매개..
자바스크립트의 변수 선언 방식인 var let const 의 차이점 var : 중복 선언 가능, 재할당 가능 let : 중복 선언 불가능, 재할당 가능 const : 중복 선언 불가능, 재할당 불가능 변수 선언 방식 var 선언한 변수와 동일한 변수명으로 중복 선언이 가능하다. 즉, 마지막에 할당된 값이 최종 변수에 저장된다. 간단한 테스트에는 편리할 수 있으나, 길고 복잡한 코드에서 같은 이름의 변수가 여러번 선언되어 사용되면 어떤 부분에서 값이 변경되고 문제가 발생하는지 파악하기 힘들다. 이를 보완하기 위해 ES6부터 추가된 변수선언 방식인 let과 const가 등장했다. /* 중복 선언 가능, 재할당 가능 */ var title = "one"; var title = "two"; title = "th..
1.1 배경색과 배경범위 지정 background-color background-clip : border-box padding-box content-box 1.2 배경 이미지 지정 background: url() background-image: url("이미지파일경로") background-repeat : repeat-x repeat-y no-repeat background-position: ; 수평 위치 : left | center | right | 길이값 | % 수직 위치 : top | center | right | 길이값 | % background-origin : border-box padding-box content-box background-attachment : scroll | fixed ba..
CSS와 box model box-sizing : 박스 모델의 크기를 계산 border-box : 테두리까지 포함해서 너빗값 ( 총 너비 = width+2(margin+padding+border) ) content-box : 콘텐츠 영역만 너비값을 지정 (default) box-shadow : 박스 모델에 그림자 효과 box-shadow : inset 테두리 스타일 border: border-style : solid | dotted | dashed | double border-width : | thin | medium | thick border-color border-radius : 둥근 테두리 50% 👉 원 형태의 이미지 생성 여백을 조절하는 속성 margin 웹 문서를 가운데 정렬하기 👉 margin..
1. 글꼴 관련 스타일 font-size - px | rem | em | % font-style - normal | italic | oblique font-weight - normal | bold | bolder | Lighter font-family : 웹 문서에 사용할 글꼴 지정 body{ font-family: "맑은 고딕", 돋음, 굴림 /* 두 단어 이상으로 된 글꼴 이름은 큰따옴표로 묶는다 */ } 1.2 웹 폰트 사용 @font-face { font-family: cheri; src: url(../fonts/cheri.ttf); } .font-md{ font-family: cheri, '글꼴이름', serif; font-size: 40px; } 1.3 텍스트 관련 스타일 color text-..
🎈참고. CSS 선택자 1.1 기본 선택자 * tag명 .클래스명 #id명 tag1, tag2 [속성명] tag명[속성명] [속성명=값] [속성명~=값] [속성명:=값] [속성명^=값] [속성명$=값] tag > tag2 tag tag2 tag + tag2 tag ~ tag2 1.2 가상 클래스(Pseudo class) 선택자 :focus :first-child :last-child :only-child :nth-child(n) :not(선택자) :enable :disable :checked :empty :link : 방문하지 않은 링크 :visited : 방문한 링크 :hover : 지정된 요소에 마우스가 올라간 경우 :active : 지정된 요소가 활성화된 경우 a:link { /* 방문하지 않은 a..
🎈참고. HTML 태그와 설명 1.1 폼 삽입 속성들 method : 사용자의 입력 내용을 URL에 포함하여 서버로 전송하는 get과 데이터를 요청 본문에 포함하여 전송해 URL에 데이터가 노출되지 않는 post name : 폼의 이름 action : 폼 태그 안의 내용을 처리해 줄 서버 프로그램 target : action 속성에서 지정한 스크립트 파일을 다른 창에서 열도록 autocomplete : 자동 완성 기능 (기본값 on) : 하나의 폼 안에서 여러 구역을 나누어 표시할 때 : 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹 브라우저가 알 수 있음 아이다 1.2 input 태그 태그의 type 속성 text - value maxlength size password - value maxle..
🎈참고. HTML 태그와 설명 1.1 HTML 기본구조 : 웹 문서의 유형을 지정. 현재 문서가 HTML5로 작성한 웹 문서 : 웹 문서의 시작과 끝을 나타내는 태그 : 웹 브라우저에 문서 정보를 알려주는 태그 : 실제로 웹 브라우저 화면에 나타나는 내용 1.2 태그 속 태그 : 글자 인코딩, 웹 문서의 키워드, 설명, 소유자나 작성자 등의 메타데이터 지정 : 해당 문서의 제목 : 해당 문서의 스타일 정보 정의 : 자바스크립트와 같은 클라이언트 사이드 스크립트 정의 : 해당 문서와 외부 소스(external resource) 사이의 관계 정의 2.1 내용 입력 ~ : 제목 : 문단 : 행 바꿈 : 수평 가로선 정의. 콘텐츠 내용에서 주제가 바뀔 때 주로 사용 : 인용블록 2.2 텍스트 효과 , : 굵게 ..
html 시멘틱 태그란? 시멘틱 태그란 웹 페이지의 구조를 쉽게 이해할 수 있도록 정의된 태그를 의미한다. 헤더 영역을 나타내는 내비게이션 영역을 나타내는 핵심 콘텐츠를 담는 독립적인 콘텐츠를 담는 콘텐츠 영역을 나타내는 사이드 바 영역을 나타내는 맨 아래쪽 영역을 나타내는 시멘틱 태그는 왜 필요할까 첫 번째 이유는 웹 브라우저가 HTML 소스 코드만 보고도 어떤 부분이 제목이고 본문 내용인지 쉽게 알 수 있다. 특히 시각 장애인이 웹 사이트를 이용할 때 쓰는 화면 낭독기와 같은 보조 기기에서 사이트의 구조를 제대로 이해할 수 있다. 두 번째 이유는 문서 구조가 정확히 나눠지므로 PC나 모바일의 웹 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기가 쉽다. 마지막으로 인터넷에서 웹 사이트..
