들어가기 전에
웹 클라이언트 코드는 브라우저 안에서 동작합니다.
HTML, CSS, JavaScript의 실제 소스코드를 보면서 웹페이지 소스의 구성을 살펴봅니다.
학습 목표
- HTML 요청 이후 브라우저에서 해석되는 웹페이지(HTML) 안의 내용구성과 소스코드를 어떻게 위치시키면
될지 이해한다.
핵심 개념
- Browser 안에서 동작할 수 있는 HTML, CSS, JavaScript의 코드구현 방법
학습하기
들어가기 전에
웹 클라이언트 코드는 브라우저 안에서 동작합니다.
HTML, CSS, JavaScript의 실제 소스코드를 보면서 웹페이지 소스의 구성을 살펴봅니다.
학습 목표
핵심 개념
학습하기
실습코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>저를소개해요</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/start.js"></script>
</head>
<body>
<h1>안녕하세요</h1>
<div>코드스쿼드 크롱이라고 합니다</div>
<script src="js/library.js"></script>
<script src="js/main.js"></script>
</body>
</html>
HTML 문서 안에 HTML태그뿐 아니라 CSS, JavaScript코드가 존재합니다.
JavaScript 코드는 body 태그 닫히기 전에 위치하는 것이 렌더링을 방해하지 않아도 좋고, css코드는 head 안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋습니다.
참고 자료
http://www.jsbin.com
https://www.edwith.org
comment
24.03.28.
1. Java script는 닫히는 </body> tag 위에 입력을 해준다.
2. css 코드는 <head> tag 안에 <title> css </title> 밑에 입력 해준다.
1. 자바스크립트는 바디태그 안에 넣기
2. css코드는 head 안에 넣기
HTML, CSS, JS 를 다뤄볼 수 있었다.
일반적으로 바디태그 다음에 스크립트를 두는 것이 합리적인 구조이다. 스크립트 코드가 렌더링을 방해하기 때문임.
23.01.05
22.12.20
2022.12.14
수강완료
22.08.14
HTML문서안에 CSS, JS코드가 존재할수있다. js는 페이지를 동작시키는 목적이므로 body태그보다 앞서있다면 예상대로 페이지가 나오지않을수있으므로 html이 끝나는시점 , 즉 body뒤쪽에 위치시키는게 그나마 좋은 방법이다
2022.7.25
2022.06.29
2022.06.27
2022.04.12
2022.03.07
2022.02.14
2022.0208
자바스크립트 코드는 <body> 태그가 닫히기 전에 위치하는 것이 랜더링을 방해하지 않아 좋고,
CSS 코드는 <head> 안에 위치해서 랜더링 처리 시에 브라우저가 더 빨리 참고할수 있도록 하는 것이 좋음
2022.2.3
220128
-javascript는 css 아래에 (body아래) 작성한다. css 코드 읽는 것을 방해하기 때문