웹 프론트엔드 개발자 면접 - CSS

웹 프론트엔드 개발자로서 면접을 볼 때 받게 될만한 기술 면접 질문리스트와 적절한 답변에 대해서 검색한 내용을 모두 취합하고 내용을 덧붙여서 포스팅을 작성해 보았습니다.

 

* HTML, CSS, Javascript 카테고리로 나누어서 진행됩니다.

 

(면접 질문과 그에 대한 답변을 얻은 곳의 출처는 하단에 표시하였습니다.)

 

CSS

 

 

1. 컨텐츠 숨기기

 

- display : none

 

- visibility : hidden (영역 존재, 컨텐츠만 안보임)

 

 

2. 반응형 웹의 3요소

 

- @media 쿼리

 

- Fluid Grid (media 크기에 따라 div block 크기 변경)

 

- Flexible Img

 

 

3. CSS selector 동작원리

 

- 브라우저가 HTML/CSS를 DOM 형식으로 변환시킴

 

- DOM에서 document 내용과 style 결합

 

- 브라우저가 DOM의 내용을 보여줌

 

 

4. CSS cascading system

 

- CSS가 우선순위를 가지고 있음에서 유리

 

- 선택자 우선순위 : !important > inline style > id > class > tag name

 

- 마지막에 지정된 스타일이 우선 적용

 

 

5. 반응형과 적응형 웹

 

- 반응형 : 전적으로 클라이언트에서 변화를 처리함, 디스플레이 너비에 따른 레이아웃 변형

 

- 적응형 : 서버에서 웹에 접근하는 디바이스를 체크하여 디바이스에 최적화된 마크업 호출

 

 

6. CSS 단위

 

1) absolute

 

- in : inches (1 in = 96px = 2.54cm)

 

- px : pixels (1/96th of 1in)

 

 

2) relative

 

- em : relative to the font-size of the elemnt - 현재 폰트 사이즈의 n 배수

 

- rem : relative to font-size of the root element - 루트 엘리먼트의 폰트 사이즈의 n 배수

 

- vw : relative to 1% of the width of the viewport – 현재 사용자 창의 1% 너비

 

- vh : relative to 1% of the height of the viewport – 현재 사용자 창의 1% 높이

 

* viewport : the brower window size.

 

 

7. CSS 전처리기

 

- 종류 : Sass, Less, Stylus

 

- 장점 : 재사용성, 유지관리, 시간적 비용 감소 (변수 선언, 블록 형식으로 중복 코드 작성 불필요, 분기 및 반복문 처리)

 

 

 

- 참고한 사이트

 

1. 질문 사이트 모음

 

프론트엔드 개발자 면접 질문 모음

 

프론트엔드 직군 웹개발자 면접질문 모음 답변 달아보기 — yoyounn18

 

프론트엔드 개발자 기술면접 인터뷰 질문 모음(업데이트)

 

프론트엔드 개발자 면접 질문(기술면접) 정리

 

프론트엔드 면접 질문 모음