HTML문서 구조
특징
- HTML 문서는 html이라는 태그로 시작해서 html 태그로 끝난다.
- head : html의 문서에 대한 추가적인 설명을 담고 있다. 문서의 자세한 정보들이 포함되어 있다.
- body: 화면에 표현되어야 할 부분들이 포함되어 있다. 예) <div>
- HTML은 계층적으로 존재한다.
- HTML은 tag를 사용해서 표현한다.
- JavaScript와 CSS가 html안에 여기저기 존재한다.
* response : 서버에서 응답 값을 보내준 첫 번째 소스 코드
실습코드
<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태그 밖에 위치할 경우 body태그가 끝나는 부분에 넣어주는 것이 일반적이다. 위쪽에 넣으면 HTML과 browser를 해석하는 동안 JavaScript 코드를 해석하느라 HTML 해석이 느려질 수 있기 때문에 JavaScript코드는 아래쪽으로 넣어준다.
* css 코드는 head 안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋다.
* css코드 또는 JavaScript 코드가 많아졌을 경우 외부 파일로 불러서 링크 또는 스크립트로 넣어줄 수 있다.
참고 : boostcourse https://www.boostcourse.org/web316/lecture/254258/?isDesc=false
웹 프로그래밍(풀스택)
부스트코스 무료 강의
www.boostcourse.org
'boostcource > boostcourse_web programming' 카테고리의 다른 글
| WAS ( Web Application Server) (1) | 2024.04.02 |
|---|---|
| 웹서버 (0) | 2024.04.01 |
| browser의 동작 (0) | 2024.04.01 |
| 백엔드 (Back-End) (0) | 2024.03.31 |
| 프론트엔드(Front-End) (0) | 2024.03.30 |
