반응형
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹페이지 제목</title>
<meta name="description" content="웹페이지 소개">
<meta name="keywords" content="키워드입력, 키워드2, 키워드3">
<link rel="shortcut icon" href="파비콘 주소">
<link rel="stylesheet" media="screen" href="css 주소">
<script src="자바스크립트 주소"></script>
</head>
<body>
<header>
<h1>WebDir</h1>
<nav>
<h1>navigation</h1>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
</nav>
</header>
<article>
<h1>콘텐츠 제목 </h1>
<p> 콘텐츠 내용 </p>
</article>
<aside>
<section>
<h1>트위터</h1>
<blockquote>트위터내용</blockquote>
</section>
</aside>
<footer>
<small>© unclepapa / <address>unclepapa@mail.com</address></small>
</footer>
</body>
</html>
http-equiv="X-UA-Compatible"에 대한 설명은 아래 링크로 대신합니다.
[HTML/XHTML] - X-UA-Compatible
위 메타 태그를 간단히 설명하자면 IE에서만 해석되며 IE=edge는 최신 버전으로 렌더링하라는 것입니다.
name="viewport"는 스마트폰과 같은 다양한 플랫폼에서 보여지게 될 화면의 크기를 조정하는 태그입니다.
content의 속성값으로는 아래와 같습니다.
user-scalable=no : 사용자의 확대보기 허용 여부(no/yes)
initial-scale=1.0 : 페이지 로딩시 확대비율
maximum-scale=1.0 : 최대확대비율
minimum-scale=1.0 : 최소축소비율
width=device-width : 플랫폼 가로 크기에 맞춤, 수치를 넣으면 그수치에 맞게 맞춰짐
target-densitydpi=medium-dpi : dpi([dots per inch])
반응형
'it공부' 카테고리의 다른 글
| uiux 수업 정리 (0) | 2020.07.05 |
|---|---|
| Java 쓰레드 (0) | 2020.07.05 |
| 제이쿼리 정리 :JSP 도로명 주소 API (0) | 2020.07.05 |
| Html css 정리 / 드롭다운 태그 (0) | 2020.06.22 |
| 삼항연산자를 이용한 프로그램 (0) | 2020.04.23 |