dh_0e

[HTML] 개인 과제 중 배운 문법 (id/class, <script>태그(defer, type module), <link>태그) 본문

내일배움캠프/HTML,CSS,JavaScript

[HTML] 개인 과제 중 배운 문법 (id/class, <script>태그(defer, type module), <link>태그)

dh_0e 2024. 5. 1. 03:12

id와 class의 차이

HTML의 요소에 지정하여 CSS와 JavaScript에서 속성을 변경하는 역할을 하는 것에서 같아보이지만

태그로 지정하는 요소의 수에서 차이가 있음

id로 지정하는 태그는 유일한 이름을 붙이며 중복되면 순차적으로 가장 먼저 발견되는 id에 수정이 이루어짐

(사실상 중복이 불가함)

class는 동일한 유형을 가진 태그들을 모두 일정하게 수정하고 싶을 때 여러 요소를 지정하여 수정이 이루어짐

ex) class는 사람이란 특정한 유형들에 일정하게 태그를 붙여 수정한다면, id는 사람 이름을 나타내 그 자체를 수정

 

 

class는 class명 앞에 '.'을 붙여 사용하며 id는 id명 앞에 '#'을 붙여 사용함

 

 

 

html에서 <script>의 위치

<script>는 html에서 JavaScript를 적용시키기 위해 필요한 태그이며 <html></html> 태그 사이에 두기만 하면 적용이 됨

but 위치에 따라서 속도차가 있으며 html에서 DOM이 완성되기 전에 JavaScript가 이를 조작하려 한다면 오류가 발생함

 

<main> 안에 있는 요소를 수정하는 code가 script.js에 있다면 오류 발생

 

HTML 파싱이 끝난 뒤에 script를 다운하고 실행하기 때문에 오류가 발생하지 않음

 

오류가 발생하지 않지만 HTML 코드가 자바스크립트에 의존적이라면 오랜 시간이 걸릴 수 있음

 

 


defer, script module 

1. defer

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

 

defer 속성은 Script 다운을 HTML 파싱과 동일하게 하지만 Script의 실행을 파싱 후로 설정하여 오류가 발생하지 않게 해줌

defer 속성으로 인해 <main> 안의 요소를 script.js에서 수정해도 오류가 나지 않음

 

2. script module

<script type="module" src="script.js"></script>

 

defer 속성을 포함하고 있으며 다른 핵심 기능들을 추가적으로 적용시킴

1. 엄격 모드(use strict)

변수를 선언하지 않고 사용해도 에러를 발생하지 않는 일반 모드와 달리 선언되지 않은 변수 사용에 오류를 발생시킴

2. 모듈 레벨 스코프

여러 JavaScript 모듈이 있을 때 모듈들 각자의 스코프를 가지게 하여 각자의 code에서 정의한 변수나 함수를 다른 script에서 접근할 수 없게 해줌 (export, import로 가져올 수 있음)

3. 모듈을 단 한 번만 가져옴

하나의 script를 여러 번 호출한다 해도 최초 호출 시 단 한 번만 실행되게 함

 

이 외에도 여러가지 기능이 있으며 이는 아래 링크 참조

https://ko.javascript.info/modules-intro

 

모듈 소개

 

ko.javascript.info

 

 


html <link> 태그

<link> 태그는 보통 다음과 같이 작성함

<link rel="속성값" href="URL">

rel - 현재 문서와 외부 리소스 사이의 연관 관계를 명시함 (href 속성이 설정되어 있어야만 사용 가능)

href - 링크된 외부 리소스의 URL을 명시함 (절대 주소 or 상대 주소)

'내일배움캠프 > HTML,CSS,JavaScript' 카테고리의 다른 글

[JavaScript] 개인 과제 중 배운 문법 (innerHTML, addEventListner, includes, toUpperCase, toLowerCase, Math.floor)  (0) 2024.05.01
[CSS] 개인 과제 중 배운 문법 (Button's hover/active, transition, reset.css)  (0) 2024.05.01
[JavaScript] 주요 문법 정리(3) ( 문서 객체 모델(DOM), Class와 상속, 클로저(Closure) )  (0) 2024.04.26
[JavaScript] 주요 문법 정리(2) (콜백 함수, 동기 vs 비동기, 비동기 작업의 동기적 표현)  (0) 2024.04.25
[JavaScript] 주요 문법 정리(1) (실행 컨텍스트, this binding, 유사 배열 객체)  (0) 2024.04.25
'내일배움캠프/HTML,CSS,JavaScript' Related Articles more