CSS

• class와 id의 차이점에 관해서 설명해주세요.
• “reset” CSS가 무엇인지, 어떻게 유용한지 설명해주세요.
• Floats가 어떻게 동작하는지 설명해주세요.
• z-index에 관해 설명해주세요.
• BFC(Block Formatting Context)에 관해 설명해주세요
• 클리어링(Clearing) 기술에는 어떤 것들이 있으며, 어떨 때 어떻게 사용하는 것이 적절한지 설명하세요.
• CSS 스프라이트(CSS Sprites)를 설명하고, 페이지나 사이트를 어떻게 향상하는지 설명하세요.
• Image Replacement를 사용해야 할 때, 선호하는 기술과 언제 사용하는지를 설명해주세요.
• 브라우저 스펙 차이에 따른 스타일링 이슈를 수정하기 위해서 어떻게 접근하나요?
• 기능이 제약된 브라우저를 위해서 어떤 방식으로 페이지를 만드나요?
  • 어떠한 기술과 절차를 거치는지 설명하세요.
• 시각적으로 보이지 않고 스크린 리더에서만 가능하게 하는 방법에 관해 설명해주세요.
• 그리드 시스템(Grid system)을 사용한 적이 있나요? 있다면 어떠한 것을 선호하나요?
• 미디어 쿼리(media queries)를 사용한 적이 있나요? 혹은 모바일에 맞는 layout과 CSS를 사용한 적이 있나요?
• SVG를 스타일링하는데 익숙하신가요?
• 인쇄하기 위해 웹페이지를 어떻게 최적화 하나요?
• 효율적인 CSS를 작성하기 위한 "비법(gotchas)"은 어떤 게 있나요?
• CSS 전처리(CSS preprocessors)를 사용해보셨나요?
  • 그렇다면, 사용 경험에 기반을 둬 좋았던 점과 나빴던 점을 설명해주세요.
• 페이지에서 표준 폰트가 아닌 폰트 디자인을 사용할 때 어떤 방식으로 처리하시나요? (웹폰트를 제외하고)
• CSS Selector가 어떠한 원리로 동작하는지 설명해주세요.
• pseudo-elements에 관해서 설명하고 어디에서 사용되는지 이야기해보세요.
• box model에 관해 설명하고 브라우저에서 어떻게 동작하는지 설명해주세요.
• * { box-sizing: border-box; }은 무엇이고 사용했을때 이점은 무엇인가요?
• 기억나는 display 속성에 대한 값들을 나열해보세요.
• inline과 inline-block의 차이점은 무엇인가요?
• 요소를 배치하는 방법(relative, fixed, absolute, static) 간의 차이는 무엇인가요?
• CSS에서 'C’는 Cascading을 의미합니다. Cascading에 관해서 설명해주세요. 또 cascading system의 장점은 무엇인가요?
• CSS framework를 사용해본 적이 있으신가요? 실무에서 사용해보았다면 어떤 이점이 있었나요?
• 새로운 CSS Flexbox 혹은 Grid 스펙을 사용해 보신 적 있나요?
• 반응형(Responsive) 디자인은 적응형(Adaptive) 디자인과 어떤 차이점이 있나요?
• 레티나 그래픽 환경에서 작업해 보신 적이 있나요? 하셨다면 어떤 기술을 사용하셨나요?
• 절대 좌표대신 translate() 혹은 반대로 사용하는 이유가 있나요? 있다면 이유에 관해서 설명해주세요.

 

class와 id의 차이점
- id와 class의 차이는 id는 유일한 요소에 적용할 때, 그리고 css는 복수의 요소에 적용할 때 사용한다는 점이다.
- 하나의 id는 한 문서에서 한 번만 사용이 가능하지만, 하나의 class는 여러 번 사용이 가능하다.
- 우선순위는 id가 class보다 높다.

CSS selector가 어떠한 원리로 동작하나요?
선택자는 크게 네 가지가 있다. id, class, tag 그리고 *(universal). 스타일 엔진은 키 셀렉터로부터 시작하여 왼쪽으로 이동하면서 엘리먼트가 규칙에 적합한지 확인한다. 만약 엘리먼트가 이 규칙에 적합하거나 적합하지 않다는게 확인되면 멈춘다.

box model이 무엇이며, 브라우저에서 어떻게 동작하는지 설명해 주세요. (D사 화상면접)
box model은 각각의 Object를 박스 형태로 나타내어 브라우저에 배치하기 위한 규칙이다.

• W3C 박스 모델 : content-box로 width가 content만 포함
• IE 박스 모델 : border-box로 width에 content, padding, border를 모두 포함

padding과 margin의 차이가 무엇인가요?
margin은 대상의 외부 여백을 의미하고, padding은 대상의 내부 여백을 의미한다.

float가 어떻게 동작하나요?
float 속성은 현재 위치의 왼쪽이나 오른쪽으로 shift되어 배치되는 박스의 일종이다. 이 때 컨텐츠는 float 속성이 적용된 요소의 주변에 위치하게 된다.

display 속성값

block	항상 새로운 라인에 요소가 시작되고 화면 크기의 전체 가로폭을 영역으로 차지한다. width 속성 값을 부여해주면 그 너비만큼 영역을 차지한다.
inline	새로운 라인에서 시작되지 않으며 다른 요소들과 같은 줄에 배치될 수 있고 content 너비만큼의 영역을 차지한다. 그리고 width, height, margin-top, margin-bottom 속성이 적용이 되지 않는다.
inline-block	block 레벨 요소와 inline 레벨 요소의 특징을 모두 가지고 있다. 한 줄에서 inline 레벨 요소들과 같이 배치될 수 있으며 width와 height 속성으로 영역의 크기를 지정할 수 있다.
none	선택한 요소들을 화면에 나타나지 않게 한다. visibility: hidden과의 차이점은 영역이 남아있는지 여부가 다르다는 점이다.(display: none은 영역도 없앰)

 

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

• static : 기본값으로 요소들이 겹치지 않고 상→하로 배치된다.
• relative : 원래 배치되어야 할 위치에서 지정한 값 만큼 떨어진 곳에 요소를 배치한다.
• fixed : 웹 브라우저 화면 전체를 기준으로 배치한다. 스크롤을 하더라도 위치가 고정된
  다.
• absolute : 가장 가까운 상위 요소의 위치를 기준으로 지정한 값 만큼 떨어진 곳에 요
  소를 배치한다.

flex를 사용하는 이유가 무엇인가요?
flex는 레이아웃을 좀 더 편하게 잡기 위해서 만들어진 css 속성이다.
- flex를 사용하면 요소들의 크기나 위치를 쉽게 잡을 수 있다.
- flex는 컨테이너와 아이템 개념을 사용하여 요소의 크기가 불분명하거나 동적인 경우에도 요소를 효율적으로 정렬할 수 있게 해준다.

클리어링(Clearing)에는 어떤 것들이 있으며, 각각은 어떨 때 사용하나요?
float 속성의 영향에서 벗어나기 위해 사용하는 clear 속성은 float의 특성을 지워주는 역할을 한다. 총 4가지 값이 있는데 both는 양 쪽의 float 속성을 지워주며, left와 right는 각각 왼쪽, 오른쪽 속성을 지워주고 none은 기본 값으로 아무 것도 지워주지 않는다. 보통은 float 속성을 감싸고 있는 요소들의 height를 조정하기 위해 사용된다.

CSS-in-JS에 대해서 설명해 주세요.
- CSS-in-JS는 CSS보다 더 강력한 추상화이다. JS를 사용하여 스타일을 선언적이고, 유지보수 가능한 방식으로 설명한다. JS를 CSS로 전환하는 고성능 컴파일러로, 런타임 및 서버사이드에서 작동한다. 인라인 스타일과는 다른 개념이다.
- 대표적인 라이브러리로 styled-components가 있다.

- 장점
1) 컴포넌트 단위로 생각할 수가 있다. CSS-in-JS는 CSS 모델을 문서 레벨이 아니라 컴포넌트 레벨로 추상화 한다.(모듈성)
2) 진정한 분리 법칙을 따른다. CSS에는 명시적으로 정의하지 않은 경우, 부모 요소에서자동으로 상속되는 속성이 있다. CSS-in-JS의 경우 부모 요소의 속성을 상속하지 않는다.