스페셜스터디

우리가 웹페이지를 보면 다양한 글자들이 있습니다.

학습목표

• CSS없이 먼저 HTML 구조를 짤 수 있다.

핵심개념

• font-size

• background-color

• font-family

학습내용

font색상변경방법

color: red;

color: rgba(255,0,0,0.5);

rgb로 색상을 설정할때 a를 붙여

알파값으로 색상의 명도를 조절할 수 있다.

color:#ff0000; //16진수 표기법은

반복되는것은 줄여서 #f00 와같이 나타낼수 있다.

font사이즈변경

font-size: 16px;

font-size: 1em;

em은 기본값대비하여 상대적으로

나타낸다. 2배면 2em 3배면 3em이런식으로

나타내면된다. 만약 위에 부모의값이

달라지면 그대로 상속받아 기본값을 바꿀 수 있다.

배경색

background-color:#ff0;

background-image, postion, repeat 등의 속성이 있다.

글꼴

font-family:"Gulin"

정리

웹 클라이언트 코드는 브라우저 안에서 동작합니다.

학습목표

1.HTML 요청 이후 브라우저에서 해석되는 

웹페이지(HTML)안의 내용구성과 소스코드를

어떻게 위치시키면 될지 이해한다.

학습내용

브라우저 Internet Explorer, Chrome, Firefox 등

크롬브라우저를 열고 크롬개발자도구 열기

(크롬브라우져가 없다면

(https://www.google.com/intl/ko_ALL/chrome/ 에서 다운로드)

크롬개발자도구 여는법

윈도우(Ctrl + Shift + I), 맥(Option+Command+i)

접속:http://www.amazon.com

코드보기

Network 탭의 Reponse탭에서 가장처음 www.amazon.com이

처음 서버에 요구했을때 응답하는 코드를 볼 수 있다.

HTML안에 자바스크립트,CSS코드가 복잡하게

구현되어 있다.

HTML문서의 특징

• HTML문서 html태그로 시작하여 html태그로 끝난다.

• head 태그는 HTML의 추가적인 설명을 담고 있다.

• body 태그는 화면에 표현에 되어야할 내용을 담고 있다.

• HTML은 계층적이다.

• HTML은 tag를 사용해서 표현한다.

<tag class="title">안녕하세요</tag>

JS Bin이라는웹사이트에서 소스코드를

구현하여 테스트해보고 사람들과 공유할 수 있다.

JSBin사이트 바로가기

<코드>

<결과>

-스크립트를 HTML태그 내에 삽입하여 콘솔화면에 출력한 결과이다.

<코드>

<결과>

-CSS로 Styel태그를 이용하여 글자의 색을 변경한 모습이다.

JavaScript와 CSS는 HTML내에 넣을 수 있지만

그렇게 되면 파일의 크기가 늘어남으로

따로따로 파일로 분리해서 사용할 수 있다.

정리

4)브라우져의 동작

WWW를 통해 전달되는 데이터가

어떻게 해석될것인가?

서버에서 온 데이터가 해석되는 곳이 브라우져 입니다.

Ex)구글 크롬, 인터넷 익스플로러 등

브라우져에는 데이터를 해석해주는

'파서'와 데이터를 화면에 뿌려주는 '렌더링엔진'이

있습니다.

이러한 브라우져 내부동작에 대해 반드시 알아야 하는것은

아니지만 내부를 이해하면 웹개발의 난해한 문제와

최적화된 웹 개발을 할 수 있습니다.

학습목표 

1.HTML 파일이 올때 브라우져의 렌더링 과정에 대해 이해한다.

학습내용

웹페이지의 소스가 브라우져가 어떻게 해석할까?

브라우져의 동작을 잘 알고 표현과 최적화를 잘 할 수 있다.

브라우져는 브라우져 컴포넌트로 구성되어 있다.

-유저 인터페이스

-브라우져 엔진

-렌더링 엔진

-네트워킹, 자바스크립트 해석, 유저인터페이스 백엔드 기타 등등...

렌더링 엔진이란?

브라우져의 핵심이 되는 요소로 

소스코드를 해석해서 화면에 뿌려주는

컴파일러 같은 역할을 함.

Ex.)파이어폭스:Geckko 사파리:WebKit 크롬,오페라:Blink

※크롬은 현재 크로니움으로 변경됨

브라우져 엔진의 흐름

HTML 파싱:문자 하나 하나를 DOM(Document Object Model)

의 트리 형태로 구조화 시킨다.

렌더 트리 구조화

