1주차 HTML-meta
1. HTML
HTML은 구역과 텍스트를 나타내는 코드이다, CSS는 잡은 구역을 꾸며주는 것.
HTML 코드내에 CSS 파일을 불러와서 적용한다.
HTML은 크게 head와 body로 구성한다.
head 안에는 페이지의 속성 정보를, body 안에는 페이지의 내용을 담는다.
head 안에 들어가는 대표적인 요소들은 meta, script, link, title 등 등이 있다.
1-1 HTML 구역 div
2. meta란?
html 태그 중 하나이고 '메타' 즉, 문서 그 자체를 설명하는 태그를 메타 태그라 한다.
일반 html 태그는 문서 내용물을 어떻게 보이게 하는지를 나타내기 위해 마크업을 한다.
하지만 메타 태그는 html 문서가 어떤 내용을 담고있고, 핵심키워드는 무엇이며, 누가 만들었는지, 문자 언어 설정은 어떤것을 사용하는지 등의 정보를 담고 있는 태그이다,
또한 메타 태그는 html 마크업의 기본인 열고 닫는 구조가 아닌 닫는 태그가 없다.
고로 <meta........../> 이렇게 작성한다.
/////마크업이란? mark 표시하다를 뜻하는데, 제목이 어디서부터 어디까지인지, 본문은 어디부터인지, 주소는 어딘지, 강조할 부분은 어딘지 등 문서를 구조적으로 표시하기 위한 것을 마크업이라 한다//////
2-1 <meta charset="utf-8"> 란?
head 안에 들어있는 이 태그는 html 파일의 인코딩을 알려주는 태그임.
쉽게 말하자면 브라우저에게 text를 어떻게 그려달라는지 말해주는 것.
이 태그가 없으면 한글, 특수문자들이 깨져서 나올 수 있다.
2-2 <meta http-equiv="X-UA-compatible" content="IE=edge"> 란?
- IE=edge : IE(Internet Explorer)브라우저에서, 각 버전 중 가장 최신 표준 모드를 선택하는 문서 모드(IE6~IE11)
- 문서 유형 (document type)선언과 함께 사용해야 함
- E11에서는, 문서 모드가 곧 퇴화될 것이며 앞으 사용하지 말아야할 것으로 규정
- 즉, 모든 익스플로러에서 호환성보기 무시.
예를 들어 <meta http-equiv="X-UA-compatible" content="IE=9">
는 IE9에서 호환성보기 무시하기-특정 브라우저를 지정한것.
예를 들어 <meta http-equiv="X-UA-compatible" content="IE=Edge: chrome=1">
은 chrome을 사용하는 유저에게 렌더링 해줌-가장 많이 사용하는 방식임.
2-3 <meta name="viewport" content="width=device=width, initial-scale=1.0">
viewport는 모바일 웹이나 반응형웹에서 각각의 기기장치를 인식할 때 사용하는 태그.
- width=device-width 부분은 장치의 화면 너비를 따르도록 페이지 너비를 설정한다.(장치따라 다름)
- initial-scale=1.0부분은 브라우저에서 페이지를 처음 로드 할 때 초기확대 / 축소 수준을 설정한다.
- minimum-scale=1.0은 최소사이즈를 1.0으로 처리해서 축소를 못하게 막는것
- maximum-scale=1.0은 최대사이지를 1.0으로 처리해서 확대를 못하게 막는것
- user=scalable=no는 사용자크기변화를 no 로 처리해서 크기변화를 못하게 막는것
만약에 뷰포트메타태그를 안쓰게 되면 모바일에서 기기장치 가로 사이즈를 인식못해 pc처럼 보여지게된다.
.
.
.
인코딩, 브라우저 호환, 모바일에서 보여지는 사이즈