1. 역할
1) HTML(Hyper Text Markup Language)
웹의 전체적인 구조를 형성한다. 틀을 세우고, 그 안에 구성을 정의하는 것이 HTML의 역할.
2) CSS(Cascading Style Sheets)
HTML이 구조를 형성했다면 여기에 시각적인 효과를 주는 것이 CSS의 역할이다. 색상, 크기, 폰트 등 눈으로 보이는 다양한 정적 효과를 부여할 수 있다.
3) JavaScript
CSS가 정적 효과를 담당했다면 JavaScript는 동적 효과를 담당한다. 마우스가 올라갔을 때, 클릭했을 때, 휠을 내렸을 때 등 각각의 상황에 원하는 움직임을 지정해줄 수 있다.
2. 사용
가. CSS의 경우
1) html 파일 내에서
① 태그 사용
<style>
...
</style>② 인라인
<div style="border-color: #42b4e6;"></div>2) 파일 분리 후 경로 연결
<link rel="stylesheet" type="text/css" href="style.css">나. JavaScript의 경우
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
...
</script>※ 태그 위치: 위 vs 아래
HTML은 기본적으로 파일이 로딩될 때 위에서부터 아래의 순서로 읽어진다. 따라서 script가 위(head 안)에 존재하느냐, 혹은 html 내용이 모두 끝나고 맨 아래에 존재하느냐에 따라 html 파싱 과정에서 다음과 같은 차이를 보이게 된다.
//① head 안에 존재할 경우
[html 파싱] → [html 파싱 중단] → [script 다운] → [script 실행] → [중단된 html 파싱 재개]
//② 맨 아래에 존재할 경우
[html 파싱] → [script 다운] → [script 실행]①은 온전히 모든 script가 적용된 화면을 유저에게 보여줄 수 있지만 script의 양이 너무 많다면 역으로 읽는데 시간이 오래걸려 불완전한 화면이 먼저 출력될 가능성이 있다.
②는 파싱이 중단되지 않아 빠른 화면 출력이 가능하지만, 만약에 script 의존도가 높은 페이지라면 아무리 html 파싱이 빠르다 해도 의미가 없다.
이외에도 script가 접근하는 요소에 따라 위치가 영향을 주는 경우도 있다.(ex.DOM)
