본문 바로가기
반응형

○ WEB157

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.
[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.
정적자원/ 정적,동적 페이지 / 상대경로 절대경로 일반적으로 사용자(Client)가 웹 페이지를 보려면 다음과 같은 구조, 과정을 거친다. 1. 웹 페이지를 제작할 때 여러가지 파일이 존재한다. 여러 파일 중 사용자의 행동, 입력에 의존적이지 않은 자원들을 무엇이라 하는가? 정적(Static) 자원(Resource) 1.1 정적 자원은 크게 4가지로 구분한다 웹 페이지 자체 페이지에 필요한 이미지 스타일 시트 자바스크립트 파일 2. 웹 페이지의 종류 2가지는 무엇인가? 정적페이지 동적페이지 3. 정적 페이지란? 클라이언트 요청에 이미 만들어진 HTML 페이지를 응답 논문, 블로그, 사전 등 4. 동적 페이지란? 클라이언트 요청에 실시간으로 페이지 변화를 응답 게시판, 로그인, 방명록 등 5. HTML파일은 어떻게 관리하는가? 파일의 위치, 경로파일 혹은.. 2019. 6. 4.
HTML 기본 / 엘리먼트(태그표현,속성,종류) / 테이블태그 / 리스트태그 1. HTML의 약자와 의미는? Hyper Text Markup Language 웹브라우저에 하이퍼텍스트(콘텐츠 연결링크) 기능(특정 구조로 이뤄짐)을 가진 문서를 만드는 언어 정형화된 문법으로 표현하여 웹을 보여줌 2. HTML 형식 표식은 태그로 불린다. 태그는 열고닫는 형태의 쌍(이를 Element라고 부름)을 이룬다 contents 3. 속성,설정값은 어디에 위치하는가 contents 예시1) contents 예시2) contents +) 예시2의 img태그는 닫는 태그가 없는데 이를 empty element라고 한다 4. HTML5를 선언.명시해야하는 이유는? HTML은 버전별로 지원하는 태그가 다르기에 어떤 버전으로 작성되었는지 미리 선언하여 브라우저가 버전에 맞는 내용을 표시하도록 하기 위함.. 2019. 6. 4.
반응형

티스토리툴바