동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
동영상 강좌보기
HTML <head>요소
<head>요소는 메타데이타에 대한 컨테이너이고 <html>태그와 <body>태그 사이에 위치합니다.
html 메타데이타는 HTML문서에 대한 데이터입니다. 메타데이타는 브라우저에 의해 화면에 표시되지 않습니다.
메타 데이터는 일반적으로 문서 제목, 문자 세트, 스타일, 링크, 스크립트 및 기타 메타 정보를 정의합니다.
다음 태그 <title>, <style>, <meta>, <link>, <script> 및 <base>는 메타 데이타를 설명합니다.
HTML <title>요소
<title>요소는 문서의 제목을 정의하고 모든 HTML/XHTML문서에서 필요합니다.
<title>요소:
<!DOCTYPE html>
<html>
<head>
<title>페이지제목</title>
</head>
<body>
문서의 내용은 여기에......
</body>
</html>HTML <style>요소
<style>요소는 하나의 HTML페이지에 대한 스타일 정보를 정의하는데 사용됩니다.
<pre class="line-numbers"><code class="language-markup"><style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style></code></pre>HTML <link>요소
<link>요소는 외부 스타일 시트에 연결하는데 사용됩니다.
<link rel="stylesheet" href="mystyle.css">HTML <meta>요소
<meta>요소는 페이지 설명, 키워드, 제작자 및 다른 메타 데이타, 문자세트 등을 지정하는데 사용됩니다.
메타 데이타는 브라우저(내용 표시 방법), 검색엔진(키워드) 및 기타 웹 서비스에서 사용됩니다.
웹문서의 문자세트를 정의합니다.
<meta charset="UTF-8">웹문서에 대한 설명을 정의합니다.
<meta name="description" content="html강좌">검색엔진에 대한 키워드를 정의합니다.
<meta name="keywords" content="HTML, CSS, XML, JavaScript">페이지 작성자를 정의합니다.
<meta name="author" content="365ok">10초마다 웹문서를 새로 고침합니다
<meta http-equiv="refresh" content="10">다음은 <meta>태그의 종합 예입니다.
<meta charset="UTF-8">
<meta name="description" content="html강좌">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="365ok">뷰포트(viewport) 설정하기
HTML5는 웹디자이너가 <meta>태그를 통해 뷰포트를 제어할 수 있게 하는 메소드를 도입했습니다.
뷰포트는 사용자가 볼 수 있는 웹페이지의 영역입니다. 그것은 장치에 따라 다르며 휴대전화의 경우 컴퓨터(PC)보다 작습니다.
모든 웹페이지에 다음과 같은 <meta>뷰포트 요소를 포함해야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta>viewport요소는 페이지의 크기와 배율을 제어하는 방법에 대한 브라우저 지침을 제공합니다.
width=device-width부분은 페이지의 너비를 장치의 화면 너비에 따라 설정합니다.
initial-scale=1.0부분은 브라우저가 페이지를 처음 로드할 때 초기 줌레벨을 설정합니다.
HTML <script>요소
<script>요소는 클라이언트측 Javascript를 정의하는데 사용됩니다.
다음 자바스크립트는 id="demo"인 HTML요소에 "안녕 자바스크립트!"를 추가합니다.
<script>
function myFunction {
document.getElementById("demo").innerHTML = "안녕 자바스크립트!";
}
</script>HTML <base>요소
<base>요소는 페이지의 모든 상대 URL에 대한 기본 URL과 기본 대상(target)을 지정합니다.
<base href="https://365ok.co.kr/images/" target="_blank">등록된 댓글이 없습니다.