저는 프론트엔드 개발 2년차이지만 html, css, javascript를 책이나 글로 공부해 본 적이 없었습니다. 최근에 시간을 가지고 모던 자바스크립트 deep dive 책을 하나씩 살펴보고 있습니다. 책에는 프론트엔드 면접 기출문제에서 보던 내용과 실제로 면접에서 받아보았던 내용들이 있습니다. 이 책을 보고 실제 면접에서 나올 수 있을만한 문제, 받아보았던 문제들과 대답 그리고 2년간 개발하면서 몰랐던 내용들을 공유하고자 합니다. 1편에서는 html, css 에 관한 내용을, 2편에서는 javascript에 관한 내용을 다루도록 하겠습니다.

HTML

-- 시맨틱 태그(semantic tag)는 무엇이고 어떤것이 있나요?

시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 
하는 태그를 말하며, form, table, img, header, nav, aside, section, 
article, footer 등이 있습니다.

몰랐던 것들

-- b태그 대신 strong 태그를 사용하는것이 웹표준을 준수하는 방법이다.

CSS

-- css 셀렉터(or 선택자)는 무엇이고 어떤것이 있나요?

셀렉터는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단이다.
셀렉터에는 종류는 다음과 같다.
 - 전체 셀렉터(*)
 - 태그 셀렉터(p, div)
 - ID 셀렉터(#id)
 - 클래스 셀렉터(.class)
 - 어트리뷰트 셀렉터(a[href])
 - 복합 셀렉터
    - 후손 셀렉터(div p)
    - 자식 셀렉터(div > p)
    - 형제 셀렉터
      - 인접 형제 셀렉터 (div + p)
      - 일반 형제 셀렉터 (div ~ p)
 - 가상 클래스 셀렉터
    - 링크 셀렉터(:link)
    - 동적 셀렉터(:hover)
    - UI 요소 상태 셀렉터(:disabled)
    - 구조 가상 클래스 셀렉터(:first-child)
    - 부정 셀렉터(:not([type=password]))
    - 정합성 체크 셀렉터(:valid)
 - 가상 요소 셀렉터(::after)

-- css 프로퍼티 값의 단위는 어떤게 있나요?

px : px은 픽셀(화소) 단위이다.
% : %는 백분률 단위의 상대 단위이다.
em : em은 배수(倍數) 단위로 상대 단위이다. 요소에 지정된 사이즈(상속된 사이즈나
디폴트 사이즈)에 상대적인 사이즈를 설정한다.
rem : rem은 최상위 요소(html)의 사이즈를 기준으로 삼는다. rem의 r은 root를 의미한다.

-- HTML요소의 block 특성과 inline 특성에 대해 아시나요?

block

항상 새로운 라인에서 시작한다.
화면 크기 전체의 가로폭을 차지한다. (width: 100%)
width, height, margin, padding 프로퍼티 지정이 가능하다.
block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다
block 레벨 요소 예
div, h1 ~ h6, p, ol, ul, li, hr, table, form 

inline 

새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있다. 즉, 줄을 바꾸지 않고 다른
요소와 함께 한 행에 위치한다.
content의 너비만큼 가로폭을 차지한다.
width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다.
상, 하 여백은 line-height로 지정한다.
inline 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정된다.
inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없다. inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용된다.
inline 레벨 요소 예 : span, a, strong, img, br, input, select, textarea, button

inline-block
block과 inline 레벨 요소의 특징을 모두 갖는다. inline 레벨 요소와 같이 한 줄에 표현되면서
width, height, margin 프로퍼티를 모두 지정할 수 있다.

https://poiemaweb.com/css3-display

-- css 적용 우선순위는 어떻게 되나요?

CSS가 어디에 선언 되었는지에 따라서 우선순위가 달라진다.

1. head 요소 내의 style 요소
2. head 요소 내의 style 요소 내의 @import 문
3. <link> 로 연결된 CSS 파일
4. <link> 로 연결된 CSS 파일 내의 @import 문
5. 브라우저 디폴트 스타일시트

-- 콘텐츠를 중앙에 위치시키기 위해서 어떻게 할 수 있을가요?
https://poiemaweb.com/css3-centering

몰랐던 것들

-- image 요소 아래에 패딩된 여분의 공간이 생기는 이유와 제거하는 법

이를 제거하기위해 line-height: 0; 또는 margin-top:-1px;
등의 방법을 사용하였었는데 정확한 이유와 방안을 알 수 있다.