by Kyojin Hwang
<script>, <script async>와 <script defer>
차이점을 설명해주세요.최상단에 DOCTYPE을 선언
하여 웹 페이지가 어떤 버전의 HTML, XHTML을 사용하는지 명시
한다.HTML5 이전버전을 폐지하지 않는 이유
: 과거에 작성된, 웹 자료의 보존이 필요하기 때문에 유지하고 있다고 한다.<head>
태그 안에 사용되는 태그keywords
<meta name="keywords" content="HTML" />
title
<meta name="title" content="Owen | 블로그" />
Description
<meta name="Description" content="안녕하세요. OWEN의 개발 블로그 입니다." />
robots
<meta name="robots" content="noindex, nofollow" />
charset
<meta charset="UTF-8" />
refresh
<!-- 360초마다 새로고침 -->
<meta http-equiv="refresh" content="360" />
<!-- 네이버 주소로 3초 후 이동 -->
<meta http-equiv="refresh" content="3;url=http://naver.com" />
og
<meta property="og:title" content="콘텐츠 제목" />
<meta property="og:url" content="웹페이지 URL" />
<meta property="og:type" content="웹페이지 타입(blog, website 등)" />
<meta property="og:image" content="표시되는 이미지" />
<meta property="og:title" content="웹사이트 이름" />
<meta property="og:description" content="웹페이지 설명" />
expires
<meta http-equiv="Expires" content="Mon, 30 Sep 2024 19:15:23 GMT" />
viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<SVG>, <Canvas>
<header>
: 도입부에 해당하는 콘텐츠를 가지고 있는 부분을 의미합니다. 웹페이지 로고 등이 들어갑니다.<nav>
: HTML 문서 사이를 탐색할 수 있는 링크의 집합을 정의합니다. 메뉴바로 주로 사용됩니다.<main>
: HTML 문서의 핵심적인 내용이 들어있는 부분을 의미합니다. 쇼핑몰 같은 경우 상품목록들이 있는 부분입니다.<section>
: 제목을 가지고 있으며, HTML 문서의 전체적인 내용과 관련이 있는 콘텐츠의 집합입니다.<article>
: 독립적인 하나의 콘텐츠 영역입니다. 웹사이트의 나머지 부분과는 별도로 읽을 수 있어야합니다.script 태그
<body>
태그 닫히기 직전 또는 <head>
태그안에 넣어야하는 경우는 defer or async를 사용하여 랜더링 차단 방지를 한다.<body>
태그 닫히기 직전에 하는 이유는 HTML 랜더링을 중단 하기때문이다.link 태그
<head>
태그 안에 위치시키는 것이 가장 적절합니다.(웹 접근성 향상)
<script>
, <script async>
와 <script defer>
차이점을 설명해주세요.속성 | 다운로드 시점 | 실행 시점 | HTML 파싱 중단 |
---|---|---|---|
<script> in <head> |
즉시 | 다운로드 완료 후 즉시 실행 | 중단됨 |
<script> in <body> 끝 |
HTML 파싱 완료 후 | 다운로드 완료 후 즉시 실행 | 중단되지 않음 |
<script async> in <head> |
병렬로 다운로드 | 다운로드 완료 후 즉시 실행 | 중단됨 (즉시 실행) |
<script defer> in <head> |
병렬로 다운로드 | HTML 파싱이 완료된 후 실행 | 중단되지 않음 |
<!-- div 엘리먼트의 id와 class 속성은 Attribute 이다 -->
<div id="inpa" class="bold"></div>
<!-- input 엘리먼트의 type과 value 속성은 Attribute 이다 -->
<input type="text" value="0" />
<div class="my-class" style="color: red;"></div>
<script>
// className과 style은 Property 이다
document.querySelector('div').className // "my-class"
document.querySelector('div').style.color // "red"
</script>