![[HTML] 상단 태그 훑어보기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FptmiY%2FbtrDZuhN4AA%2FAAAAAAAAAAAAAAAAAAAAAHk_tEqjh3n1l8sSe8TlzL3MeyZxOENJUFQK2aGHczCG%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3Db0KGyrJVamk4Hq4tYCbvopcqLxg%253D)
반응형
✔️ 상단 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
📌 DOCTYPE
<!DOCTYPE html>- Document Type Declaration의 약자로 문서가 형식과 버전으로 작성되었다고 선언하는 것입니다.
- 선언 시 웹 브라우저가 standard mode(최신 형태)로 문서 실행합니다.
📌 <html>
<html lang="ko">- html 문서의 기본 언어를 설정함으로써 검색 엔진에 의해 효과적으로 색인화되고 스크린 리더를 통한 접근성이 좋아집니다.
📌 <head>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>- title, css&javascript link, favicon, 다른 메타데이터 등이 담기는 곳입니다.
📌 <title>
<title>웹 페이지의 제목</title>- 브라우저의 탭, 즐겨찾기의 제목, 검색결과의 제목으로 표시됩니다.
📌 <meta>
<!-- 인코딩 -->
<meta charset="UTF-8">- 페이지가 어떤 언어로 작성되었는지 명시해주어 글자가 깨지지 않게 해줍니다.
<!-- IE 관련 호환정보 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">- content="IE=edge" : 익스플로러에서 실행 시 어떤 버전으로 실행할지 지정해줍니다.
<!-- 뷰포트 관련 정보 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 뷰포트란 화면에 보여지고 있는 영역을 말합니다.
- 시각적 뷰포트 : 사람에게 보여지는 영역
- 레이아웃 뷰포트 : 브라우저가 웹페이지를 그리는 영역
- content 속성 안의 항목
- width : 뷰포트의 너비로 device-width는 디바이스의 화면 너비입니다.
- initial-scale : 페이지가 처음 로드될 때 스케일로 기본은 1.0입니다.
- maximum-scale : 최대 스케일을 말합니다.
- minimum-scale : 최소 스케일을 말합니다.
- user-scalable : 사용자가 핀치로 줌인, 줌아웃이 가능한지 여부입니다. (yes or no)
<!-- open graph 정보 -->
<meta property="og:title" content="제목">
<meta property="og:description" content="내용">
<meta property="og:image" content="사진">- Meta(구 페이스북)에서 만든 프로토콜로 페이스북이나 카카오톡 공유 시 미리보기 화면을 구성하는 데이터입니다.
<!-- 파비콘 -->
<link rel="shortcut icon" href="./favicon.png" type="image/x-icon">- 웹 페이지 title 옆에 붙은 아이콘입니다.
- .ico, .png, .gif 파일로 파비콘 사용이 가능합니다.
📄 참고
반응형
'📚 Study > HTML&CSS' 카테고리의 다른 글
| [HTML] 시맨틱 태그(Semantic Tag) (0) | 2022.06.05 |
|---|---|
| [HTML] 웹 접근성 (0) | 2022.06.05 |
| [CSS] Flex Layout (0) | 2022.06.05 |
| [CSS] cursor와 요소 숨기기 (0) | 2022.06.05 |
| [CSS] Position으로 배치하기 (0) | 2022.06.05 |