[면접질문] front-end 개발자 인터뷰 문제 - CSS 영역

※ 실무 2년차 수준의 답변임을 감안해주세요 :D

Last Update : 2015.06.01

CSS 관련질문:

1. "reset" CSS가 무엇인지, 어떻게 유용한지 설명 해주세요.

reset css는 브라우저가 가지고 있는 기본 css를 재설정하는 것이다.  예를 들자면, html, body { margin:0; padding:0; } ul { margin:0; padding:0; list-style:none; } 과 같다. 나의 경우에는 default.css 라는 파일을 규정해놓고 퍼블리싱을 시작한다. 어떤 특정 내용을 긁어다 쓰기보다는 사이트 구성에 필요한 기본적인 내용을 가지고 쓰는것이 중요하다.

2. Floats가 어떻게 동작하는지 설명해주세요.

float 는 left, right, none 속성이 있다. 말 그대로 우측, 좌측, 기본으로 정렬할 수 있다.

[참고] http://css-tricks.com/all-about-floats/

3. 클리어링(Clearing) 기술에는 어떤 것들이 있으며, 어떠한 경우에 어떻게 사용하는 것이 적절한지 설명하세요.

float 속성에 대한 영향을 받지 않게 하려할 때 사용한다.

float 속성을 감싸고 있는 element의 height를 알맞게 조정하기 위해 사용한다.

[참고] http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/

4. CSS 스프라이트(CSS Sprites)를 설명하고, 페이지나 사이트를 어떻게 향상시키는지 설명하시오.

CSS Sprite 기법은 아래 그림에서 볼 수 있는 것 처럼 여러개의 이미지를 하나로 모아 이미지 파일의 리퀘스트를 줄이는 방법이다. 사용자 입장에서는 세개나 받아야 했던 이미지를 한개만 받으면 되니 이미지를 불러오는 시간이 단축된다. 이미지 여러개를 하나로 합치면 파일 용량이 커지진 않을까 하는 우려가 들수도 있지만, 실제로 세개의 이미지를 합친 한개의 파일 용량은 개별 이미지의 파일 용량을 더한 값보다 작아서 용량을 줄이는 효과도 동시에 얻을 수 있다.

[출처] http://nuli.navercorp.com/sharing/blog/post/23818

[참고] http://windtale.net/blog/css-image-sprite-automation-with-grunt-spritesmith/

5. IE box model과 W3C box model의 차이점을 설명하시오.

	css(box-sizing)	image
W3C box model	content-box (only content)
Internet Explorer box model	border-box (include content, padding, border)

[출처] http://programmers.stackexchange.com/questions/147587/the-box-model-internet-explorer-vs-w3c

6. Image Replacement를 사용해야 할 때, 선호하는 기술과 언제 사용하는지를 설명 해주세요.

image replacement는 이미지 로드가 느리거나, 실패했을 때, CSS가 정상 적용되지 못했을 때, 그리고 이미지를 인식하지 못하는 시각장애인들이 스크린리더를 통해 이미지에 대한 설명을 들을 수 있도록 하기 위해 사용한다. 

기본적으로 선호하는 기술은 이미지에 대체텍스트(alt="" 속성)를 넣는 것이다. background로 이미지를 넣는 경우에는 <span>대체텍스트</span> 이런식으로 작업하고 해당 태그를 display:none; / text-indent:-9999px; / font-size:0; 등을 이용하여 숨긴다.

방법1) display:none;

방법2) margin-left:-2000px;

방법3) text-indent:-9999px;

방법4) <img src="" alt="replacement text"> & text-indent:-9999px;

방법5) <img src="" alt="replacement text"> & display:block;

방법6) padding-top:□px; height:0;

방법7) dispaly:block; width:0; height:0; overflow:hidden;

방법8) position:absolute; width:100%; height:100%;

방법9) font-size:1px; color:#fff;

다양한 방법들을 제시하고 그에 따른 분석이 함께 적혀있다. 모든 것이 좋은 방법은 아니니 유의하기 바란다.

[출처] http://css-tricks.com/css-image-replacement/

7. CSS 요소핵(CSS property hacks)을 조건부적으로 .css파일안에 넣으시나요 혹은 다른 방식이 있나요?

나의 경우엔 기본적으로 핵을 잘 쓰지 않는다. 주로 모던 브라우저 및 IE10 이상을 대상으로 작업하기 때문이다.

핵이 사용되는 부분이 적다면 css 파일에 같이 넣고 브라우저 버전 별(ex. IE)로 까다롭게 필요하다면 따로 떼어내 조건부 주석을 달고 페이지에 넣는다.

<!--[if IE 7]> <style> body { overflow:visible !important; } .ev_middle .key_enter .redeem { position:relative; top:-1px; } .ev_middle .ev_desc h2 img { position:relative; } </style> <![endif]-->

8. 기능이 제약된 브라우저를 위해서 어떤 방식으로 페이지를 만드나요? * 어떠한 기술과 절차를 거치는지 설명하시오.

