3. HTML 문서의 정보 (head tag)

Head tag에는 어떠한 정보를 나타내는 지를 알아보자!

 

 

 

 

Title Tag

 

 

 

Title tag는 웹 페이지의 제목을 나타내며, 화면에 표시하기 위한 용도가 지정하는 것이 아니라 정보로 표현하는 것이다.

하지만, 지정한 부분이 편의성을 위해 브라우저에서 표시되는 것 뿐이다.

 

 

 

---

 

 

 

Meta Tag (웹 페이지의 정보), 빈 태그

—> title, link, style, script tag에서 나타낼 수 없는 기타 모든 정보를 표시하는 정보 태크이다.

기타 모든 정보를 나타내기에 사용하는 방법이 많지만 대표적인 것만 제시한다.

 

 

---

 

 

 

 

Character set (문자를 인코딩하는 방식)을 UTF-8 로 지정했다.

 

문자 인코딩??

우리가 화면에 텍스트를 렌더링(출력) 해야하는데, 그 텍스트가 출력되는 방식을 지정하는 것이다.

UTF-8은 한국, 중국, 일본과 같이 아시아권 언어를 표현하는데 특화된 문자 인코딩 방식이다. 

다른 meta tag를 사용하지 않더라도, 한글이 정상적으로 출력 되야하니 문자 인코딩 방식 지정 tag를 반드시 삽입 하길 권장한다.

• 렌더링(컴퓨터가 화면에 그림을 그려서 우리가 볼 수 있게 출력하는 것)

Mate tag에서 name attribute는 정보의 종류를 의미하고, content는 정보의 값을 의미한다.

 

 

---

 

 

 

우리는 head tag안에 meta tag가 어떻게 활용되는지 배웠다.

그럼 meta tag는 어떤 attribute를 갖고 있을까??

 

tag는 attribute와 value를 통해 기능을 확장해서 사용할 수 있음을 배웠다.

그런데 어떤 attribute들은 특정 tag 에서만 사용 되는 경우가 존재한다.

대표적인 예가 mate tag의 charset, name, content attribute이다.

 

 

 

 

---

 

 

 

 

Link Tag (CSS문서, html문서 ,icon 이미지 파일 불러오기), 빈태그

외부 문서를 연결할 때 사용한다.

 

 

Relationship == rel : 관계

Hyper text reference == href : 경로

 

외부에서 가져올 문서와 현재 html 과 어떤 관계를 갖고 있는가를 명시한다.

css파일을 가져올 때는 stylesheet, icon의 경우 icon을 명시한다.

외부파일의 경로는 href의 value에 명시한다.

• 참고로 favicon은 favorite icon에 해당하며 title에 보여질 icon을 지정할 때 주로 사용한다.

 

---

 

 

Link tag에서 사용하는 attribute에는 어떤 것이 있을까??

 

 

여기서 link tag는 rel attribute를 반드시 지정해야 사용할 수 있다.

href가 필수가 아닌 이유는 얘기가 길어지니 생략한다.

 

 

 

 

---

 

 

Style Tag 

HTML 문서 내부에서 CSS를 직접적으로 작성하고 싶을때 사용

 

 

 

 

---

 

 

 

Script Tag (JS를 불러오거나 작성하기)

외부에 있는 CSS파일을 불러올때는 link, 작성할때는 Style tag를 사용했다.

외부에 있는 JS파일을 불러오거나, html 문서 내부에서 JS를 작성할때 모두 script tag를 사용한다.

 

 

외부의 JS파일을 불러오는 경우 Source attribute를 이용한다.

HTML에서 바로 JS 언어로 코딩하는 경우 script tag 내부에서 작성 가능하다.