될때까지

>westudy | Week 1 - HTML & CSS - HTML, CSS, JavaScript는 무엇이며 이들의 관계는? 본문

프로젝트/wecode

>westudy | Week 1 - HTML & CSS - HTML, CSS, JavaScript는 무엇이며 이들의 관계는?

랖니 2022. 5. 22. 21:18
728x90

🍧 What is HTML, CSS, JavaScript ?

HTML
(HyperText Markup Language)		 HyperText : 링크가 달려있는 텍스트
Markup Language : 태그를 이용해 글의 서식과 스타일을 정해주는 언어.

==> HyperText를 사용하고 태그로 이루어져 있는 언어		 웹 사이트의 뼈대, 구조를 담당
CSS
(Cascading Style Sheets)		 Cascading : 위에서 아래로 흐른다는 뜻으로 상속 또는 종속된다는 의미를 갖고 있음

==> HTML 문서에 있는 요소들에 선택자를 이용하여 스타일을 적용하는 스타일 시트 언어다.		 웹 사이트의 디자인을 담당
JavaScript ==> 사용자와의 상호작용을 통해 동적인 웹페이지를 구성하고자 고안된 프로그래밍 언어 웹 사이트의 동작을 담당

 

🍓 .HTML, .CSS, .JS 세 종류의 파일을 연결하는 방법 ?

* HTML + CSS

1) Inline Style Sheet : HTML 태그 안의 style속성에 작성하기

<h1 style="font-size:90px; color:red;”>hello world</h1>

 

2) Internal Style Sheeet : HTML 파일 내부에 작성하기

<head>
	<style>
		a {
			text-decoration: none;
			border: 2px solid #004fff;
                }
	</style>
</head>

 

3) Linking Style Sheet : 외부 파일 경로를 href사용하여 불러오기

<link rel="stylesheet" href="css/style.css”>

 

** 차이점 : Inline은 HTML태그에 직접 작성하니까 보기 쉽고 빠르다. 하지만 HTML과 CSS코드가 같이 공존하기 때문에 유지보수가 어렵다. Internal도 마찬가지로 HTML문서안의 여러 요소를 한번에 꾸밀 수 있지만 HTML파일이 여러개가 존재하면 공통되는 속성을 반복해서 작성해야한다는 단점이 있다. 이를 방지하기 외부 스타일 시트로 정리하는 방법이 가장 좋다.

 

* HTML + JavaScript

1) Inline Script Sheet : HTML태그 안에 직접 작성하는 방법

2) Internal Script Sheeet : <script></script>태그 내에 작성하는 방법

3) Linking Script Sheet : script src를 사용해 연결하는 방법

<script src="main.js"></script>

 

🐱‍🚀 script태그의 위치에 따른 차이점

자바스크립트의 script 태그 위치는 브라우저의 렌더링(브라우저에 시각적으로 그려지는 것)에 영향을 미친다. 브라우저는 HTML파일을 읽다가 script 태그를 만나면 스크립트를 먼저 실행하고, 외부에서 스크립트를 다 다운받고 난 후에 남은 HTML 파일을 읽어온다. 그렇기 때문에 페이지 위쪽에 용량이 큰 스크립트가 있다면, 스크립트의 다운로드가 끝날 때 까지 아래쪽 페이지는 화면에 나타나지 않게되는 문제점이 발생한다. 이를 예방하기 위해 html내부의 body태그 제일 하단에 script파일을 배치한다. 하지만 이 방법도 HTML파일이 크고 무겁다면 HTML문서 전체를 다운로드 해야하기 때문에 속도가 느려진다. 또 자바스크립트에 의존적인 사이트라면 오랜 시간이 걸린다. 이 문제를 해결하기 위해 script의 defer와 async라는 속성을 사용한다.

1) defer

페이지에 어떤 파일들을 가져와야 하는지 먼저 쭉 살펴본 다음 병렬로 파일을 다운로드한다. 길이가 짧은 스크립트는 페이지 상에서 뒤쪽에 있어도 로드되는 시간이 짧기 때문에 앞쪽의 스크립트보다 먼저 다운로드가 끝날 수 있다. 하지만 다운로드가 먼저 끝났다고 먼저 실행되지 않고 HTML에 작성한 순서대로 앞에서 부터 실행이 된다. HTML이 끝난 후에 다운로드받은 스크립트 파일을 실행한다.

2) async

defer와 마찬가지로 병렬로 다운로드가 이뤄지지만, 스크립트의 실행 순서를 지키지 않고 다운로드가 끝난 순서대로 실행이 된다. 또한 html 파일의 실행이 끝나기도전에 다운로드가 끝난 script파일이 먼저 실행이 될 수도 있다. 스크립트 파일의 순서도 지켜지지않기 때문에 async보다는 defer를 사용하는 것이 더 안전하다.

 

참고 : boaz  드림코딩

728x90
저작자표시 비영리 변경금지

'프로젝트 > wecode' 카테고리의 다른 글

>westudy | Week 3 - 조건문  (0) 2022.06.02
>westudy | Week 2 - JavaScript  (0) 2022.05.27
>westudy | Week 1 - HTML & CSS _ 20220520 - 자기소개 페이지3/3  (0) 2022.05.20
>westudy | Week 1 - HTML & CSS _ 20220519 - 자기소개 페이지2/3  (0) 2022.05.19
>westudy | Week 1 - HTML & CSS _ 20220518 - 자기소개 페이지1/3  (0) 2022.05.18
'프로젝트/wecode' Related Articles more