browser에서의 웹 개발

웹 클라이언트 코드는 브라우저 안에서 동작한다. HTML, CSS, JavaScript의 실제 소스코드를 보면서 웹페이지 소스의 구성을 살펴보자.

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

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

- 뜯어보자 웹사이트 !

· 크롬 브라우저에서 개발자도구(Ctrl + Shift + i) 열기 : 브라우저에서 직접 코딩하는 것이 아니라 작서한 코드가 잘 동작되는지 확인, 디버깅

- 알게 된 몇가지 특징

· HTML 문저는 <html> 태그로 시작해서 <html> 태그로 끝난다.

· <head>는 무엇을 하는걸까? : HTML 문서에 대한 화면에 보이지 않는 추가적인 설명을 담고있다.

· <body>는 무엇을 하는걸까? : 화면에 표현되어야 할 것들이 포함되어 있다.

· HTML 문서는 계층적이다.

· HTML 문서는 tag를 사용해서 표현한다 : <tag class="title>안녕하세요</tag>

· JavaScript와 CSS가 html안에 여기저기 존재한다.

· JavaScript 코드는 브라우저 렌더링을 방해할 수 있으니 body 밑부분에 적어주는게 보편적 : 브라우저 렌더링이란 화면에 어떻게 보여줘야될지 결정하는 것

· CSS 코드는 head 안에 위치해서 렌더링 처리시 브라우저가 더 빨리 참고할 수 있게 하는 것이 보편적

👩🏻‍💻 hzoou is growing up