렌더 트리 레이아웃화: CSS와 합쳐서 배치를 결정한다.

렌더 트리 출력

화면에 표시

일반적인 파싱 방법

문자와 숫자를 토큰 단위로 자른다.

신택스 트리를 만든다.

HTML 파서

마크업은 DOM구조가 다음과 같다

HtmlElement

bodyelement

ParagraphElement(텍스트), DivElement

CSS 파서

CSS Rule

셀렉터:(클래스나 id 같은)

선언:키-값으로 구성된 선언

정리

1.스크롤을 하거나 클릭하면 브라우져는

어떻게 화면을 그릴까?

=>필요에 따라 다시 렌더링 할 것이다.

2.위에서 표현된 그림처럼 다시 렌더링되지 않을까?

=>중복되는 내용은 쿠키에서 불러와서 리플로우 과정 반복을

줄일 수있을 것이다.

웹 프론트엔드와 웹 백엔드

웹은 프론트엔드와 백엔드로 나뉘어진다.

브라우저를 프론트엔드 또는 클라이언트라 하고,

인터넷 유저에게 보여지지 않는 부분을 

백엔드라 한다.

학습목표

1.웹 프론트엔드에 대한 역할과 기술적 구성

2.웹백엔드에 대한 역할과 기술적 구성

웹 프론트엔드

사용자에게 다양한 데이터(문서,동영상,이미지 등)을 제공한다.

그리고 사용자의 요청에 반응해서 동작한다.

역할

구조를 만드는 과정(책이나 신문처럼)

적절한 배치(보기 좋게)

사용자요청에 반응(소통하듯이 부드럽고 빠르게)

HTML, CSS ,JavaScript

실습

크롬브라우져에서 평소 자주 이용하는 웹사이트를

웹사이트 도구로 살펴보기

HTML의 구조는 계층적으로 되어 있다.

CSS는 폰트의 크기, 사이즈 등 웹페이지의 스타일을 결정한다.

JavaScript는 서버의 동적인 부분을 담당한다.

웹 백엔드

백엔드는 프로그램의 뒷쪽, 서버입장에서

개발이 진행된다.

백엔드는 서버사이드(Server Side)이다.

백엔드 개발자는 클라이언트의 요청을

받아 일을 처리한 후에 결과를 넘겨주는

부분을 개발한다.

=>클라이언트 부분의 문제 해결파트

백엔드 개발자가 알아야할것

-프로그래밍 언어(JAVA,Python,PHP 등)

-웹의 동작원리

-알고리즘, 자료구조등 기반 지식

-운영체제, 네트워크에 대한 이해

-프레임워크에 대한 이해(Spring 등)

-DBMS(데이터베이스 관리소프트웨어)

에 대한 이해(예:Mysql, Oracle, MiracleSQL 등)

2)웹의 동작 (HTTP 프로토콜 이해)

학습목표

학습목표

1.HTTP 프로토콜의 작동방식에 대해 알아본다.

2.HTTP 프로토콜의 요청/ 응답 데이터 포맷에 대해 알아본다.

학습내용

정리

<참고자료>

요청메서드:GET, PUT POST, PUSH, OPTIONS의 요청방식 등이 있다.

GET : 정보를 요청하기 위해서 사용한다. (SELECT)

POST : 정보를 밀어넣기 위해서 사용한다. (INSERT)

PUT : 정보를 업데이트하기 위해서 사용한다. (UPDATE)

DELETE : 정보를 삭제하기 위해서 사용한다. (DELETE)

HEAD : (HTTP)헤더 정보만 요청한다. 해당 자원이 존재하는지 혹은 서버에 문제가 없는지를 확인하기 위해서 사용한다.

OPTIONS : 웹서버가 지원하는 메서드의 종류를 요청한다.

TRACE : 클라이언트의 요청을 그대로 반환한다. 예컨데 echo 서비스로 서버 상태를 확인하기 위한 목적으로 주로 사용한다.

<개념 확인>

1.HTTP에 S가 붙은 HTTPS는 어떤 용도로 사용되는가?

=HTTP에 S를 붙인 HTTPS는 기존의 프로토콜에

보안을 강화한 것으로 보안을 유지해야할 통신에 사용되는 규약이다.

보안이 필요한 인터넷뱅킹, 공공기관 홈페이지 등에 사용된다.

웹 프론트앤드

학습목표

웹 프론트엔드

CSS의 특성을 잘 알아야한다.

웹 백엔드

클라이언트와 서버간의 상호작용을

잘 이해한다.

학습내용

정리