📌 기술 면접 준비 관련_HTML

Q : 일반적으로 CSS를 불러오기 위해 < link > 요소를 < head > 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 < script > 요소를 < body > 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?

A : CSS 파일을 < head > 요소 안에 두는 것과 Javascript 파일을 < body > 요소가 끝나기 직전에 두는 것은 웹페이지의 로딩과 렌더링동안 발생하는 다른 동작 및 우선순위 때문이다.

CSS 파일은 주로 < head > 요소 안에 두는데, 그 이유는 페이지의 초기 렌더링을 최적화하기 위함입니다. 브라우저가 먼저 스타일을 로드하고 페이지 레이아웃을 결정할 수 있도록 하여 초기 렌더링 속도를 향상 시킬 수 있으며 사용자가 보다 나은 경험을 할 수 있습니다.

반면에, Javascript 파일은 주로 < body > 요소가 끝나기 직전에 두는데, 그 이유는 페이지의 로딩을 블로킹하지 않고 사용자에게 빠른 초기 로딩 경험을 제공하기 위함입니다. 또한 페이지의 HTML과 CSS가 먼저 로드되고 렌더링 된 후에 Javascript가 로드되기 때문에 자원 로딩 순서가 보장됩니다. 이는 페이지의 안정성과 예측 가능한 동작을 제공합니다.

자원로딩순서란?

웹 페이지가 로딩될 때 다양한 자원들이 어떤 순서로 부라우저에 의해 요청되고 다운로드 되는지를 나타냄

---

Q : < li > 요소는 왜 < ul > 요소의 자식 요소여야만 하나요?

A : < li > 요는 < ul > < ol >의 자식 요소여야 하는 이유는 구조적으로 목록의 항목을 표현하고 구분하기 위함입니다. < ul >은 순서 없는 목록을, < ol >은 순서 있는 목록을 나타내며, 각각의 목록 항목은 < li >로 표현됩니다. 이렇게 함으로써 웹 문서가 의미적이고 구조적으로 명확해지고 가독성이 좋아지며, 스타일링과 선택자 적용이 쉬워집니다.

시맨틱 요소란?

의미를 가지고 있는 HTML 요소를 의미합니다. 해당 요소가 문서의 구조와 의미에 대한 정보를 명확하게 전달합니다. 시맨틱 요소를 사용하면 웹 페이지의 의미와 구조를 더 명확하게 표현할 수 있으며, 이는 검색 엔진이나 웹 브라우저 등에서 적절한 해석을 할 수 있게 도와줍니다.

제목 태그	이름 설명
< header >	문서나 섹션의 머리말을 나타냅니다.
< nav >	네비게이션 링크를 그룹화한 것을 나타냅니다.
< main >	문서의 주요 콘텐츠를 나타냅니다.
< article >	독립적으로 구분되거나 재사용 가능한 영역을 나타냅니다.
< section >	문서의 섹션을 나타냅니다.
< aside >	주 콘텐츠와 관련이 있는 부가 정보를 나타냅니다.
< footer >	문서나 섹션의 꼬리말을 나타냅니다.

---

Q : id 속성과 class 속성의 차이에 대해서 설명해 주세요.

A : id는 유일성을 갖는 하나의 요소를 식별하고, class는 여러 요소를 그룹화하여 스타일이나 자바스크립트로 조작할 때 사용이 됩니다.

id는 한 페이지에서 하나의 요소만 가질 수 있고 주로 특정 요소를 식별하고 스타일링하기 위해 사용됩니다. class는 여러 요소에 동시에 적용할 수 있는 일반적인 식별자를 제공하고 여로 요소를 선택하고 조작하는데 사용이 됩니다.

---

Q : Semantic HTML의 필요성을 예시를 들어 설명해 주세요.

A : Semantic HTML은 웹 문서의 구조를 명확하게 정의하고 의미론적으로 풍부하게 만드는 것을 의미합니다. 시맨틱 HTML을 사용하면 웹 페이지의 구조와 콘텐츠가 브라우저, 검색 엔진, 스크린 리더 등에게 더 명확하게 전달되어 가독성이 향상되고 웹 접근성이 향상됩니다.

예를 들어 제목 태그를 사용하여 문서의 섹션을 정의하여 페이지의 구조를 명확하게 하고 검색 엔진은 이러한 제목을 통해 페이지의 주요 내용을 이해하게 됩니다.
페이지의 독립적인 콘텐츠 영역을 정의하기 위해 < article >, < section > 태그를 사용하여 특정 주제에 관한 내용이나 독릭적인 섹션을 브라우저와 검색 엔진에 명시적으로 알려줍니다.