class와 id의 차이점에 관해서 설명해주세요.
class는 한 페이지에서 여러번 적용가능 , id 는 한페이지에서 한번만 사용 가능. (id > class)
“reset” CSS가 무엇인지, 어떻게 유용한지 설명해주세요.
브라우저가 가지고 있는 기본 css를 재설정하는 기능을 가지고 있다. 기존의 태그의 css를 수정할 수 있음에 유용함.
Float와 flex box의 차이점을 설명하세요.
float : 요소를 float 하게 되면 부모 요소는 float 된 자식 요소와 분리 되게 된다. 그러면 나머지 요소들은 float된 요소를 빈 곳으로 인시하게 돼서 당겨지게 되고 결과적으로 부모 요소의 width도 변하게 된다.
flex : flex를 사용하면 요소를 단일 축에 정렬하여 레이아웃을 만들 수 있다. 축은 수평 또는 수직일 수 있다. 동일한 축의 항목에 대한 공간을 분배하는 데 가장 적합하다.float와는 다르게 일반적인 flow of the document를 헤치지 않고도 layout을 잡을 수 있음.
BFC(Block Formatting Context)에 관해 설명해주세요
블록 박스가 배치된 웹 페이지의 css 렌더링의 일부로서, 블록 박스의 레이아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위.
BFC의 조건은 이중 하나 이상을 충족시키는 HTML 박스를 의미함.
- float의 값이 none이 아님.
- position의 값이 static도 아니고 relative도 아님.
- display의 값이 table-cell, table-caption, inline-block, flex, inline-flex임.
- overflow의 값이 visible이 아님.
클리어링(Clearing) 기술에는 어떤 것들이 있으며, 어떨 때 어떻게 사용하는 것이 적절한지 설명하세요.
클리어링 기술은 float 속성으로 주변 요소 배치에 영향이 없도록 해제 시켜주는 속성이다.
만약 float로 자식의 너비가 넘치는 경우 overflow: hidden , auto로 대비할 수 있다.
CSS 스프라이트(CSS Sprites)를 설명하고, 페이지나 사이트를 어떻게 향상하는지 설명하세요.
여러개의 이미지를 합쳐 하나의 이미지로 만들어 잘라 쓰는 방식으로 사이트의 성능 향상을 할 수 있다. 예를 들어 10개의 이미지 리소스가 필요할때, 10번 요청을 하는 것이 아니라 1번의 요청으로 모두 받아온 후 렌더링 함.
브라우저 스펙 차이에 따른 스타일링 이슈를 수정하기 위해서 어떻게 접근하나요?
reset css를 사용해 초기화 한 후 스타일링을 합니다.
시각적으로 보이지 않고 스크린 리더에서만 가능하게 하는 방법에 관해 설명해주세요.
1.
display:none;(영역 자체가 없어지면서 컨텐츠가 안보임)
2.visibility:hidden;(영역은 존재하고 컨텐츠만 안보임)
3.box (width:0; height:0;) overflow:hidden;사용
4.text-indent, position등에 음수를 사용
그리드 시스템(Grid system)을 사용한 적이 있나요? 있다면 어떠한 것을 선호하나요?
부트스트랩이나 antd의 그리드 시스템을 사용.
미디어 쿼리(media queries)를 사용한 적이 있나요? 혹은 모바일에 맞는 layout과 CSS를 사용한 적이 있나요?
미디어 쿼리를 사용해 웹 페이지가 모바일에도 , 테블릿에도 적용할 수 있도록 크기를 나누고 각각 스타일링 하였습니다.
인쇄하기 위해 웹페이지를 어떻게 최적화 하나요?
미디어 쿼리를 사용해 print 용 스타일을 따로 만듦.
효율적인 CSS를 작성하기 위한 "비법(gotchas)"은 어떤 게 있나요?
페이지에서 표준 폰트가 아닌 폰트 디자인을 사용할 때 어떤 방식으로 처리하시나요? (웹폰트를 제외하고)
파일을 import해서 사용합니다.
CSS Selector가 어떠한 원리로 동작하는지 설명해주세요.
css 엔진은 오른쪽에서 왼쪽으로 규칙에 적합한지 확인하고 적합하지 않으면 멈추게 됩니다.
pseudo-elements에 관해서 설명하고 어디에서 사용되는지 이야기해보세요.
요소의 지정된 부분을 스타일화 하는데 사용하고 요소의 첫 문자나 선 스타일을 지정하거나 내용 앞이나 뒤에 내용을 삽입.
box model에 관해 설명하고 브라우저에서 어떻게 동작하는지 설명해주세요.
모든 HTML은 높이와 너비가 있는 박스 형태이고 겉의 마진,경계인 보더, 컨텐츠와 사이인 패딩, 컨텐츠(알맹이)로 구성 되어있습니다.
* { box-sizing: border-box; }은 무엇이고 사용했을때 이점은 무엇인가요?
패딩이나 보더 값이 늘어나도 박스 자체의 크기가 변하지 않고 컨텐츠의 영역이 줄어들어 일정한 박스 사이즈를 유지할 수 있음.
기억나는 display 속성에 대한 값들을 나열해보세요.
inline , flex , block, none, inline-block
inline과 inline-block의 차이점은 무엇인가요?
inline 속성을 가진 태그는 가로폭을 전부 차지 하지 않고 상위 태그 옆으로 붙는 특징이 있습니다.
또한 width와 height값을 지정해도 크기는 변하지 않습니다.
반면 block 속성을 가진 태그는 가로폭을 전부 차지하며 width, height값을 가질 수 있습니다.
inline-block는 이러한 inline 속성과 block속성의 특징을 모두 가지고 있는 속성으로서
가로폭을 전부 차지하지 않고, width와 height 값을 가질 수 있습니다.
요소를 배치하는 방법(relative, fixed, absolute, static) 간의 차이는 무엇인가요?
static: 기본 값을 가지고 위,아래,오른쪽, 왼쪽 속성의 영향을 받지 않음.
relative: 위, 아래 ,오른쪽, 왼쪽 값을 통해 요소의 위치를 변경할 수 있음. (static과는 반대)
fixed: 페이지가 스크롤 되어도 항상 같은 위치에 유지됨.
absolute: 가장 가까운 위치에 있는 부모 요소를 기준으로 배치되고 없다면 스크롤과 함께 움직임.
반응형(Responsive) 디자인은 적응형(Adaptive) 디자인과 어떤 차이점이 있나요?
반응형 디자인은 기기별 사이즈에 따라 알맞은 크기로 콘텐츠를 제공하고, 사이즈별 제공하는 콘텐츠의 차이가 없는 디자인 입니다.
반면에 적응형 디자인은 미리 정해진 몇 가지 화면 크기를 기준으로 두고 비율에 맞춰 페이지를 구성하는 방식입니다.
