일반적으로 하나의 웹페이지를 개발할 때,
html, css, 그리고 javascript 세 종류의 파일에 코드를 분리해서 저장한다.
html 문서의 구조
<!DOCTYPE html>
<html lang="en">
<head>
<!--
디자인을 지정하는 css파일은 head 태그내부에 link태그로 연결해준다.
-->
<link rel="stylesheet" href= "css/stylesheet.css"></link>
</head>
<body>
<!-- 대충 script를 제외한 이런저런 태그들 -->
<!--
웹페이지의 동작을 구현하는 javascript 파일은
body 태그내부의 최 하단부에 scirpt태그를 통해 연결해 준다.
-->
<script src="js/app.js"></script>
</body>
</html>
사실 스타일을 지정하거나, 브라우저의 동작을 지정할 코드들도
html 문서 내부에 충분히 작성할 수 있다.
그렇다면 대체 왜 개발자들은
css파일과 javascript파일을 따로 분리해서
html 파일에 연결해 주는 방식을 택한 것일까?
html 파일 하나에 모두 작성하지 않는 이유!
를 CSS와 javascript 를 통한 html 태그의 조작을
간단히 소개하면서 살펴보겠다.
CSS (Cascading Style Sheets)?
CSS는 HTML와 같은 웹페이지 구성요소의 스타일을 지정하는 언어이다.
CSS코드를 HTML 내부에서 사용하는 방법
HTML element(요소)의 style attribute(스타일 속성)에
원하는 디자인을 지시하는 CSS코드를 입력해 주면 된다.
<h1 style="color: red"></h1>바로 이렇게 말이다.
순수 html 구성 웹페이지를 통해 스타일적용을 연습해 보자.
순수 HTML만으로 구성되어 있는 웹페이지를 캡처한 사진이다.
이 웹페이지에는 자바스크립트, CSS 전부 사용되지 않았다.
CSS 코드를 활용해 맨 위의 World Wide Web을 붉은색으로 바꿔보자
바뀐 웹페이지의 모습
이처럼 html 태그의 style 속성으로 CSS코드를 직접 기입함으로써 스타일을 번경할 수 있다.
하지만 이렇게 일일이 태그별로 스타일 속성을 지정해 주면 발생하는 문제가 있다.
굉장히 번거로운 것은 둘째고, 일단 html 문서의 가독성이 굉장히 하락하게 된다.
즉 순수하게 웹페이지 구조에 집중하기 힘들게 된다.
그래서 결국 html문서의 스타일을 관리하기 위한
stylesheet.css라는 파일을 따로 만들어 그 안에 CSS를 입력하게 되었다.
html의 head 태그 내부에 link 요소를 추가함으로써 CSS 파일을 불러온다.
<head>
<link rel="stylesheet" href="style\stylesheet.css">
</head>
CSS가 html의 속성에서 분리되었으므로
stylesheet.css 파일 내부에서 html요소를 선택할 방법이 필요하다.
그래서 css 선택자가 쓰인다.
CSS선택자와 class를 적절하게 활용하면,
여러 html 태그의 디자인도 한 번에 번경할 수 있다.
<p style="color: tomato"> 토마토 </class>
<p style="color: teal"> teal </class>
<p style="color: tomato"> 토마토 </class>
<p style="color: teal"> teal </class>
위의 코드를 아래와 같이 바꿀 수 있다.
<style>
.tomato {
color:tomato;
}
.teal {
color: teal;
}
</style>
<p class="tomato"> 토마토 </class>
<p class="teal"> teal </class>
<p class="tomato"> 토마토 </class>
<p class="teal"> teal </class>
즉 HTML 구조의 가독성을 높이고, 디자인 코드의 재사용성을 높이기 위해
CSS파일은 HTML 문서로부터 분리되었다.
Javascript?
자바스크립트는 웹브라우저에서 구동되는 프로그래밍언어로, 웹페이지의 동작을 구현하는 데 사용된다.
자바스크립트에서 DOM API를 이용하면
querySelector 또는 , getElementBy 시리즈 등의 메서드들로 HTML 요소를 선택 및 조작할 수 있다.
이러한 작업은 <script> 태그에 원하는 자바스크립트 코드를 입력함으로써,
html 문서 내부에서 해결해 줄 수 있다.
<!DOCTYPE html>
<body>
<h1>Hello</h1>
<h2>Bye</h2>
<script>
const $h1 = document.querySelector("h1");
$h1.innerText = "Hi";
</script>
</body>위의 코드는 <script> 태그를 이용해서
h1의 "Hello"를 "Hi"로 번경해주고 있다.
하지만 css와 마찬가지로, 유지 보수 및 html문서의 가독성문제로
javscript 파일을 따로 분리해서 작성하고 있다.
<script> 태그의 내부에 직접 자바스크립트 코드를 입력하는 대신,
src 속성에 분리된 자바스크립트파일의 경로를 집어넣는 방식을 채택하고 있다.
<script src="./js/app.js"></script>
이렇게 html 문서로부터 css, javascript 파일을 분리함으로써
문서의 가독성을 높이고, 웹 디자이너 및 개발자 간의 효율적인 분업이 가능하게 되었다.
사실은 이렇습니다
브라우저가 웹페이지를 랜더링 할 때,
HTML을 파싱 해서 DOM (Document Object Model)이라는 구조를 만들고
CSS를 파싱 해서 CSSOM(CSS Object Model)이라는 구조를 만든다.
DOM은 HTML 요소별 속성 및 텍스트를 표현한 트리구조이다.
CSSOM도 비슷하다. HTML 요소별 디자인 스타일 속성을 표현한 트리구조이다.
이 둘을 만드는 작업이 끝나면 두 모델의 정보를 토대로 Render Tree를 만든다.
그 완성된 Render Tree를 토대로 웹페이지를 구성하여 유저(client)에게 보여준다.
이과정에 걸리는 작업속도를 단축하기 위한 배치가
바로 다음과 같다.
1. <link>:css 파일
2. 웹페이지 구성 html
3. html의 끝단에 <script>: javascript 파일
css가 먼저 나오는 이유
브라우저는 html의 코드를 위에서부터 아래로 차례대로 읽어가며 DOM을 만든다.
이때 script나 style, link 등의 태그를 만나면
그 태그를 해석하기 위한 정보를 서버에 요청한다.
이후 서버로부터 응답을 받아 해당 태그에 입력된 동작을 수행한 후
(*style 태그의 경우 CSSOM 생성 및 변형, script태그의 경우 DOM. CSSOM 변형)
다시 html문서로 돌아와 다음 태그를 파싱 하기 시작한다.
이 과정에서 html 태그들에 style 속성이 마구마구 배치되어 있는 경우
불필요한 응답, 요청 프로세스가 증가하며 DOM 및 CSSOM 생성 속도가 느려진다.
그래서 style정보를 html 속성에 직접 입력하지 않고
head 부분에 link 태그로 집어넣어서 따로 분리하게 된 것이다.
<p style="color: red">red text</p>
<p style="color: blue">blue text</p>
<p style="color: tomato">tomato text</p>red text
blue text
tomato text
(평범해 보이지만 위의 세 문장은 3번의 요청-응답 프로세스가 들어가 있는 콤비네이션이다.)
script가 나중에 나오는 이유
javascript를 이용하여 HTML이나 그 CSS 디자인을 조작하게 될 경우
이미 생성되어 있는 DOM이나 CSSOM을 변형하게 된다.
만약 script 태그가 조작하는 html 태그들보다 위쪽에 있을 경우
DOM에 자바스크립트로 조작될 성분들이 애초에 존재하지 않을 수 있다.
그 결과 자바스크립트가 의도한 대로 동작하지 않고,
생각했던 것과 다른 결과의 웹페이지를 얻을 수 있다.
그래서 script 태그를 body 태그의 최하단에 위치시키는 것이다.
또 기본적으로 DOM과 CSSOM을 HTML 문서 중간에서 수시로 조작할 경우,
Render Tree가 완성되는 시간이 늦어진다.
당연히 유저가 웹페이지에 접속했을 때, 화면이 제공되기까지의 응답시간도 길어진다.
이러한 이유로 현재 개발자들은 link -기타 태그 - script의 순서로 html 문서를 작성하고 있다.
하지만 만약 당신이 오직 당신만을 위한 프로그램을 만드는 중이라면 이런 건 아무 상관없다.
읽어주셔서 감사합니다.
오타 및 오류를 발견하신 분은 댓글로 알려 주세요.
읽어주신 분들 모두 대성하세요!
'it공부 (개념) > 웹' 카테고리의 다른 글
| HTML의 Form(폼) 태그가 새로고침을 유발하는 이유: URL 리다이렉션(Redirection) (0) | 2023.03.16 |
|---|---|
| Express: 웹페이지 표현을위한 NodeJS 웹 프레임워크 + get,use,set (0) | 2023.02.27 |
| WebRTC 연결에 대한 개괄적 설명: 웹 브라우저간 실시간 통신API를 공부하고 줌, 디스코드와 같은 프로그램을 만들어보자 (0) | 2023.02.09 |