스페셜스터디

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

학습목표

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내에 넣을 수 있지만

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

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

정리