9. 컨텐츠를 안보이게 하는 기술들의 차이점을 설명하시오.(그리고 스크린 리더(Screen readers)에서 접근이 가능한 방법은?)

1) display:none; (영역 자체가 없어지면서 컨텐츠가 안보임)

2) visibility:hidden; (영역은 존재하고 컨텐츠만 안보임)

3) box 요소 크기를 작게하고(width:0; height:0;) overflow:hidden; 사용

4) text-indent, position 등에 음수를 사용

10. 그리드 시스템(Grid system)을 사용한 적이 있나요? 있다면 어떠한 것을 선호하나요?

960 그리드/12분할을 선호합니다. 이 이상의 분할은 다소 난잡한 느낌이 들기 때문입니다.

11. 미디어 쿼리(media queries)를 사용한 적이 있나요? 혹은 모바일에 맞는 layout과 CSS를 사용한 적이 있나요?

네, 있습니다.

12. SVG를 스타일링 하기 위한 편한 방법이 있나요?

SVG는 CSS 스타일 시트를 지원하므로, 그래픽의 내용물과 스타일을 파일로 분리하여 작업한다.

[참고] https://developer.mozilla.org/ko/docs/Web/CSS/Getting_Started/SVG_graphics

또는 SVG 파일 내에 직접 스타일 코드를 입력하기도 한다.

CSS 내에 '>' 문자가 포함 될 경우 XML 파서가 혼돈을 일으킬 것이기 때문에, <![CDATA[...]]> 블록을 적어주는 것을 권장한다.

[참고] http://www.sitepoint.com/svg-styling-with-css/

13. 인쇄를 하기 위해 웹페이지를 어떻게 최적화 하나요?

14. 효율적인 CSS를 작성하기 위한 "비법(gotchas)"은 어떤 게 있나요?

속성 구분을 엔터로 하지 않고 한 줄로 이어서 작성하기

#000000 대신 #000 으로 줄일 수 있는 것은 줄여쓰기

- universal 규칙을 피하라
- ID 규칙에 쓸모없는 태그나 클래스를 붙이지 말라
- Class 규칙에 쓸모없는 태그를 붙이지 말라
- 가장 명확한 규칙을 적용하라
- 자손 선택자를 피하라
- Tag 규칙은 자식 선택자를 절대로 포함하지 말라
- 자식 선택자를 사용할 때에 항상 주의하라
- 상속을 사용하라

[출처] 효율적인 CSS 작성하기

- 전체 선택자의 사용을 피하자
- ID 선택자를 태그 선택자나 클래스 선택자와 함께 사용하지 말자
- 불필요하게 긴 선택자의 사용을 피하자
- 자손 선택자의 사용을 피하자
- CSS3에서 추가된 선택자의 사용을 피하자

[출처] CSS 코드를 최적화하는 방법

15. CSS 전처리기(CSS preprocessors)를 사용해보셨나요? * 그렇다면, 사용 경험에 기반해 좋았던 점과 나빴던 점을 설명해주세요.

아직 실제로 사용해본 경험은 없으니 간단히 CSS 전처리기 중 가장 많이 사용되는 SASS에 대해 적어보겠다.

Sass(Syntactically Awesome Stylesheets)는 CSS 상위에 있는 메타언어meta-language로서 보다 간결하고 격식을 갖춘 CSS 문법을 제공한다.

소프트웨어 개발 원칙인 DRY(Don’t Repeat Yourself)를 적용해서 더 빠르고 효율적으로 코드를 작성하고 쉽게 유지보수 하도록 해준다.

스타일시트와 브라우저에서 해석할 .css 파일 중간에 위치하는 하나의 계층으로 Sass 문법으로 작성된 코드를 일반적으로 사용하는 CSS 코드로 변환해준다.

CSS는 쉽게 작성할 수 있지만 점점 커지고 복잡해지면 유지보수하기가 어려워지는데, Sass는 이런 CSS의 단점을 보완하는 적절한 기술이다.

[출처] 웹디자이너를 위한 SASS - 편집자주

1) Sass / SCSS

2) Less.js

3) Stylus

4) CSS-Crush

5) Myth

6) Rework

[출처] 6 Current Options for CSS Preprocessors

16. 페이지에서 표준 폰트가 아닌 폰트 디자인을 사용할 때 어떤 방식으로 처리하시나요? (웹폰트를 제외하고)

웹서버에 폰트 파일(.eot, .woff)을 올려놓고 사용합니다.

17. CSS Selector가 어떠한 원리로 동작하는지 설명하시오.

선택자는 크게 4가지로 분류할 수 있다.

1) ID        : #header, #footer

2) Class    : .container

3) Tag       : div, p, a

4) Universal : *

오픈소스 엔진으로는 Webkit(크롬, 사파리)과 Gecko(파이어폭스)가 널리 사용되고 있다.

스타일 엔진은 키 셀렉터로부터 시작하여 왼쪽으로 이동하면서 엘리먼트가 규칙에 적합한지 확인한다.

만약 엘리먼트가 이 규칙에 적합하거나 적합하지 않다는게 확인되면 멈춘다.

[출처] 효율적인 CSS 작성하기