meta

charset

<meta charset="utf-8">

html문서에 입력된 텍스트를 UTF-8 방식으로 인코딩한다.

한글이나 아랍어 같은 영어 이외의 문자가 문서에 존재한다고 가정하자.
이때 charset 값이 UTF-8이 아닌 ascii 로 설정되어 있다면
문자 인코딩이 ascii 방식으로 진행되어 영어 이외의 언어는 알아먹을 수 없는 이상한 문자로 변형된다.
참고로, UTF-8은 문자 데이터 크기가 가변적이며 언어마다 그 크기가 다르다.

viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

viewport는 주소창 아래의 브라우저 영역을 말한다.
스크롤바 영역은 제외한다.

기기 자체의 화면이 작은 경우에는 가상 뷰포트에 먼저 렌더링 후 기기 화면 크기에 맞게 뷰포트를 축소한다.
예를 들어, 모바일 기기 화면의 width 값이 640px 이라면 640px보다 큰 가상 뷰포트에 렌더링된 후 width 640px 값에 맞게 뷰포트를 축소한다.
이 경우 문제가 발생한다.

미디어 쿼리를 이용하여 반응형 페이지를 제작했다고 가정하자.

• width 값이 1000px 부터는 미디어 쿼리가 적용되게 설정해놓은 상태
• 가상 뷰포트 width 값은 980px
• width 값이 1000px 부터 적용되는 미디어 쿼리가 적용되지 않는 상태가 된다

위 문제를 해결하기 위해 meta 태그에 viewport를 지정한다.

content

• width 값은 픽셀이 될 수도 있다.
• width 값이 device-width 로 적용되어 있다면 뷰포트 크기를 디바이스에 맞춰 렌더링한다.
• initial-scale=1은 웹페이지가 처음 렌더링됐을때 줌 확대율이 100퍼가 된다.

next-route-announcer

<next-route-announcer style="position: absolute;">
	<div ...>
    	...
    </div>
</next-route-announcer>

Nextjs는 next-route-announcer 태그를 DOM에 삽입하여 경로가 업데이트 되는 것을 추적하고
로딩을 표시하는 컴포넌트는 이 태그 안에 위치하게 된다.

link

preload

<link rel="preload" as="font" ... />

preload가 지정된 데이터를 다른 데이터보다 먼저 요청하여 빠르게 로딩하게 된다.
preload를 사용할때는 as 속성도 같이 지정해줘야한다.