HTML CSS JS tip 정리

메타데이터:요소

- 메타데이터는 데이터를 설명하는 데이터이다. 그리고 HTML에서 문서에 공식적으로 메타데이터를 적용하는 방법이 있습니다.

<meta charset="utf-8">
<meta name\="description" content\="Portfolio for world-renowned software developer Jun" >
<meta name="author" content="Jun" />

다음과 같이 Head안에서 html을 설명해주는 역할을 합니다.

• name 은 메타 요소가 어떤 정보의 형태를 갖고 있는지 알려줍니다.
• content는 실제 메타데이터의 컨텐츠입니다.

meta 자세한 설명 : https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML

head 태그에는 무엇이 있을까? HTML의 메타데이터

 

Favicon

favicon(즐겨찾기 아이콘)은 웹 사이트와 함께 포함된 작은 아이콘으로 브라우저의 주소 표시줄, 페이지 탭, 책갈피 메뉴와 같은 위치에 표시된다. 

보통 favicon은 크기가 16 x 16 픽셀이며 GIF, PNG 또는 ICO 파일 형식으로 저장된다.

옆에 있는 logo처럼 사용 가능하다.

 

CSS 추가

CSS를 추가할때는 다음과 같이 head에 적어준다.

<link rel="stylesheet" href="style.css" />
<script src="main.js" defer></script>

 

defer

여기서 defer는 html 파일이 파싱되는 동안 자바 스크립트와 동시에 받기 시작한다. html 파싱이 다 완료가 된 후 자바 스크립트를 실행해주기 때문에 defer를 사용하는 것이 좋다. 

CSS뿐 아니라 javascript를 추가했을때, head끝에, body끝에, async 방식으로 추가했을 경우 문제가 생길 수 있다.

head에 넣으면 JS파일을 다운 받느냐 html파일이 늦게 뜨게된다.

body 끝에 넣으면 JS 기능이 늦게 뜨게 되므로 문제가 생길 수 있다.

async 방식으로 넣게 되면, 병렬로 다운받아 속도는 빠르지만 중간에 block이 될 수도 있고 html이 완성되기 전에 js가 일부분 진행되므로 문제가 생길 수 있다.

따라서 defer를 사용하는게 제일 효과적이다.

 

'use strict' (자바 스크립트 tip)

자바 스크립트를 사용할때, 파일 제일 위에 'use strict';을 사용하게 되면, 비 상식적인 코드를 사용할 수 없게 되고 이는 자바스크립트을 엄격하게 사용해서 빠르고 효율적으로 잘 사용할 수 있다.