오늘도 개발
HTML, CSS, Javascript의 역할 본문
1. HTML, CSS, Javascript
HTML(HyperText Markup Language)
웹페이지를 만드는 언어.
웹페이지의 뼈대 역할.
CSS (Cascading Style Sheets)
HTML 요소를 꾸며주는 언어.
웹페이지를 꾸미는 역할.
JavaScript
유저가 HTML 요소와 상호작용할 수 있게 해주는 언어.
웹페이지 움직이는 역할.
2. HTML 파일에 CSS, Javascript 연결하는 방법
1) Inline
HTML 파일 내 적용 할 요소에 바로 css/js 코드 작성.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<h1 style="color:blue">파란색 제목</h1>
<button onclick="alert('clicked!')">클릭</button>
</body>
</html>
2) Internal
HTML 파일 내 헤드 부분에 css/js 코드 작성
css는 <style> 태그 속에, js는 <script> 태그 속에 작성.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
h1 {
color: blue;
}
</style>
<script>
alert(1);
</script>
</head>
<body>
<h1>파란색 제목</h1>
</body>
</html>
3) External
따로 css/js 파일 만든 후, HTML에 링크 작성해서 연결.
css는 <link> 태그로 , js는 <script> 태그로 연결.
장점 : HTML과 css, js를 별도의 파일로 관리 -> HTML 문서 가독성이 높아지고 유지보수하기도 편리.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>파란색 제목</h1>
</body>
</html>
3. HTML 문서에서 script 태그 위치에 따른 차이점
script 태그는 html 문서의 헤드에도 바디에도 넣을 수 있음.
브라우저의 동작
1. 브라우저가 HTML 읽기 시작
2. 브라우저의 렌더링 엔진이 HTML 파싱(소스코드 -> 컴퓨터 언어로 변환)
3. 파싱한 HTML, CSS 코드 토큰화(의미 단위로 쪼갬)
4. Parse Tree 생성
5. DOM tree 생성
6. 브라우저 화면에 렌더링
DOM(Document Object Model)
HTML의 각 요소를 object로 만들고 트리 구조로 엮어서 나타낸 것.
1) script 태그를 헤드에 넣는 경우
브라우저는 html 코드를 하향식으로 파싱함.
렌더링 엔진은 script 태그를 만나면 html 파싱을 중단하고 스크립트 파일을 로드함.
=> script 파일이 큰 경우, body의 html을 파싱하기까지 긴 시간 소요
script 태그가 헤드에 있으면 바디의 html을 파싱하기 전에 자바스크립트 코드가 실행됨.
=> script 파일에 DOM을 조작하는 코드가 있는 경우 오류 발생.
2) script 태그를 바디 끝에 넣는 경우
html 파싱이 완료된 후 script를 로드하므로 위와 같은 문제 x.
3) async, defer 사용
script 태그에 async나 defer 사용하면 렌더링 엔진이 script 태그를 만나도 파싱을 중단하지 않음.
async : html 파싱 완료 여부와 상관없이 스크립트 로드하고 실행. 스크립트 실행 시 파싱 중단.
defer : html 파싱을 완료한 후 스크립트 실행.
<script async src="script1.js"></script>
<script defer src="script2.js"></script>
4. Event와 Javascript
Event란?
웹페이지에 일어나는 사건(버튼 클릭, 키보드 키 누름 등)
1) event 발생 -> js 엔진이 message queue에 발생한 event 저장.
2) 모든 FEC(Function Execution Stack)이 return하면
3) js 엔진이 message queue의 event를 하나씩 프로세싱하고 event listener 호출.
Event Listener
특정 event가 일어나길 기다렸다가 event가 일어나면 실행되는 function
출처
'웹 프로그래밍 > 웹의 이해' 카테고리의 다른 글
| OSI 참조 모델과 TCP/IP (0) | 2022.05.26 |
|---|---|
| HTTP(HyperText Transfer Protocol) (0) | 2022.05.25 |
| 2. 웹의 개요 (0) | 2022.05.24 |
| 1. 인터넷의 개요 (0) | 2022.05.22 |
| 서버와 클라이언트란? (백엔드와 프론트엔드란?) (0) | 2022.05.12 |
