21,22,23,24일차 - HTML, CSS, JS

CLIENT-SERVER

 

Web Browser(브라우저)

■ 브라우저는 사용자의 요청을 서버(Web Server)에 요청하고, 응답 받은 코드 형태의 문서(HTML, CSS, JS)를 해석하여 화면에 보여준다

□ 렌더링, 쿠키 처리, 캐싱 기능은 사용자-서버 간의 인터페이스, 접점 같은 역할들을 수행한다

□ 크롬, 사파리, 엣지 등 브라우저는 본인들만의 규격을 통해 문서를 해석한다(약간씩 결과가 차이가 있음)

□ HTML, CSS, JAVA SCRIPT, J-QUERY

Web Server(웹 서버)

■ 웹 브라우저로부터 요청을 받아 정적인 콘텐츠(HTML, CSS)를 처리해준다 나머지 동적인 컨텐츠는 WAS 에게 맡기고, 그 결과를 응답받으면 완성된 문서를 브라우저에게 보내준다

□ JAVA, JAVA SCRIPT

Web Application Server (와쓰 서버)

■ 요청에 관련한 데이터를 데이터베이스에서 가져오고, 비즈니스 로직을 통해 동적인 컨텐츠를 웹서버에게 다시 전달해준다

□ MY-SQL

---

Front-End

HTML (구조)

■ 웹 페이지(지금 보고 있는 이 화면)를 작성하기 위한 마크업 언어이다 브라우저로 통해 문서를 해석하여 사용자가 웹 페에지를 읽을 수 있다

■ 태그는 트리 구조로 하나의 문서로 이루어진다(나중에 DOM 를 배우게 되면 알게 된다)

 

자주 사용되는 태그

Input TAG

<input type="checkbox" name="vehicle3" value="Boat"/>

■ input 에 있어서 가장 필수 적인 속성은 name 과 value 이다.

■ name 은 보낼 값(value)에 대한 항목 이다.

■ value 는 보내는 항목(name)에 대한 값 이다.

https://www.w3schools.com/html/html_form_input_types.asp

HTML Input Types

Form TAG

<form action="" method="post">

	<!--서버에게 전달할 요청에 대한 내용-->
    
</form>

■ action 은 데이터를 전달할 서버 이름 적어두는 것이다

■ method 는 GET, POST 중 어떤 방식을 선택하여 전송할지 선택한다

CSS (디자인)

■ 웹 페이지의 화면에 스타일과 레이아웃을 담당하는 문서이다

기본 구조

■ 문서 내 특정 요소를 선택하기 위해서는 셀렉터 영역에 아이디, 클래스, 태그로 지정하여 속성을 바꿀 수 있다

영역

■ Margin : 다른 요소들 간의 거리두기 간격을 의미한다■ Padding : Border(선) 과 Content 사이의 여백을 나타내는 영역이다

---

JAVA SCRIPT (동작)

프론트엔드에서 자바스크립트 역할

■ 문서내의 객체와 요소들의 속성을 변경할 수 있다

■ 객체 형태의 데이터를 서버와 주고 받을 수 있다

자바와 차이점

■ 변수를 선언할 때 데이터타입을 명시하지 않고, 어떤 값의 형태이든 상관없이 할당할 수 있다

■ 함수를 선언할 때 반환 타입을 명시하지 않는다 또한 앞서 설명한 변수로 매개변수도 타입을 명시하지 않아도 된다

배열

■  선언할때 데이터타입을 명시하지 않고, 어떤 값의 형태이든 상관없이 넣을 수 있고, 함수도 들어간다 함수를 호출도 할 수 있다

□ SHIFT : 앞에서 요소를 확인하고 삭제한다

□ UNSHIFT : 앞에서 요소를 추가하고 기존 요소들은 한칸씩 밀린다

□ POP : 뒤에서 요소를 확인하고 삭제한다

□ PUSH : 뒤에서 요소를 추가하고 기존 요소들은 별다른 영향은 없다

Shallow copy 

■ 두개의 배열이 참조하는 주소값이 동일하면, 하나의 배열이 요소를 변경하게 되면 다른 하나의 배열도 바뀐다

Object

■ 배열이나 오브젝트는 여러 데이터를 담을 수 있다, 담긴 값을 속성이라고 한다

■ Object.keys(오브젝트) 로 키의 집합을 사용할 수 있다

□ 향상된 FOR문으로 키의 집합을 임시 변수에 담아 이를 통해 값을 가져온다 

 

 

 

 

1. 자바스크립트와 자바의 변수는 차이점이 뭐가 있었죠?

자바스크립트는 값의 형태를 따지지 않고 모든 정수, 실수, 문자등을 다 담을 수 있다 자바는 반드시 변수를 선언할때 변수의 형태를 명시하고 선언해야한다

2. 자바스크립트에서 함수에는 없는데 자바에는 있는것은?

자바에서는 함수의 반환 타입이 있지만 자바스크립트가 없다 또한 매개변수의 데이터타입을 정해주지 않아도 된다 1번의 이유와 동일하다

3. 자바스크립트의 함수의 구성요소들을 모두 말하시오.

함수의 이름, 함수의 매개변수(타입이 없음) 

4. 자바와 자바스크립트의 배열의 차이점을 설명하시오.

자바는 배열에 들어가는 요소들의 데이터 타입을 명시해야하지만, 1번과 동일한 이유로 자바스크립트에서는 데이터타입을 지정하지 않아도 된다 또한 자바스크립트에서는 함수도 들어갈 수 있다

5. 배열의 쉬프트, 언쉬프트, 팝, 푸쉬의 메소드의 역할을 모두 설명하시오

-쉬프트 앞에서 요소를 추가하는것

-언쉬프트 뒤에서 요소를 빼는것

-팝 뒤에서 요소를 빼는것

-푸쉬 앞에서 요소를 추가하는것

6. 슬라이스는 무엇인가요?

7. 샬로우 카피는 무엇인가요?

두개의 배열이 참조하는 주소값이 동일하면, 하나의 배열이 요소를 변경하게 되면 다른 하나의 배열도 바뀐다

8. 자바스크립트에서 여러 데이터를 담을 수 있는 것들은?

9. 오브젝트에서 키의 집합을 가져오는 방법은?

10. 배열의 값을 하나씩 꺼내오는 세가지 방법을 모두 설명하시오.

11. Document 를 이용해 문서의 특정한 요소를 가져오는 세가지 방법을 모두 설명하시오

12. 겟엘리먼트, 겟엘리먼트츠의 문서로부터 받아내는 방식의 차이점을 설명하시오

13. 쿼리셀렉터는 무엇인가요?

CSS 셀렉터를 이용한거잖아 하나밖에 못가져온다

14. HTML 태그의 속성을 두가지로 분류할 수 있었다 그 두가지는?

일반 속성과 사용자 속성이 있다

15. 속성을 변경하고 싶을때 점 찍어서 들어가는 방식과 셋어트리뷰트 메소드 이용하는 방식의 차이점은?

셋어트리뷰트는 사용자 속성도 수정할 수 있는 장점이 있다