티스토리 뷰
메타데이터 요소
<head> 태그는 브라우저에 보이지 않는 문서에 대한 정보!
html:5를 입력 또는 !탭을 누르면 기본 틀이 자동으로 입력된다.메타데이터는 저번 포스팅에서 데이터를 설명하는 데이터라고 했었다.
가장 많이 쓰는 것은 <meta>, <link>가 있음!
🥦 title 태그
브라우저 탭 제목에 지정한 내용이 들어가도록 한다!
문자열만 포함할 수 있고, 하나의 title만 존재가 가능하다.
즐겨찾기의 이름 기본값으로도 들어간다.
검색 알고리즘을 고려해 title을 잘 작성하는 것이 좋다.
🌽 meta 태그
컨텐츠가 없는 빈 요소, 따라서 속성으로만 정의한다.<meta name="" content="" /> 로 작성하여
이름(name)-값(content) 쌍으로 메타데이터를 제공 가능하다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name
예시
- application-name - title과 유사해 보이지만 애플리케이션의 이름만을 작성한다.
- author - 문서 저작자
- description - 요약
- keywords - 페이지의 콘텐츠와 관련된 키워드 목록
- viewport - width, height, initial-scale 등을 지정 가능한 뷰포트.
meta charset="UTF-8"- 유니코드로 인코딩을 지정한다.<head>태그의 처음이나<title>태그의 이전에 작성하는 것을 권장
user-scalable, maximum-scale, minimum-scale
meta name="viewport" content=""에서, initial-scale은 보통 1.0으로 한다.user-scalable에서는 yes가 default이나,no를 지정하면 사용자가 웹 페이지를 확대할 수 없다.maximum-scale, minimum-scale은 확대할 수 있는 정도를 정해준다.
🥒 MIME type
파일을 불러올 때, 경로를 문자열 형태로 입력하는데
HTML 파일에서는 해석이 불가하여
어떤 확장자를 가진 어떤 파일인지 알려주기 위해 type을 명시해주는 것이다.
https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types
구조
대분류/서브타입(확장자) 식으로 작성한다.
예를 들어 text/html, image/png, video/mp4 등이 있다.
대분류 text 타입은 텍스트를 포함하는 문서!
txt 파일은 plain으로 서브타입을 지정한다.
🍍 style 태그
<head>태그 내부에<style></style>태그를 쓴다!- 외부 스타일 시트 삽입 권장
- 여러 스타일을 적용할 경우, 나중(아래)에 작성된 스타일이 적용된다.
🥗 script 태그
자바스크립트 코드를 적용하기 위해 필요한 태그!
외부에서 불러오기
<script src="likethefirst.js"></script>외부에서 불러오는 경우 절대경로 또는 상대경로인 src 속성값을 잘 확인해야 한다.
인라인 스크립트 작성하기
<script>console.log("likethefirst!");</script>HTML 태그의 이벤트 속성에 작성하기
- 이벤트 발생 시 실행할 함수를 지정하는 방법
<element onclick="onClickFunc()">
- 실행할 자바스크립트 코드를 작성하는 방법
<element onclick="alert('execute')">
하지만 위 방법은 가독성이 떨어질 뿐더러
유지보수 측면에서도 어렵다는 단점이 있어,
html/css/js를 어느정도 독립시키는 편이 적절할 수 있다.
자바스크립트 파일을 불러오는 경우
head, body 태그 어디에 있어도 상관없지만,
head 태그 내부에 있는 경우 화면이 렌더링되기 전에 먼저 실행된다.
그러므로 긴 내용의 js 파일인 경우,
body 태그 가장 마지막에 삽입하는 것을 권장한다.
이에 대해서 자세한 내용은 다음 포스팅에서 다루겠다.
'Programming Language > HTML, CSS, JavaScript' 카테고리의 다른 글
| [HTML/CSS] 목록과 표 (0) | 2021.11.15 |
|---|---|
| [HTML/CSS] 구조를 나타내는 요소와 시멘틱 웹 (0) | 2021.11.13 |
| [HTML/CSS] 텍스트 요소 (0) | 2021.11.09 |
| [HTML/CSS] HTML의 구조 (0) | 2021.11.09 |
| [HTML/CSS] Visual Studio Code 알면 좋은 확장 프로그램, 단축키, 꿀팁 (4) | 2021.11.08 |
- Thanks for comming.
- 오늘은
- 명이 방문했어요
- 어제는
- 명이 방문했어요