DOCTYPE 이란 무엇인가?
DOCTYPE은 document type의 약어로, 문서의 유형을 정의하기 위해 사용하는 선언문이다. 웹 문서의 시작을 알려주며, 웹 브라우저에서 처리할 문서가 HTML이며 어떠한 버전으로 사용했으니, 해당 방식대로 해석하라는 의미를 갖는다. HTML5 표준에 대한 DOCTYPE 선언은 <!DOCTYPE html>이다.
메타 태그(meta Tag)란?
메타 태그는 페이지에 대한 중요한 정보를 검색 엔진에 제공하는 요소로 HTML 코드의 헤더 섹션에 있다. 메타 태그는 검색 엔진에 사용자에게 페이지를 표시하는 방법과 검색 결과에 표시되는 방법을 알려준다.
시맨틱 태그(Semantic Tag)란?
Semantic은 '의미론적인'이라는 뜻을 가지며, 시맨틱 태그란 의미가 있는 태그를 말한다. div나 span과 같이 의미가 없는 태그는 태그만 보고 역할을 유추하기 어렵지만, header, footer, nav, article 등 시맨틱 태그를 사용하면 역할을 명확하게 정의할 수 있다.
시멘틱 태그의 장점
- SEO(Search Engine Optimization) 최적화에 유리
- 웹 접근성에 효율적
- 유지보수의 용이성
<head> 안에 <link>를 넣는 이유
페이지가 처음 로드되면 HTML과 CSS가 동시에 파싱된다. HTML은 DOM(Document Object Model)을 만들고 CSS는 CSSOM (CSS Object Model)을 만든다. 두 가지 모두 웹사이트에서 시각적인 부분을 만드는데 필요하므로, 빠른 "first meaningful paint"를 가능하게 한다. 상단에 배치하면 페이지가 점진적으로 렌더링되기 때문에 UX가 향상됩니다.
</body> 직전에 <script>를 넣는 이유
<script>는 다운로드되고 실행되는 동안 HTML 파싱을 차단한다. 스크립트를 맨 아래에 두면 HTML을 먼저 파싱하여 사용자에게 표시할 수 있다. 또한, <script>를 맨 아래에 두면, 브라우저가 전체 문서가 파싱될 때까지 스크립트 다운로드를 시작할 수 없기 때문에 DOM 요소를 조작해야하는 코드가 오류를 발생시키지 않고 전체 스크립트를 중지시키지 않는다.
프로그레시브 렌더링(Progressive Rendering)이란?
프로그레시브 렌더링이란 콘텐츠를 가능한 한 빠르게 표시하기 위해 웹 페이지의 성능을 향상시키는 데 사용되는 기술이다. (특히, 인식되는 로딩 시간을 향상시킨다.)
서버에서 웹 페이지의 일부를 순차적으로 렌더링하고 전체 페이지가 렌더링 될 때까지 기다리지 않고, 부분적으로 클라이언트에 스트리밍하는 기술이다.
- 브라우저, 서버에 HTML 요청
- 서버에서 API request 생성 후, 중요 콘텐츠 우선 렌더링하고 브라우저로 스트리밍
- 브라우저, HTML chuck 로드 후 렌더링
- 서버에서 중요하지 않은 컨텐츠를 렌더링하여 클라이언트로 스트리밍
- 브라우저, 나중에 중요하지 않은 콘텐츠 수신하고 렌더링
- 전체 페이지 로드 후, 브라우저는 일반적으로 이벤트 핸들러 및 기타 상호작용 동작을 연결하는 DOM element에 대한 상호 작용 수행
PR 장점
- 서버에서 중요한 컨텐츠를 먼저 클라이언트로 스트리밍
- Javascript Bundle을 로드하는데 걸리는 시간에 콘텐츠 미차단
- CSR과 SSR보다 빠른 페이지 로드
PR 단점
- 콘텐츠가 빠르게 표시되더라도 중요하지 않은 콘텐츠가 로드된 후, 상호 작용 활성화
- PR이 확립된 프레임워크가 없으며, 웹 어플리케이션의 한계에 대한 의존도 높음
* 관련 기술 예시
- 이미지 지연 로딩 : 페이지의 이미지를 한꺼번에 로딩하지 않는다. Javascript를 이용하여 사용자가 이미지를 표시하는 페이지 부분으로 스크롤할 때 이미지를 로드할 수 있다.
- 보이는 콘텐츠의 우선순위 설정 (또는 스크롤 없이 볼 수 있는 렌더링): 가능한 한 빨리 표시하기 위해 사용자 브라우저에서 렌더링될 페이지에 필요한 최소한의 CSS/콘텐츠/스크립트만 포함하면
deferred스크립트를 사용하거나DOMContentLoaded / load이벤트를 사용하여 다른 리소스와 내용을 로드할 수 있다.
이미지 태그의 srcset 속성
기기의 디스플레이 너비에 따라 다른 이미지를 사용자에게 제공하려는 경우 srcset 속성을 사용한다. 큰 화면을 가진 장치의 경우 고품질 이미지를 제공하여 사용자 경험을 향상시키고, 저해상도 이미지를 저사양 기기에 제공하여 성능을 높이고 데이터 낭비를 줄일 수 있다.
<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="..."><li>요소는 왜 <ul>요소의 자식 요소여야만 하나?
li태그는 목록의 항목을 나타내는 태그이기 때문이다. 따라서 목록을 담는 ul태그의 자식 요소 여야한다. li태그와 ul태그를 사용하지 않아도 문제는 없지만, 시멘틱하게 HTML을 작성하는 것이 다른 개발자가 보았을 때 쉽게 이해할 수 있기 때문에 협업의 측면상 중요하다.
id 속성과 class 속성의 차이
id 속성은 유일해야 한다는 특징이 있고, CSS 상에서는 id 앞에 "#"을 붙여 작성한다. 사실 id를 중복하여 작성해도 브라우저는 우리가 예측한대로 작동되지만, 웹 표준에는 어긋나게 된다. 이는 협업을 할 때 다른 개발자들에게 혼란을 야기할 수 있다.
class 속성은 중복선언이 가능하고, CSS 상에서 class 앞에 "."을 붙여서 작성한다. 같은 속성을 적용하고 싶을 때 유용하게 이용 할 수 있으며, 하나의 태그에 여러가지 class 를 지정할 수 있다.
"attribute"와 "property"의 차이점은 무엇인가요?
attribute는 HTML의 속성이다. 요소의 id나 class와 같은 추가적인 정보를 일컫는다. attribute는 html 텍스트 문서에 존재하기 때문에 정적으로 변하지 않는다.
property는 DOM의 속성이다. 즉, html의 attribute를 DOM 내에서 대신해서 표현이라고 보면 된다. property 는 DOM tree 안에서 존재해 동적으로 그 값이 변할 수 있다. ex) 체크박스
