browser에서의 웹 개발
HTML 문서구조
① 크롬 브라우저 설치
② 크롬 개발자 도구 열기 (윈도우 : Ctrl + Shift + i || 맥 : Option + Command + i)
└ 보통의 경우, 코드가 잘 동작 되는지 확인하는 디버깅 과정을 위해 개발자 도구를 사용한다.
③ 문서구조를 알아보고 싶은 웹사이트에 접속
└ 주소를 입력하고 Enter를 치는 순간 서버로 요청이 간다. 그때 서버에서 응답한 값을 Response 항목에서 확인할 수 있다. 다시 말해 Response는 서버에서 첫 번째로 보내주는 소스 코드라고 할 수 있다.
알게 된 몇 가지 특징
① HTML 문서는 html이라는 태그로 시작해 html 태그로 끝난다.
② head는 HTML 문서에 대한 추가적인 설명을 담고 있다.
③ body는 화면에 표현되어야 하는 div 같은 태그를 포함한다.
④ HTML은 계층적이다.
⑤ HTML은 tag를 사용해서 표현한다.
<tag class="title">안녕하세요</tag>실습코드
<!doctype html> //doctype은 문서 타입의 시작을 알린다.
<html>
<head>
<meta charset="utf-8"> // meta에는 문서 정보가 담긴다. 출력되지 않음.
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>저를 소개합니다</title>
<link rel="stylesheet" href="css/style.css"> // CSS 코드가 많아지면 외부 파일로 링크를 달아 넣어준다.
<script src="js/start.js"></script> // Javascript 코드가 많아질 경우의 외부 파일 링크.
</head>
<body> // body에 출력 내용을 작성한다.
<h1>안녕하세요</h1>
<div>개발자를 꿈꾸는 겨울입니다.</div>
<script src="js/library.js"></script>
<script src="js/main.js"></script>
</body>
</html>- HTML 문서 안에는 HTML태그뿐 아니라 CSS, JavaScript코드가 존재한다.
- 브라우저는 한 라인씩 해석한다. JavaScript 코드가 있다면 서버로 요청을 보내 받아온 다음 바로 해석한다. 해석 결과 바로 실행되어야 하는 JavaScript 코드가 있다면 실행까지 마치고 나서야 다음 라인으로 향한다.
- CSS코드는 head 안에 위치해서 렌더링 처리 시 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>boostcourse</title>
<script>
alert(1) //실행하면 1이 먼저 출력된다.
</script>
</head>
<body>
<div>웹프론트엔드</div> //마지막으로 출력된다.
</body>
<script>
alert(2) //body의 웹프론트엔드 출력을 건너뛰고 2가 출력된다.
</script>
</html>- JavaScript 코드는 body 태그가 닫히기 전에 위치하는 것이 렌더링을 방해하지 않아서 좋다. 위쪽에 위치할 경우, 브라우저가 JavaScript 코드를 다운로드 및 해석하느라 HTML 해석이 느려질 수 있다.
- Javascript 파일을 하단에 위치시키는 것이 일반적이지만, defer / async 속성을 사용해 선언한 곳과 스크립트 실행 시점을 분리할 수도 있다. | script: 스크립트 요소
개발의 이해도를 높이기 위해 여러 사이트의 Network 탭을 보면서 어떻게 실행되고 어떤 코드들이 존재하는지 살피도록 하자.
