Q) HTML Doctype 선언의 의미와 역할은?
A) HTML Doctype 선언은 HTML 문서가 웹 브라우저에 의해 어떤 방식으로 해석되어야 하는지 알려주는 역할을 하기 때문에 Doctype 선언은 HTML 문서의 첫 줄에 위치한다.
<!DOCTYPE html> 태그는 HTML 문서가 HTML5 표준으로 작성되어 있고 웹 브라우저가 그에 맞게 해석해야 한다는 것을 명시하는 것이다.
대표적인 HTML5 표준의 특징 중 하나로 빈(Empty) 태그를 닫는 / 기호 사용이 필수가 아닌 선택 사항이라는 것이 있고 <header>, <footer>, <nav> 같은 새로운 시맨틱(의미를 가지고 있는) 요소들이 추가되어 사용할 수 있다는 것이 있다.
Q) CSS 선택자 우선순위의 개념과 계산 방법을 설명하라
A) CSS 선택자 우선순위는 하나의 요소에 여러 스타일이 적용될 때, 어떤 스타일이 최종적으로 적용될지 결정하는 개념이다.
우선순위가 가정 높은 것은 CSS 속성에서 직접 사용하는 !important 키워드이고, 다음으로 HTML style 속성에서 선언하는 인라인 스타일이 있다.
아이디 선택자(#id), 클래스 선택자(.class), 태그 선택자(tag), 전체 선택자(*), 스타일 상속 등의 순서대로 점수가 매겨지고 계산되어 순위가 결정된다,
각 점수는 인라인 스타일이 1000점, 아이디 선택자는 0100점, 클래스 선택자는 0010점, 태그 선택자는 0001점, 전체 선택자는 0000점, 상속은 점수가 없다.
만약 구글 크롬 브라우저 기준 99버전부터 지원하는 @layer 규칙을 사용하면, 스타일 우선순위를 의도적으로 조정할 수 있다.
Q) 브라우저 기본 스타일의 초기화(Reset)와 표준화(Noramlize)의 차이점을 설명하라
A) 웹 브라우저마다 기본적으로 제공하는 스타일이 조금씩 다르기 때문에, 브라우저마다 일관성 있는 화면을 보여주기 위해서 초기화(Reset) 또는 정규화라고도 하는 표준화(Noramlize) 작업이 필요하다.
그중에서 초기화(Reset)는 모든 요소의 크기나 여백, 기타 모양을 말 그대로 초기화해서 처음부터 스타일을 다시 추가할 수 있게 하는 개념이다.
반면 표준화(Noramlize)는 브라우저 간의 스타일 차이를 일관성 있게 적용하기 위해 기본 스타일을 유지하며 일치시키는 개면이다.
그래서 페이지 스타일의 많은 부분을 원하는 대로 커스터마이징하려면 초기화(Reset)을 사용하고, 브라우저의 기본 스타일을 활용하려면 표준 화(Noramlize)를 사용하는 것이 좋다.
Q) 마진 병합(Margin Collapse) 현상이란 무엇인지 설명하라
A) 마진 병합은 서로 다른 두 요소의 CSS margin 속성의 값이 중첩되어 하나의 값으로만 출력되는 현상을 말한다.
기본적으로 두 형제 요소의 위아래 마진이 만나면 중첩되어 더 큰 값으로 결합되고, 또 부모와 자식 요소의 위쪽이나 아래쪽 마진이 서로 만나면 중첩되어 부모 요소의 마진 값으로 결합됩니다.
그래서 마진 병합은 블록 요소 간의 수직 정렬 간격을 일정하게 유지하거나 자식 요소를 통한 부모 요소의 여백 설정에서 유용할 수 있지만, 레이아웃 코드에 대한 가독성이 떨어지므로 간접적인 여백 생성의 마진 병합을 피하고 최신의 Flex나 Grid를 사용하는 것이 좋다.
Q) 오픈 그래프(Open Graph)는 무엇이고 어떤 역할을 하는지 설명하라
A) 오픈 그래프는 웹 페이지의 제목, 설명, 이미지, URL 등의 메타 정보를 정의하는 규약(프로토콜)이다.
이 메타 정보를 통해 페이스북이나 카카오톡 등 다양한 플랫폼에서 URL을 공유할 때 해달 페이지의 미리보기로 표시될 정보를 제공할 수 있고, 사용자는 URL로 접속하기 전에 해당 페이지의 기본 정보를 미리 확인할 수 있다.
대부분의 플랫폼 검색 엔진은 공유된 URL의 페이지 전체 로딩을 기다리지 않고 빠르게 메타 정보만 읽어서 해당 페이지의 정보를 파악하므로, 오픈 그래프나 트위너 카드 같은 메타 정보를 잘 제공해야 검색 엔진 최적와(SEO)에도 도움이 된다.
그래서 SPA(Single Page Application) 같은 단일 HTML 제공 사이트는 페이지 구조에 따라 이러한 메타 정보를 위해 별도의 컴퓨팅 서버가 필요할 수 있다.
안녕하세요. 프론트엔드 지망생입니다.