📌 메타데이터 요소
- html5를 입력하거나 !입력하고
tab하면html문서에 기본 틀 볼 수 있음 head에 있는 태그들이 하는 일 - 페이지에 대한metadata를 포함하는 것
metadata
- 데이터를 설명하는 데이터
html도 하나의 데이터 이기 때문에html문서를 설명하는 데이터가 메타데이타
📌 title 태그
- 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목
- 자식요소로 안에 태그를 포함해도 다 무시됨 -> 문자열로 작성하기
head안에 단 하나의title만 가능 - 즐겨찾기, 북마크의 이름에 기본값으로 들어가있음
- SEO 구글이나 네이버 등 검색엔진이 정보를 수집할 때 영향을 많이 끼침, 비슷한 내용이여도 제목을 더 잘 짓는 사이트가 상위에 노출됨
명사를 나열하지 말고 웹페이지를 설명할 수 있는 짧은 문장으로 나타내기
📌 meta 태그
- 들어갈 데이터가 여러개라면
meta태그를 여러개 사용해서 문서의 정보를 나열하는 형태로 사용 - 빈요소라서 -> 속성에 정보 나열
name, content 속성
문서의 메타데이터를 이름-값 으로 표현
두개 항상 같이 씀
charset 속성
- 문자 인코딩
- 모든 언어를 지원하는 유니코드 라는 인코딩, 이걸 사용하겠다는 표현
UTF-8 - 전세계에서 한글을 무리없이 볼 수 있음
head의 첫번째 정보로 넣거나title전에 넣어주기
viewport
- 전체 브라우저 중에서 웹페이지를 볼 수 있는 영역
- 뷰포드의 초기 사이즈에 대한 힌트, 모바일장치에서만 사용
name="viewport" content=""- ex)
width=device-width-> 이 웹페이지를 접속하는 기기의 가로랑 실제 길이를 동일하게 하라initial-scale='0.0~10.0'장치너비와 뷰포트 너비의 비율 설정, 보통 1.0 (두세배 확대할 이유 없으면)
user-scalable="yes or no"두 손가락으로 확대기능할건지
📌 link 태그
head에서 문서정보뿐만 아니라 외부의 파일, 리소스를 연결할 수 있음- 여러개 파일 연결하고 싶으면 여러개의
link태그 사용해야함
css=style sheet를html과 연결할 때, 사이트 아이콘 팝잇콘 추가할 때 등 - 빈요소
href 속성
- 이동하려는 경로
rel 속성
- =relationship 연결하려는 파일과 현재 이 파일이 어떤 관계를 가지고 있는지 명시
type 속성
- 외부파일이 어떤 파일인지 정의
ex) stylesheet는text/css
MIME 타입
- 외부의 경로를 문자열 혈태로 입력하는데
html은 이 문자열을 해석할 수 없음 -> 어떤 형태의 파일인지 인지하지 못함 ->type이란 속성으로 명시 text로 된 css구나~
'text/css'이런 형태를MIME 타입이라고 부름 - 구조
카테고리(text나 image 등) / 확장자
📌 style 태그
- css 적용
- 일반적으로 스타일은 외부 스타일 시트에 작성하고
link태그로 연결하는 것을 권장
📌 script 태그
- css 처럼 인라인으로 스크립트를 작성할 수도 있고 외부 스크립트 파일 불러올 수 있음
- 보통 자바스크립트 파일 연결
head에 있어도 되고body에 있어도 되지만 위에서부터 html파일을 해석해내려가다가script태그는 만나면 안에 있는 javascript 파일을 먼저해석함 이거 해석하는 동안 화면이 중단이 됨 (로딩이 오래걸림)
그래서script태그는body의 마지막에 쓰는 걸 권장- 먼저
html내용을 먼저 화면에, 그리고 시간이 걸리는 자바스크립트 파일을 마지막에 실행시킴 - css는 외부파일을 가져오려면
link태그 사용, 직접 인라인으로 입력하려면style태그 사용
javascript는script태그 하나로 두개다 가능
src 속성
- 외부파일을 가져오려면 상대경로나 절대경로 입력
