Part 01 웹 프로그램 언어의 기초_06

Naver BoostCourse Full-Stack Developer Course

Part 01 웹 프로그래밍 기초

05. browser에서의 웹 개발

※ Intro

- 웹 클라이언트 코드는 브라우저 안에서 동작함

- HTML, CSS, JavaScript 의 실제 소스코드를 보면서 웹페이지 소스의 구성을 살펴보자.

※ 학습 목표

1. HTML 요청 이후 브라우저에서 해석되는 웹페이지(HTML) 안의 내용 구성과 소스코드를 어떻게 위치시키면 될지 이해

※ 핵심 개념

- Browser 안에서 동작할 수 있는 HTML, CSS, JavaScript 의 코드 구현 방법

※ HTML 문서구조

- 뜯어보자 웹 사이트!

- 크롬 브라우저 설치하기

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

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

※ 알게된 몇가지 특징

- HTML 문서는 html 이라는 태그로 시작해서 html 태그로 끝난다.

- head는 무엇을 하는걸까?
- body는 무엇을 하는걸까?

- HTML 은 계층적이다.

- HTML은 tag를 사용해서 표현함

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

- JavaScript 와 CSS가 html 안에 여기저기 존재함

- HTML 문서 안에 HTML 태그뿐 아니라 CSS, JavaScript 코드가 존재함

- JavaScript 코드는 body 태그 닫히기 전에 위치하는 것이 렌더링을 방해하지 않아 좋고, css 코드는 head 안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋음