class와 id의 차이점에 관해서 설명해주세요.

id 선택자와 class 선택자의 차이는 문서 안의 ‘복수’의 요소에 스타일을 적용하는 것인가 아니면 ‘유일’한 요소에 스타일을 적용하는 것인가 입니다.

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

각 브라우저는 본인만의 기본 스타일이 지정되어있습니다.
이 때문에 개발자가 명세한 스타일이 깨지는 경우가 있는데, 이를 방지하고 브라우저마다 공통된 스타일을 적용하기 위하여 사용합니다.

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

float은 ‘뜨다’라는 의미로 보통 CSS 상에서 정렬하기 위해 사용되는 속성입니다.
일반적인 블락(Block)요소는 기본값으로 width:100%; 의 값을 가지는데 플롯 속성이 선언되면,
좌측 혹은 우측에 다른 요소를 배치하기 위해 자신의 너비를 최소화 하게 됩니다.
예를 들어 리스트 레이아웃과 같이 좌측 혹은 우측에 이미지를 배치하고 나머지 영역에 텍스트를 보여줄 때,
이미지태그에 float:left;, float:right;를 사용하게 되면 이미지는 지정한 방향으로 정렬되고,
텍스트 영역이 나머지 부분을 차지하게 됩니다.
이때 텍스트에 margin이나 높이갚을 지정 할 수 없는데 텍스트 영역에 float을 지정하지 않았기 때문입니다.
이를 위해 overflow:hidden; 을 지정하여 주면 원하는 높이와 margin or padding을 지정 할 수 있습니다.

z-index에 관해 설명해주세요.

z-index는 겹치는 요소들간에 어떤 것을 상위에 표시할 것인지에 대한 명시값입니다.
z-index 를 사용하기 위해서는 기억해야할 3가지 사항이 있습니다.
우선 z-index 값을 지정하기 위해서는 해당 요소의 position 속성이 relative, absolute, fixed 중 하나여야만 합니다.
포지션 값이 지정되지 않으면 해당 요소들은 z-index:0; 처럼 동작합니다.
두 번째로 z-index의 값은 같은 depth의 요소끼리 비교하는 것이 원칙입니다.
같은 depth에서 하위로 자식 엘리먼트가 있는경우, 이는 z-index의 고려대상이 되지 않습니다.
마지막으로 z-index의 기본값은 auto이며, 이 경우 브라우저는 그 요소를 제쳐두고 자식 요소의 z-index 값을 비교대상으로 삼습니다.
참조 링크:퀴즈로 풀어보는 CSS z-index 속성의 3가지 포인트

BFC(Block Formatting Context)에 관해 설명해주세요

Bock Formatting context는 다음 조건중 하나 이상을 만족하는 HTML BOX입니다.

1
2
3
4
1. float 값은 none이 아닙니다.
2. position의 값은 static도 relative도 아닙니다.
3. display 값은 table-cell, table-caption, inline-block, flex 또는 inline-flex입니다.
4. 오버플로 값은 표시되지 않습니다.

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

클리어링은 float 속성을 사용할 때 태그를 부유시킨 이후 문서의 흐름을 제거하기 위해 쓰입니다.
방향에 따라 3가지 속성을 사용할 수 있습니다.

  1. left: 좌측 부유 제거
  2. right: 우측 부유 제거
  3. both: 양쪽 모두 제거

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

CSS 스프라이트는 사이트의 성능향상을 위하여 여러개의 이미지를 합쳐서 하나의 이미지로 만들고 이를 잘라 사용하는 방식입니다.
예를 들어 한 페이지에서 10개의 이미지 리소스가 필요한 경우,
원격지로 부터 10번의 요청을 해야하지만 CSS 스프라이트 기법을 사용하면 한 번의 요청으로 이미지를 받아온 후 화면에 렌더링 할 수 있습니다.

Image Replacement를 사용해야 할 때와, 선호하는 기술을 설명해주세요.

Image Replacement는 웹 접근성을 준수하여 시각장애인에게(이미지를 볼 수 없는 상황) 대체텍스트를 제공하는 방법입니다.
첫 번째 방법은 Text-indent를 활용한 방법입니다.
text-indent 속성 값에 현재 사용되고 있는 디스플레이의 해상도보다 작은 음의 정수 값을 주는 방법입니다.
두 번재 방법은 높이와 넓이를 0으로 설정하는 방법입니다.
이 방법은 대체 텍스트 글자가 들어가는 등의 요소의 높이와 너비를 0으로 지정하는 방법입니다.
먼저, 대체할 텍스트 요소에 BackGround 이미지를 설정한 다음 대체 텍스트가 포함되는 요소의 높이와 너비를 0으로 지정합니다.

브라우저 스펙 차이에 따른 스타일링 이슈를 수정하기 위해서 어떻게 접근하나요?

reset css와 nomalize css를 사용하여 초기화 한 후 스타일링 합니다.

기능이 제약된 브라우저를 위해서 어떤 방식으로 페이지를 만드나요?

  • 어떠한 기술과 절차를 거치는지 설명하세요.

(어떤 기능인지 정확히 명시해줬으면….)
IE 10이하 버전의 경우 스크립트가 동작하지 않는 경우가 있기 때문에
user-agent 사용자의 브라우저를 판별하고 이에 대한 alert나 상단에 문구를 표시하는 편입니다.

시각적으로 보이지 않고 스크린 리더에서만 가능하게 하는 방법에 관해 설명해주세요.

  1. display:none; (영역 자체가 없어지면서 컨텐츠가 안보임)
  2. visibility:hidden; (영역은 존재하고 컨텐츠만 안보임)
  3. box 요소 크기를 작게하고(width:0; height:0;) overflow:hidden; 사용
  4. text-indent, position 등에 음수를 사용
    출처: http://zinee-world.tistory.com/121 [zineeworld]

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

디자인 프레임워크인 부트스트랩과 Angular Matiral을 사용해보았습니다.
또한 Ionic은 기본 스펙으로 그리드를 제공하기 때문에 주로 사용하였습니다.
주로 12 Column Grid System을 사용합니다.

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

일전에 ‘(주)비피도 쇼핑몰’을 제작할 때 사용하였습니다.
미디어 쿼리를 통해 모바일, 웹사이트로 크기를 나누고, 이를 각각 스타일링 하였습니다.

SVG를 스타일링하는데 익숙하신가요?

아니요, 익숙해질 예정입니다.

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

미디어쿼리를 사용해 print용 스타일을 따로 만듭니다.

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

  1. id selector와 class selector을 구분하고 최대한 공통된 스타일링을 사용합니다.
  2. CSS 엔진의 색인 속도를 높이도록 우선순위를 고려하여 스타일 합니다.
  3. !important의 사용과 인라인 스타일의 사용을 최대한 지양합니다.

CSS 전처리(CSS preprocessors)를 사용해보셨나요?

  • 그렇다면, 사용 경험에 기반을 둬 좋았던 점과 나빴던 점을 설명해주세요.

주로 sass를 사용합니다.
sass를 사용했을 때의 좋은 점은 우선 다양한 기능(mixin, import등)을 사용할 수 있어스타일링의 추상화가 가능하단 점입니다.
나빴던 점은 직접적인 스타일링이 아니라 Html과 같이 계층형으로 코딩한 후 컴파일 되기 때문에 CSS로 작성했을 때보다 코드의 양이 늘어난다는 점입니다.

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

eot, woff, woff2와 같은 파일을 import하여 사용합니다.

CSS Selector가 어떠한 원리로 동작하는지 설명해주세요.

CSS 엔진은 오른쪽에서 왼쪽으로 이동하면서 엘리먼트가 규칙에 적합한지 확인합니다.
만약 엘리먼트가 이 규칙에 적합하지 않으면 멈추게 됩니다.

pseudo-elements에 관해서 설명하고 어디에서 사용되는지 이야기해보세요.

CSS pseudo-elements는 element의 지정된 부분을 스타일화하는 데 사용됩니다.
예를 들어 다음과 같이 사용할 수 있습니다.

  • 요소의 첫 번째 문자 또는 선 스타일 지정
  • 요소의 내용 앞이나 뒤에 내용 삽입

box model에 관해 설명하고 브라우저에서 어떻게 동작하는지 설명해주세요.

HTML의 모든 엘리먼트는 width(너비)와 height(높이)를 가지는 사각형 박스이며 안쪽에서 부터 바깥쪽으로 content(컨텐츠) -> padding(패딩) -> border(보더) -> margin(마진)으로 구성되어 있습니다.
엘리먼트에서 실제너비는 마진을 제외한 (content width) + (padding left) + (padding right) + (border left) + (border right)값입니다.
실제 높이 역시 (content height) + (padding top) + (padding bottom) + (border top) + (border bottom)값이 됩니다.

HTML & CSS 초보자 가이드 - 3강 : Box Model & Positioning

* { box-sizing: border-box; } 은 무엇이고 사용했을때 이점은 무엇인가요?

일반적으로 box model은 컨텐츠의 너비 혹은 높이 + 패딩 + 보더를 포함합니다.
이 때문에 패딩 값이 늘어나면 box model의 값이 커지는 문제가 발생할 수 있습니다.
그러나 box-sizing: border-box;를 설정하게 되면 패딩이나 border값이 늘어나도 box model의 크기는 변하지 않으며 컨텐츠의 표시영역이 줄어들어 일관된 사이즈를 유지할 수 있습니다.

기억나는 display 속성에 대한 값들을 나열해보세요.

display: inline;
display: inline-block;
dispaly: block;
display: none;
display: flex;

inline과 inline-block의 차이점은 무엇인가요?

inline 속성을 가진 태그는 가로폭을 전부 차지 하지 않고 상위 태그 옆으로 붙는 특징이 있습니다.
또한 width와 height값을 지정해도 크기는 변하지 않습니다.
반면 block 속성을 가진 태그는 가로폭을 전부 차지하며 width, height값을 가질 수 있습니다.
inline-block는 이러한 inline 속성과 block속성의 특징을 모두 가지고 있는 속성으로서
가로폭을 전부 차지하지 않고, width와 height 값을 가질 수 있습니다.

요소를 배치하는 방법(relative, fixed, absolute, static) 간의 차이는 무엇인가요?

static: HTML Element는 position의 기본값으로 static 값을 가지며 static으로 배치된 Element는 위, 아래, 오른쪽, 왼쪽 속성의 영향을 받지 않습니다.
relative: relative 속성은 static과는 달리 top, bottom, left, right 값을 통해 Element의 위치를 변경할 수 있습니다.
fixed: 뷰포트를 기준으로 배치되므로 페이지가 스크롤 되어도 항상 같은 위치에 유지됩니다.
absolute: 가장 가까운 위치에있는 부모 엘리먼트를 기준으로 배치됩니다. 만약 absolute 속성의 부모가 없다면 페이지 스크롤과 함께 움직입니다.

CSS에서 ‘C’는 Cascading을 의미합니다. Cascading에 관해서 설명해주세요. 또 cascading system의 장점은 무엇인가요?

Cascading은 계단모양의 폭포를 의미하며 CSS에서 스타일 시트의 우선순위를 지정하는 방식이 폭포수와 닮아 붙여진 의미 입니다.
cascading system을 사용하였을 때의 장점은 HTML Element마다 일일이 스타일을 지정하지 않아도 되므로 렌더링 속도와 코드의 양을 줄여 성능 향상에 기여할 수 있습니다.

CSS framework를 사용해본 적이 있으신가요? 실무에서 사용해보았다면 어떤 이점이 있었나요?

부트스트랩, Angular Material을 사용해보았습니다.
실무에서 사용했을때 우선 직접적으로 모든 스타일링을 하지 않고,
프레임워크에서 제공하는 컴포넌트들을 사용하기 때문에 시간을 절약할 수 있습니다.
또한 사용자에게 일관된 디자인을 제공할 수 있습니다.

새로운 CSS Flexbox 혹은 Grid 스펙을 사용해 보신 적 있나요?

주로 스타일링을 할 때 flexbox를 사용합니다.

반응형(Responsive) 디자인은 적응형(Adaptive) 디자인과 어떤 차이점이 있나요?

반응형 디자인은 기기별 사이즈에 따라 알맞은 크기로 콘텐츠를 제공하고, 사이즈별 제공하는 콘텐츠의 차이가 없는 디자인 입니다.
반면에 적응형 디자인은 미리 정해진 몇 가지 화면 크기를 기준으로 두고 비율에 맞춰 페이지를 구성하는 방식입니다.