![]()
DOM 객체 함수, DOM API Node 생성 document.createElement("tagName") 요소노드 만들기 ** HTML 표준태그가 아니어도 생성됨 document.createTextNode("text") 텍스트노드 만들기 Node 추가 DOM객체.appendChild(대상객체) DOM객체에 대상객체를 연결한다(자식으로 추가한다) ex) var pTag = document.createElement("p") //p태그요소 생성 document.body.appendChild(pTag) //에 p요소 추가 ** document.body == ex) var div = document.createElement("div") //div요소 생성 var t = document.createTextNod..
![]()
DOM, Document Object Model 문서 객체 모델 document 객체를 통해 관리된다. document 객체는 window 객체의 내장 객체 중 하나 HTML 문서의 body 태그의 내용 요소들을 다룰 수 있다. 자바스크립트 코드로 HTML 문서의 요소(태그)들에 접근하고 관리할 수 있게 해주는 객체 모델 DOM 관련 용어 요소 (Element) HTML 문서 내의 태그 문서 객체(Document Object) 자바스크립트 코드를 이용하여 요소에 접근할 수 있도록 객체화한 것 HTML요소와 자바 스크립트코드의 연결 지점(인터페이스) DOM 트리(tree) 모든 문서 객체들을 트리구조로 표현한 것 모든 요소들을 계층적 구조인 트리 구조로 저장해둔 것 노드(Node) DOM 트리의 구성 요소..
![]()
자바스크립트 핵심 요소 4가지 자바스크립트 Core 문법 기본 문법 데이터타입, 변수, 제어문, 함수 등 클래스, 객체, 프로토타입 내장 객체(Built-in Object) String, Number, Object, Math, Date 등 BOM (Browser Object Model, 브라우저 객체 모델) 웹브라우저 창(윈도우)과 자바스크립트가 상호작용하기 위한 수단으로 제공되는 객체들 Window 객체 BOM 객체들의 최상위 객체 브라우저의 전반적인 기능을 관리하는 객체 자바스크립트로 정의한 모든 전역 변수, 함수, 객체들을 프로퍼티(Property (속성, 멤버필드))로 가지고 있다. window. 을 생략할 수 있다. Navigator 객체 브라우저의 정보, 운영체제의 정보를 제공하는 객체 Loc..
![]()
타이머 (Timer) 함수 setInterval(function, millis) : timerid 지정된 밀리초(millis)마다 function 함수를 반복적으로 실행한다. 타이머 객체의 id를 반환한다. setTimeout(function, millis) : timerid 지정된 시간(밀리초) 이후 function 함수를 한 번 실행한다. 타이머 객체의 id를 반복한다. clearInteraval(timerid) : undefined 지정된 타이머객체를 즉시 종료시킨다. setInterval, setTimeout 모두 종료 가능
![]()
클로저, Closure Free Variable(자유변수) 와 함께 손꼽히는 중요한 개념이니 꼭! 기억 해야 한다. 함수 스코프의 외부로 반환된 내부함수가 자신이 선언(정의)되었을 때의 스코프(환경, 상태)를 기억하는 것 - Lexical Scope 함수 스코프가 종료되었더라도 클로저함수를 호출하면 클로저 함수가 선언되었을 때 만들어진 스코프에 접근할 수 있다. 클로저 함수에 의해 접근할 수 있는 변수를 자유변수(Free Variable)이라고 한다. 자유변수는 새롭게 만들어진 것이 아니라 최초의 변수공간을 계속 사용하는 것이므로 값의 변화가 적용되고, 최신값으로 유지된다.
![]()
JavaScript의 특수한 자료형 Undefined 변수가 초기화되지 않은 상태 변수의 값이 할당되지 않은 상태 변수가 선언되지 않아서 아예 오류가 나는 상황과는 다른 상황인걸 인지해야 한다. 데이터타입조차 결정되지 않은 상황 Null Object 타입의 데이터 키워드 참조대상이 없음을 나타냄 변수를 생성하고 의도적으로 값을 비워둔 상태 Undefined 는 의도적이지 않고 Null 은 의도적이라고 볼 수 있다.
![]()
JavaScript 변수 선언 키워드 var 같은 이름의 변수를 여러번 선언해도 오류가 발생하지 않는다. ex) var data1 = 10; // var data1 = 20; --> data변수가 10으로 초기화 되었다가 20이 대입된다. let 같은 이름의 변수를 여러 번 선언할 수 없다. ex) let data2 = 10; // let data2 = 20; --> 에러발생, data2가 이미 선언됐음. const let과 같음 변수값 초기화는 가능하지만 이후에 대입이 안된다. 변수값 초기화는 필수(하지 않으면 에러가 발생한다.) 적용되는 스코프 var : function scope let, const : block scope var 변수는 함수 내 지역스코프 특성이 부여된다. let, const는 블..
![]()
JS 데이터 타입 Number : 숫자, 콘솔 상 보라색 String : 문자, 콘솔 상 검은색 Boolean : 논리, 콘솔 상 파란색 Object : 객체, {객체} {키1:밸류1, 키2:밸류2, ...} Array : 배열 [배열요소1, 배열요소2, ...] Null : null값 (참조 대상이 없음을 나타내는 키워드) undefined : 정의되어 있지 않은 상태를 표현하는 키워드 NaN : Not a Number (숫자가 아닙니다. 라고 나타내는 키워드이지만 Number 타입이다.) Number 타입으로 값이 인식되어야하는 시점에 Number가 아닌 데이터를 사용한 경우 리턴되는 특수한 값 Infinity : 무한대, Number 타입의 특수한 값(키워드) 양의 무한대를 나타내는 키워드 특정 숫..
![]()
Transition 속성 속성을 서서히 변화시키는 속성 아래 네가지 속성을 한번에 적용하는 속성이다. Transition-property transition 이 적용될 CSS를 지정한다 none: 적용안함 all: 모든 속성 CSS property: 해당 속성만 적용 Transition-duration 속성의 변화가 진행되는 시간을 지정한다 시간 단위로 s또는 ms를 사용한다. Transition-delay 속성의 변화가 시작되는 시점을 지연시키는 속성 시간 단위로 s또는 ms를 사용한다. Transition-timing-function 속성의 변화가 진행되는 속도를 조절하는 속성 기본값: ease (천천히 시작해서 보통속도 진행 후 천천히 마무리) linear: 항상 일정한 속도
![]()
자바스크립트, JavaScript HTML 문서에서 동작을 제어하는 언어 Button 을 클릭했을 때 발생하는 이벤트 처리(Event Listener) Form에 입력한 값이 적절한 지 판단하기(Validation) HTML 문서의 head 태그에 script 태그를 작성하여 자바스크립트 코드를 작성하여 사용한다. 브라우저의 자바스크립트 엔진에 의해 인터프리트방식으로 동작한다. 자바스크립트 파일(.js)을 HTML 문서에서 로드해서 사용하기도 한다. 자바스크립트 코드는 브라우저에게 전달되어야 실행된다. 민감한 정보나 핵심코드를 입력해서는 안된다. Javascript는 에러가 나게되면 남은 아래쪽 코드는 일절 수행하지 않는다.
![]()
CSS 벤더 프리픽스 CSS3 스타일 속성 앞에 붙이는 브라우저별 접두어 브라우저마다 접두어가 다르다 CSS3를 반영한 브라우저 또는 해당 브라우저의 버전에 따라서 CSS3 스타일 속성을 테스트 하고 그에 따른 피드백을 제공하기 위해 사용된다. 표준적으로 CSS3가 적용되기 전에 브라우저마다 자체적으로 테스트나 개발을 위해 미리 적용된 속성에 접두어를 붙여서 사용할 수 있게 제공된 것들 프리픽스의 종류 -webkit- 크롬, 사파리 -o- 오페라 -ms- 윈도우 인터넷 익스플로러 -moz 파이어폭스 ** 접두어를 적용한 CSS3 속성을 먼저 작성하고 접두어를 제거한 표준속성을 마지막에 작성한다. 이전 버전의 속성보다 나중에 개발된 표준속성이 반영되도록 배치한 것
![]()
CSS 텍스트 스타일 font-size: 글자크기 em, px 를 주로 사용한다 color: 글자색상 색상 단위로 적용한다. font-style: 글씨체 Normal, Italic(이탤릭), Oblique(기울임) Normal, Italic 을 가장 많이 사용한다. font-weight: 굵기 Normal, Bold, Bolder, Lighter 100~900(숫자가 커질수록 굵어진다, 100단위로 설정한다.) 100~300 Lighter 400~500 Normal 600~700 Bold 800~900 Bolder font-variant: 글자 변형(다양성), 대소문자 글자 스타일 small-caps : 소문자를 작은 대문자로 표현 Normal text-align: 텍스트 정렬 left, right, c..
![]()
네비게이션 용어 네비게이션 바(Navigation Bar)의 위치에 따라 부르는 이름 GNB Global Navigation Bar 사이트의 모든 페이지에서 공통으로 사용하는 메뉴바 주로 화면 상단에 위치하며, 메인 메뉴, 최상위 메뉴라고 한다 LNB Local Navigation Bar 소메뉴, GNB의 상세 메뉴로써 동작한다 서브메뉴라고 하며 페이지들과 직접 링크가 걸려있다(상세페이지 메뉴) SNB Side Navigation Bar 사이드 메뉴, 왼쪽이나 오른쪽에 두는 메뉴 FNB Foot Navigation Bar 하단 메뉴, 회사에 대한 소개 페이지링크 카피라이트 링크
![]()
Position 속성 Layout 배치 속성 요소의 위치에 대한 설정 속성 position을 설정하더라도 기본 display 속성은 유지된다 static 기본 위치 해당 요소가 위치했어야하는 곳에 자연스럽게 배치된다. absolute 절대 위치 기준위치는 Position 속성을 받은 부모요소의 레이아웃 상하좌우 네 벽면을 기준으로 삼는다. 부모요소가 position 속성이 아니라면 첫 화면을 기준으로 위치가 지정된다. relative 상대 위치 기존에 자기가 표현되어야하는 위치의 좌측상단지점을 기준으로 이동 기존 해당 요소가 존재했어야하는 공간이 유지된다 다른 태그가 해당 공간을 사용하지 않고 비워둔다, 상대 위치 박스는 이동시키지 않고 사용한다 absolute박스의 부모 요소가 된다. fixed 고정 ..
![]()
Inline - Block 모델 Inline 모델과 Block 모델의 표현방식이 섞인 것 내부 동작은 블록모델 요소의 자체 레이아웃 width, height, border, margin, padding 모두 적용 가능 외부 동작은 인라인모델 외부 요소와의 관계에 대한 레이아웃 블록모델처럼 한 줄을 다 차지하지 않는다. 인라인요소처럼 한 줄에 여러 요소 배치가 가능하다. 자체 레이아웃 width, height 설정 가능 부묘요소에 맞추려면 width: 100% 로 설정 내용물 크기에 맞추려면 height: auto 값으로 설정 margin-top, margin-bottom 설정 가능 margin-left, margin-right 설정 가능 외부 요소와의 간격으로 사용되며 인라인모델처럼 동작한다
