정보를 의미하는 태그들은 html파일 <head>영역에 담아야 한다!
1. <title>태그
<title>태그는 HTML문서의 제목(title)을 정의합니다.
해당 영역에서 입력된 문자들이 웹 브라우저 탭에서 표시됩니다.
<title>영역에서 제가 임위적으로 코딩좋아라는 이름을 붙여줬습니다.
브라우저탭도 같은 이름으로 띄워지죠.
2. <link>태그
<link>태그는 외부 문서를 가져와 연결할 때 사용하며, 대부분은 CSS파일입니다.
필수 속성이 두개 있습니다. rel 과 href 입니다.
rel 속성
rel(Relationship 단어의 약어)은 가져올 외부 문서(대표적으로 CSS파일)가
현재의 HTML과 어떤 관계인지를 명시하는 HTML 속성(Attribute)입니다.
stylesheet로 명시되면 css파일을 의미합니다.
icon도 명시될 수 있습니다.
icon은 브라우저 탭 부분에서 이름 앞에 작은 로고를 의미합니다.
Favorite Icon을 줄여서 Favicon(파비콘)이라고 부릅니다.
HTML Favicon를 적용할 때는 이름을 favicon이라고 지정하시길 권장하며,
favicon.ico 혹은 favicon.png 파일이 주로 사용됩니다.
rel 속성은 해당 html파일과 가져올 문서와의 관계를 명시하고,
href 속성은 가져올 문서의 경로를 알려줍니다.
3. <style>태그
<style>태그는 스타일(CSS)를 HTML문서 안에서 작성하는 경우에 사용됩니다.
4. <script>태그
<script>태그 앞서 JS와 관련 있다고 언급했습니다.
두 가지 방법이 있습니다.
①방법은 JS파일이 외부로부터 가져오는 경우에 사용됩니다.
②방법은 HTML문서 안에서 JS를 작성하는 경우에 사용됩니다.
src 속성
src(Source 단어의 약어)는 사용할 소스 코드(파일)를 지정하는 HTML 속성(Attribute)입니다.
5. <meta>태그
<meta>태그는 HTML문서(웹페이지)의 제작자, 내용, 키워드 같은,
여러 정보를 검색엔진이나 브라우저에게 제공합니다.
앞서 <title>, <link>, <style>, <script>태그가
나타날 수 없는 나머지 모든 정보를 표시할 때 사용됩니다.
<meta charset="UTF-8">
문자인코딩 방식을 뜻합니다.
이거는 특수 상황외 수정할 필요가 없습니다.
<meta name="author" content="happyone">
name속성은 정보의 종류를 나타나며,
content속성은 정보의 값을 나타납니다.
name="viewport"
viewport는 모바일 장치만 해당되고, 일반적으로 데스크탑은 해당되지 않습니다.
'프론트엔드 > HTML, CSS, JS기본' 카테고리의 다른 글
| 모든 파일 공백 크기 한꺼번에 설정 (0) | 2023.07.29 |
|---|---|
| 상대 경로 vs 절대 경로 (0) | 2023.07.29 |
| CSS, JS 연결하기 (0) | 2023.07.28 |
| Doctype(DTD), html/head/body 태그 (0) | 2023.07.28 |
| VS Code 단축키 & 공백 변경 (0) | 2023.07.27 |
