# 스크립팅 요소들

## \<script>

JavaScript 코드 또는 파일을 HTML 문서에 작성하거나, 연결할 때 사용한다.

### 속성&#x20;

* src : 외부 스크립트를 가리키는 URI이다. 문서 내에 스크립트를 직접 삽입하는 것 대신 사용할 수 있다.
* type : 스크립트의 유형을 나타낸다.&#x20;
* async&#x20;
* defer

### 예시&#x20;

```markup
<body>
  <!-- HTML 문서 외부에 있는 JavaScript 파일을 호출하고자  때는 src 속성 사용-->
  <script src="./js/app.js"></script>

  <!-- HTML 문서 내부에 JavaScript 코드를 작성할 경우-->
  <!-- (HTML5에서는 타입값을 명시하지 않아도 기본적으로 자바스크립트 코드임을 알고 있기 때문에 생략가능) -->
  <script tyep="text/javascript">
      // JavaScript 코드
      console.log('JavaScript 코드를 실행했습니다.');
      console.log(document.characterSet);
      console.log(document.doctype);
  </script>
</body>
```

## CSS 적용하기&#x20;

HTML에서 CSS를 적용하는 3가지 방법&#x20;

1. \<link>요소를 사용해서 CSS 파일 불러오기&#x20;
2. \<style>요소를 사용해서 HTML 파일에 직접적으로 CSS 속성 적용하기 &#x20;
3. style 속성으로 인라인 스타일 적용하기&#x20;

```markup
<!-- <link>요소를 사용해서 CSS 파일 불러오기 ----------------------------->
<!--`rel` : 현재 파일과의 관계-->
<link rel="stylesheet" href="css/app.css" />

<!-- <style>요소를 사용해서 HTML 파일에 직접적으로 CSS 속성 적용하기 --------->
<style>
  body {
    background-color: #17cc89;
    margin: 0;
    min-height: 100vh;
    width: 100vw;
  }
</style>

<!-- style 속성으로 인라인 스타일 적용하기 ------------------------------->
<body
  style="background-color: #17cc89; margin: 0; min-height: 100vh; width: 100vw;"
>
</body>
```

## \<noscript>&#x20;

* 사용자의 웹 브라우저 환경에서 스크립트를 지원되지 않거나, 스크립트가 꺼져있는 경우, 문서에 표시될 문구를 삽입한다.

### 예시 &#x20;

```markup
<noscript>
  <p>JavaScript를 지원하지 않습니다.</p>
</noscript>
```

## \<canvas>&#x20;

* JavaScript를 사용하여 그래픽(비트맵)을 그릴 때 사용한다. &#x20;

  &#x20;`<canvas>` 요소로부터 2D 또는 WebGL 컨텍스트 객체를 추출해 그래픽을 그릴 수 있다.
* SVG는 확대 했을 때 이미지가 깨지지 않지만 canvas는 이미지가 깨진 그래픽 처럼 보이게 된다.

### 예시

```markup
<canvas width="800" height="600"></canvas>

<script>
  // canvas 드로잉
  var canvas = document.querySelector("canvas");
  var ctx = canvas.getContext("2d");
  ctx.translate(200, 40);
  ctx.beginPath();
  ctx.moveTo(180, 175);
  ctx.fillStyle = "#ff0";
  ctx.arc(180, 175, 60, Math.PI * -0.35, Math.PI * -1.05, true);
  ctx.fill();
  ctx.beginPath();
  ctx.moveTo(190, 190);
  ctx.fillStyle = "#ff0";
  ctx.arc(190, 190, 100, Math.PI * -0.35, Math.PI * 0.95);
  ctx.fill();
</script>
```

## 참고&#x20;

* \<script> [스크립트 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/script) → MDN
* \<noscript> [노 스크립트 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/noscript) → MDN
* \<canvas> [캔버스 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Canvas) → MDN
* [Scripting](https://www.w3.org/TR/html/semantics-scripting.html#semantics-scripting) → HTML 5.2 표준 기술 사양

## 실습 자료

{% file src="/files/-MRJS3BcmYSV-0HjSz5Q" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/html-and-css/html/undefined-14.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
