본문 바로가기
반응형

전체 글542

9. JS / DOM객체 / innerHTML / getElementById / getElementsByClassName / querySelectorAll 1. ___ 은 날짜 정보를 제공하는 내장 객체 2. 날짜 객체는 ___ 단위를 기준으로 시간을 표현 3. ___ 은 JS에서 하나의 객체이므로 프로퍼티와 메서드를 가진다. 1. Date() 2. 밀리세컨즈 3. 문자열 객체 DOM객체? Document Object Model객체 웹페이지(Document) 자체를 객체로 인식하기에 웹페이지의 여러 엘리먼트들을 조작할 수 있음 DOM객체이므로 메서드와 프로퍼티를 가질 수 있다. DOM메서드 : HTML 엘리먼트 인식 DOM프로퍼티 : HTML 엘리먼트 조작 getElement... innerHTML... 형태로 메서드와 프로퍼티가 구성됨 DOM객체로 웹페이지를 통제하기 위해선 특정 객체를 찾는 탐색과정이 필요함 총 5가지 탐색방법으로 이뤄짐 document.. 2019. 6. 15.
8. JS 내장객체 / new 연산자 / Date 객체 / 문자열 객체 / Number 객체 1. 객체 2. 속성 메서드 3. 내장객체 내장 객체? JS가 기본적으로 제공하는 객체 new 연산자 객체를 선언할 때 var 객체명 = {키:값} 처럼 중괄호로 객체를 선언하는 방법을 리터럴 형식이라고 한다. JS에선 객체를 리터럴 형식으로 선언하는 방식 뿐만 아니라 new 키워드를 이용한 객체 선언 방식도 지원함 (그러나 new 연산자를 이용한 객체 선언보단 리터럴 자료형 선언 방식을 권장) 선언 방법은 var 객체명 = new object(); new 연산자 선언 예시와 리터럴 방식 선언 예시 // new 연산자 선언 var obj = new Obejct(); // 객체 var str = new String(); // 문자열 객체 var arr = new Array(); // 배열 객체 var nu.. 2019. 6. 15.
6. JS 제어문 / 반복문 / for / while 1. ___ 은 코드의 논리적 구조를 처리하기 위해 사용 2. ___ 은 조건이 참일 경우 중괄호 안의 코드를 실행한다. 3. ___ 은 값의 조건에 따라 실행한다. 1. 조건문 2. if~else 구문 3. switch ~ case 구문 반복문? 특정 코드를 반복 처리 컴퓨터의 빠른 연산 속도를 이용해 다양한 처리 배열? 여러 자료형을 하나로 묶는 자료형 (객체) 하나의 변수에 담고 싶을 때 사용. 배열 값 할당방법 var arr = [값, 값, 값, ...] var arr = [1,2,3,4,5]; console.log(arr); 실행결과 다음처럼 나타난다. 인덱스 0 1 2 3 4 배열값 1 2 3 4 5 길이는 5 for 반복문 var arr = [1,2,3,4,5]; var len = arr.l.. 2019. 6. 14.
5. JS 제어문 1 / 조건문 / if / switch 1. 연산자 2. 산술연산자 3. 비교연산자 4. 삼항연산자 조건문? 프로그램 코드의 논리적 구조를 처리 if 조건문_1 if 조건문_2 if 조건문_3 조건문에선 모든 조건문이 충족되더라도 최상단의 충족 조건문 하나만 실행된다. Switch문 각 실행문마다 break; 를 입력해야 조건에 해당되지 않는 실행문이 실행되지 않는다. // swith문은 타입까지 일치해야 한다. var y = "10"; // string타입의 10 switch(y) { case 10 : console.log("10"); // number타입의 10 break; default : console.log("nothing"); break; } // 실행결과 "nothing" 출력 2019. 6. 14.
4. JS 연산자 1. 변할 수 있는 값 2. 값 3. console.log() 4. typeof 연산자란? 변수의 수학적 연산 및 처리를 하기 위한 기호 증감이란? var x = 10; 후위연산 x++ 출력되고 나서 값이 추가 전위연산 ++x 먼저 값이 추가되고 출력 후위연산 예시. 신기하게 x에 영향미침 // 후위연산예시 var x = 10; var y; y = x++; console.log(y); // 10출력 console.log(x); // 11출력 // 전위연산예시 var x = 10; var y; y = ++x; console.log(y); // 11출력 console.log(x); // 11출력 var x = 10, y = "10"; console.log(x = y); // true로 나옴. type신경쓰지.. 2019. 6. 14.
3. JS 변수 / 변수 선언 / 변수 초기화 / undefined, null 차이점 / typeof 1. HTML은 ____형태이다 2. JS코드 작성시 ___에 유의 해야 한다. 1. DOM(Document Object Model) 구조 2. 작성 순서 +) 왜냐면 인터프리터언어이므로 변수? 변할 수 있는 수 수학적 연산 및 처리가 필요한 경우 변수 사용하는 방법 / 변수 선언 키워드 var 변수명; 변수에 값 할당 (초기화) var 변수명 = 값; 변수를 작성하면 저장 공간(메모리)에 하나씩 변수들이 쌓인다 변수를 사용한 만큼 메모리를 사용하게 된다. JS코드를 해석할 때는 메모리를 운영체제에게 빌려서 만든 변수들을 쌓아서 사용한다. 변수를 선언하기 전에 자료형에 대해 알아보자 변수가 갖는 자료형태를 의미한다. 자료형태 5종류 문자(String) / 숫자(Number) / 논리(Boolean) / .. 2019. 6. 14.
2. JS 불러오기 / 파싱 / DOM구조 JS코드로 사용자의 ___에 반응할 수 있다. 웹 페이지에 일어나는 일들을 ___이라 부른다. JS는 ____언어이다. 동작 이벤트 인터프리터 JS선언문은 보통 head태그에 하단 처럼 작성한다 코드 사용자가 처음 이 페이지에 접속했을 때, 보여주고자 하는 경우 head태그에 작성하지만 DOM구조로서 상위태그들이 파싱된 뒤에 script를 실행하고자 할 경우, body태그에 선 실행될 태그들 뒤에 작성 "순서의 차이점"이 중요하다. html파일(index2.html)에 js파일(main2.js) 불러오기 예시. html파일 JS파일 document.write("hello first time"); JS가 왜 이렇게 동작하는건가? HTML trees라고 해서 Element와 Element.. 2019. 6. 14.
1. JS 기초 사용자 동작에 반응하는 언어. JS를 통해 움직임에 따라 달라지는 동적인 웹페이지를 만들 수 있다. 사용자는 브라우저를 통해 특정한 행동,동작을 서버에 요청하고 서버는 사용자의 요청에 대해 응답(기대한 동작에 대한 결과값)해준다. 버튼 클릭, 키보드 입력 등을 사용자 동작, 즉 이벤트라고 한다. 이벤트에 대한 준비를 하는게 JS이다. 디스크에 저장된 프로그램을 실행(exe파일)시킴 컴파일언어 JS는 _____언어이다 인터프리터언어란? 프로그램 코드를 작성 된 순서대로 한 줄 한 줄 해석하는 것 기본적으로 인터프리터 형식으로 한 줄 한 줄 실행됨 2019. 6. 14.
0. FIREBASE 소개 Firebase란? 우선 Client-Server관계를 다시 살펴보자 client가 Webserver에 요청하고 요청받은 Webserver는 disk에 요청에 맞는 자원(문서,이미지,파일)을 꺼내온 뒤 client에게 응답해줌으로써 브라우저에 나타나게 된다. 지금까지의 과정에선 client측에서 보여지는 것만 구현했다 그렇다면 서버측(WebServer, Disk(저장공간)) 서비스는 누가 제공해주는 걸까? 서버측의 역할을 대신 해주는 것이 Firebase. 바로 Firebase가 호스팅 서비스를 제공해주기 때문이다 서버측을 대신해준다는 말은 웹서버가 디스크에 요청하고 응답받는 과정을 의미. Firebase는 구글 클라우드 플랫폼! +) 기타 클라우드 플랫폼으론 MS의 애져, 아마존의 AWS 그렇다면 클라.. 2019. 6. 14.
정렬 알고리즘 2019. 6. 10.
[FC] BootStrap 맛보기 프레임워크란? 프로그램 개발을 도와주는 이미 작성된 각종 소스코드의 집합 ex. dgango, spring, bootstrap Bootstrap 프레임워크? 웹페이지 제작을 도와주는 프레임워크 부트스트랩을 사용하기 위한 2가지 방식은? CDN형식 파일 다운로드 스타일 적용은 어떤 속성을 통해 적용할 수 있나? class식별자 속성 2019. 6. 9.
[FC] CSS 파일분리 / CSS 불러오기 CSS파일은 한 번 정해지면 바뀌지 않는 정적 파일임 CSS파일도 파일 분리 및 파일 불러오기 가능 파일분리하면 좋은점 기존 html파일에 style을 작성하면 해당 html파일에만 적용가능했으나 파일분리를 통해 다른 html파일에도 적용가능해짐. 중복사용가능 주소에 존재하는 외부 CSS 문서 불러오기 코드 type : css타입+text타입 rel : relation의 약자. 불러오는 파일과 html과의 관계를 설명. 스타일시트 관계 스타일 상속의 예시. box스타일 적용시키기 / 부모태그 / 자식태그 box모델과 관련된 속성은 상속이 되지 않는다. height적용시키면 width적용시키면 엘리먼트 단위로 작성한 CSS코드가 우선순위를 갖는다. 결론 div태그의 자식요소인 h1, p태그에는 박스모델과 .. 2019. 6. 8.
[FC] CSS 스타일 / 박스모델 / margin / border / padding 박스모델이란 파란색은 컨텐츠영역 초록(padding)은 컨텐츠와 테두리 영역 간의 간격 노랑(border)은 테두리 영역 주황(margin)은 다른 태그(엘리먼트)들간의 간격 border영역이란? 블록요소인 p 태그는 자동 줄바꿈 이뤄짐 인라인 요소인 strong 태그는 옆에 붙음 이제 border영역을 나타내보자 블록요소인 p태그의 border영역은 페이지 영역 너비 전체를 차지하고 인라인요소인 strong태그의 border영역은 컨텐츠 영역 너비까지만 차지한다. padding 영역추가 margin 요소 추가 개발자 도구를 통해 값 살펴보기 입력한 box값들이 나온다. 특정방향에만 간격을 주고 싶을 때 특정방향(상,하,좌,우)의 간격만 바꿀 수 있다. 예시. padding, margin은 왼쪽에만 간격.. 2019. 6. 8.
[FC] CSS 선택자 1. 웹페이지 스타일 전용 언어는 무엇인가? CSS 2. CSS 선택자란 무엇인가? 엘리먼트 관계를 이용해서 선택하는 방법 3. 선택자 종류 4가지 자손 선택자 자식 선택자 인접 형제 선택자 일반 형제 선택자 4. 자손 선택자 사용하기 5. 자식 선택자 사용하기 자손 선택자와의 구분을 위해 식별자를 사용하자 자손 선택자 식별자 id="descendant" 자식 선택자 식별자 id="child" 자손 문단 태그 자손 문단 태그의 내부 태그 자식 문단 태그 자식 문단 태그의 내부 태그 6. 인접 형제 선택자 가장 인접해 있는 하위 형제태그를 변화시킴 인접형제 1번 문단 인접형제 2번 문단, id="adj_p" 인접형제 3번 문단 인접형제 4번 문단 7. 일반 형제 선택자 첫문단 두번째문단 id="gen_p".. 2019. 6. 7.
[FC] CSS 기본 정의 1. CSS의 약자는 무엇이며 무슨 의미인가? a. 약자 Cascading Style Sheets 종속적인(의존) 스타일 목록 b. 웹 페이지 스타일 지정 전용 언어 2. CSS를 지정할 때 쓰는 3가지 단위는? a. 엘리먼트 단위 b. 웹 페이지 단위 c. 웹 사이트 단위 3. css코드는 어디에 명시하는가 HTML 스타일을 적용하기 위한 코드 작성을 명시 4. css코드 기본 형태 엘리먼트 { 속성 : 값; } 예시. 5. 식별자 역할을 하는 속성 2가지는? id, class 6. id, class의 차이점은? id : 하나의 페이지의 유일한 요소의 식별자 역할 class : 하나의 페이지의 다중 요소의 식별자 역할 6-1. id, class 사용하기 6-2 id 속성으로 요소를 선택하기 위해 __기.. 2019. 6. 6.
button 태그 / method="get" / method="post" 1. 버튼 모양을 나타내기 위한 태그 2. 버튼 태그에서 전송(Submit) 액션용 속성은? type속성의 submit타입 type="submit" 3. 현재 폼에 입력된 데이터를 모두 초기화하는 태그의 타입은? type태그 reset 타입 method가 get일때와 post일 때의 차이 비교 method="get"일 때 다음의 소스를 입력하여 브라우저에 하단 페이지를 띄운 뒤 이름과 전화번호란에 내용을 입력하면 URL에 입력한 내용이 나타난다. method="post"일 때 action=""의 ""안에는 서버측에서 무언가를 해야하기에 ""안에 파일이 있어야한다. post방식은 전송한 정보를 쿼리형태로 URL에 나타내지 않으므로 URL이 길어지지 않는다. 밑줄친 action의 값에 하단의 소스로 구성된 .. 2019. 6. 5.
form / input 태그별 속성 1. 웹 상에서 입력 항목을 구성할 때 사용하는 태그, 전체 폼의 부모 역할하는 태그는 무엇이며 이 태그의 상위태그는 무엇인가? 2. 값 전송시 자동 호출될 서버 프로그램 주소 지정하는 form태그의 속성은 무엇이며 어떻게 입력하는가? action속성 +. method="post"인 상황에서 서버측에서 요청에 대한 응답 반응을 전달해야 하기에 목적지 주소에 파일이 있어야 한다. +. post방식은 전송한 정보를 쿼리형태로 URL에 드러내지 않기에 URL이 길지 않다. 3. 전송에 필요한 HTTP 방식 설정하려면 어떤 속성을 쓰는가? method 4. 웹 상에서 입력 항목을 구성할 때 사용하는 태그는? +. input태그는 type속성에 따라 다양한 입력폼을 구성한다. 5. 속성 값에 따라 다양한 입력폼을.. 2019. 6. 4.
HTTP규칙, GET, POST 1. HTTP란 무엇인가 Hyper Text Transfer Protocol 인터넷에서 데이터를 주고받을 수 있는 프로토콜(규칙) 2. HTTP 역할 클라이언트가 서버에 요청하고 서버로 부터 응답을 받을 수 있게 해주는 규칙 3. 서버의 역할은? 클라이언트의 요청에 대한 응답을 보내주는 것 서버가 응답할 때 응답에 대한 정보(정보가 담긴 메시지를 HTTP메시지)를 담아 클라이언트로 보냄 4. HTTP(메시지)의 구성요소 3가지 시작줄 메서드 주소 버전으로 구성 Header 요청 방식(Method)에 대한 정보, 사용자 및 브라우저 정보 메서드는 어떤 주제를 가지고 대화할지를 입력 Body 서버에 요청을 할 때 함께 보낼 데이터를 담는 부분 5. 사용자(클라이언트)가 서버에 요청하기 위한 방법 2가지 GE.. 2019. 6. 4.
반응형

티스토리툴바