[HTML/CSS] <link href> 그리고 <script src>

 데이터를 시각화하기 위해 nvd3.js를 공부해보려고 한다. 그래서 tutorial을 하나씩 따라가 보려 하고 있는데, html 첫줄 부터 막히기 시작한다. 이전에는 tutorial에 <link> tag <script> tag가 보이면 별다른 이해없이 Copy and Paste를 하고 시작했다.  그래서 그런지 그렇게 많이 접해왔던 코드임에도 불구하고, 막상 무슨 역할을 하는 코드인지 생각해 보니 잘 모르겠다. 생각해보면 이렇게 하면 실 구현물을 빨리 얻을 수 있겠지만 마지막에 나에게 남는 것을 없을 거라는 생각이 들기도 했다. 

 가장 기초적인 것 부터 하나씩 다시 집어보려고 한다. 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.css">
...
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.js"></script>

 href는 <a href> 를 통해 그동안 써와서 연결할 파일의 위치를 의미하는 것은 알겠는데 link, rel 은 생소하다. 

<link> 정의

---

 The <link> tag defines a link between a document and an external resource.

http://www.w3schools.com/ 에 정의된 link tag의 설명을 보면 위와 같다. 외부의 resource와 현재 document의 연결을 정의한다. 

즉, 위의 예제를 보면 현재 html과 외부의 nv.d3.css를 연결해주라는 이야기다. nv.d3.css에 정의된 style을 현재 html에서도 사용하겠다는 의미이다. 

<link ref> 속성

---

<link rel> 에 사용될 수 있는 값들은 아래와 같이 다양하다. 

alternate, archives, author, bookmark, external, first, help, icon, last, license, next, nofollow, noreferer, pingback, prefetch, prev, search, sidebar, stylesheet, tag, up

 너무 많으니 우선은 stylesheet는 외부 .css 파일에 style 정보를 분리해 연결하는 용도라고만 인지하고 넘어가자.

그렇다면 다음 줄인 <script src>는 무엇인가. javascript 를 사용할 때 쓰곤 했는데 저기 script가 javascript만을 의미하는 것인가.

<script>

---

 The <script> tag is used to define a client-side script (JavaScript).

 <script> tag의 정의를 보면 client-side의 script를 동작시키기 위한 코드이다. 기본적으로 <script> 만 사용해도 되고, <script type="text/javascript"> 와 같이 javascript를 명시적으로 정의해주어도 된다. 

 그렇다면 궁금해 지는 것이 script내 type 속성에 들어갈 수 있는 다른 script가 있을지 찾아보았다. 

text/javascript (this is default)

text/ecmascript

application/ecmascript

application/javascript

 위 4개가 대표적으로 쓰이는데 결국은 javascript와 ecmascript가 주로 사용되는 것으로 보인다. 참고로 "type" 속성을 사용하지 않으면 type="text/javascript"가 default로 사용된다고 한다. 

 ecmascript 에 대해서도 궁금하긴 하지만 글 문맥을 벗어난 것 같아 나중에 알아보려고 한다. 

ECMA스크립트

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.js">

결국 위 script를 정리해보면 src에 연결된 javascript type 의 파일을 실행하겠다는 의미이다. 

처음에 언급했던 link tag의 경우 .css 파일을 link 만 하는 것이고, script tag의 경우 연결된 .js 파일을 바로 실행하는 코드이다. 

(사실 css는 Cascading Style Sheets의 약자로 말 그대로 style sheet로 style을 참조하는 코드라서 실행하는 script 코드는 아니다.)