CSS 질문 및 답변 정리

https://docs.junojunho.com/interview/css#undefined

https://jennybeblog.github.io/2017-07-31/FE_engineering/

CSS 관련 질문:

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

• 공통점: 어떤 태그든 그 내용이 갖는 의미와 역할을 통해 요소를 구분해서 나타낼 수 있음.
• 차이점: 한 페이지 내에서 여러 번 반복될 필요가 있는 스타일은 클래스 선택자를 사용하고, 단 한번 유일하게 적용될 스타일은 ID선택자를 사용하는 것이 좋다. 왜냐면 class 속성은 어떤 분류 안에 포함된 요소의 특성을 정의하는 데 사용되고, id 속성은 어떤 요소에 대해 유일한 특성을 정의하기 때문이다. class 속성은 속성값을 두 개 이상 가질 수 있다. 그래서 클래스 선택자를 사용하면 한 태그 내에서도 여러종류의 스타일 규칙을 적용할 수 있다.
• 그래서 클래스 선택자는 글자색이나 글자 굵기 등 나중에 다른 곳에도 적용할 수 있는 스타일을 지정하고, ID선택자는 웹 문서 안에서 요소의 배치 방법을 지정할 때 자주 사용한다.
• id 선택자의 우선순위 > 클래스 선택자의 우선순위 : 따라서 우선적으로 적용되어야 할 스타일을 id 선택자를 사용해 정의하는 것이 좋다.

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

모든 브라우저에서 통일된 화면을 볼 수 있도록 CSS의 기본 설정들을 초기화 하는것.

• Floats가 어떻게 동작하는지 설명해주세요.
• z-index에 관해 설명해주세요.

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

모든 HTML 요소는 사각형 박스 형태를 취하고 있다. 박스는 Box-model 이라는 모델을 가지고 있다.

CSS요소에는 display가 존재하는데, 이는 블록과 인라인 두 가지 값을 가진다.

block은 블록 레벨 요소를 의미하고, inline은 인라인 레벨 요소를 의미한다. 블록 레벨 요소는 BFC에 속하는 박스이다. 수직으로 계속 쌓인다. 

인라인 레벨 요소는 IFC에 속한다. 수평으로 계속 쌓인다. 인라인-블록은 인라인 처럼 수평으로 쌓이지만, 블록 레벨 요소의 박스처럼 높이를 계산한다.

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

• float 속성이 부여된 엘리먼트는 부모 엘리먼트의 높이에 영향을 주지 않으며, 레이아웃의 좌/우로 배치되면서 주변 콘텐츠의 배치에도 영향을 미친다.
• clearing 기술은 이 float 속성이 주변 엘리먼트의 배치에 더 이상 영향을 미치지 않도록 해제시키는 속성이다.
• 부모에도 float: 자식 엘리먼트의 높이를 부모에도 반영하는 방법으로는 부모에게도 float 속성을 부여하는 것이 있다. 하지만 부모의 너비가 자식의 너비를 담을 수 있을 정도로만 줄어들기 때문에 브라우저 크기에 따라 너비가 가변적이어야 할 경우, 또 여러 번 중첩된 경우 계속 모든 조상에게 float를 적용해야 하므로 문제가 된다.
• 부모에 overflow: 자식 엘리먼튼의 높이를 부모에도 반영하는 방법으로 부모 엘리먼트에 overflow: auto또는 overflow: hidden 속성을 부여하는 방법이 있다. 하지만 자식의 너비가 넘치는 경우 스크롤바가 생기거나 넘치는 부분이 잘리는 문제가 생긴다.
• clear: 빈 엘리먼트에 clear: both; 속성을 부여해 부모가 자식의 높이를 인식하도록 한다. 하지만 의미 없는 빈 엘리먼트를 이용하므로 시멘틱상 바람직하지 않다.
• :after: 가상 선택자 중 가상 엘리먼트 :after를 사용해서 부모 컨테이너에 #container:after {content: ''; display: block; clear: both;}를 적용한다.
• 부모 요소에 display: inline-block 속성을 추가한다. inline-block을 가진 요소는 float된 자식의 높이만큼 늘어나기 때문이다. 하지만 박스가 끝나는 지점에 4px의 공백이 생긴다.
• 
  

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

• 작은 이미지들을 여러 개 사용해야 할 경우, 작은 이미지들이 들어있는 하나의 커다란 이미지를 만들고 해당 이미지를 쓰는 경우에 해당 position을 적용해주는 방식. 렌더링할 리소스가 줄어드므로 성능이 향상된다.

• Image Replacement를 사용해야 할 때, 선호하는 기술과 언제 사용하는지를 설명해주세요.
• 브라우저 스펙 차이에 따른 스타일링 이슈를 수정하기 위해서 어떻게 접근하나요?
기능이 제약된 브라우저를 위해서 어떤 방식으로 페이지를 만드나요? 어떠한 기술과 절차를 거치는지 설명하세요.
• 시각적으로 보이지 않고 스크린 리더에서만 가능하게 하는 방법에 관해 설명해주세요.

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

페이지 위에 격자를 그리고 그 위에 요소를 배치하는 시스템. 

부트스트랩이 제일 유명하다. 실제로 썼을때 이해하기가 쉬웠다.

리액트에서 사용하지는 않았다.

• 미디어 쿼리(media queries)를 사용한 적이 있나요? 혹은 모바일에 맞는 layout과 CSS를 사용한 적이 있나요?
• SVG를 스타일링하는데 익숙하신가요?
• 인쇄하기 위해 웹페이지를 어떻게 최적화 하나요?
• 효율적인 CSS를 작성하기 위한 "비법(gotchas)"은 어떤 게 있나요?

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

장점

• 유지보수 향상

• 중첩 선택자를 작성하기 쉬움

• 일관된 스타일링 설정을 위한 변수 사용.

  • 테마 파일을 공유 가능.

• 반복되는 CSS 를 위한 Mixins 생성.

• 코드를 여러 파일로 나눌 수 있음.

단점

• 전처리기를 위한 도구 필요

• 다시 컴파일하는 시간이 느릴 수 있음

• 페이지에서 표준 폰트가 아닌 폰트 디자인을 사용할 때 어떤 방식으로 처리하시나요? (웹폰트를 제외하고)
• CSS Selector가 어떠한 원리로 동작하는지 설명해주세요.
• pseudo-elements에 관해서 설명하고 어디에서 사용되는지 이야기해보세요.
• box model에 관해 설명하고 브라우저에서 어떻게 동작하는지 설명해주세요.

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

• 요소의 너비와 높이를 계산할 때 사용되는 기본적인 CSS box model을 대체할 때 사용된다. 기본 값은 content-box로, 박스 내부에 있는 내용에 맞게 박스의 크기(너비/높이)를 지정한다는 뜻이다. 즉 박스 외부의 padding, margin, border를 포함하지 않는다.

• border-box로 값을 변경할 경우 지정한 크기 속성이 border를 포함한 것으로 바뀐다. IE에서 문서가 쿽스 모드일 때 사용된다. padding과 border가 박스 안에 존재한다.

• border-box 속성을 사용하면 반응형웹을 구현하는 데에 용이하다. border, padding에 의해 계속 바뀌면 반응형 웹을 구현하기 위해 설정해야 하는 값들의 변수가 너무나 많아지기 때문이다. 콘텐츠 양이 달라지더라도 가로 세로 너비 변형이 없게 하려면 box-sizing을 이용하면 전체 박스의 너비를 고정시킬 수 있다. - 참조

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

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

display 요소인 block은 해당되는 태그가 한 줄을 차지하게 됨. 기본적으로 inline은 block 보다 작은 요소이다.

inline: 한 줄을 차지하지 않고, 다른 태그 옆에 나란히 위치함. width와 height 값이 적용이 안됨.

inline-block: 한 줄을 차지하지 않지만, width와 height 값이 적용됨. 요소는 inline, 내부는 block 속성으로 표시됨.

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

• static

  • 기본 위치.

  • 요소는 평소와 같이 페이지에 위치.

  • top, right, bottom, left, z-index 속성은 적용 불가능

• relative

  • 요소의 위치는 레이아웃을 변경하지 않고 상대적으로 조정됨

  • 배치되지 않은 요소의 간격을 남겨둠

• absolute

  • 요소는 페이지의 평소 위치에서 제거되고 가장 가까운 위치에 relative 부모 블록이 있는 경우 지정된 위치에 배치됨.

  • 그렇지 않으면 최상위 블록과 관련됨.

  • 여백을 가질 수 있으며 다른 여백과 충돌하지 않음.

  • 다른 요소의 위치에 영향을 주지 않음.

• fixed

  • 요소는 페이지의 평소 위치에서 제거되고 뷰포트를 기준으로 지정된 위치에 배치

  • 스크롤 할 때 이동하지 않음.

• sticky

  • relative 와 fixed 의 하이브리드.

  • 요소는 지정된 임계 값을 넘을 때까지 상대적 위치로 처리되며,

  • 특정 지점에서 고정된 위치로 처리.

• CSS에서 'C'는 Cascading을 의미합니다. Cascading에 관해서 설명해주세요. 또 cascading system의 장점은 무엇인가요?
• CSS framework를 사용해본 적이 있으신가요? 실무에서 사용해보았다면 어떤 이점이 있었나요?

부트스트랩을 사용한 적이 있다.

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

Flexbox는 display를 flex로 설정하고 flex-direction을 주는등 전체적으로 나의 리액트 프로젝트에서 요소들을 배치할때 기본적으로 사용하는 속성이다. 

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

반응형 디자인은 디스플레이의 너비에 따라 레이아웃을 변형시키고, 적응형 디자인은 웹 디바이스를 체크해서 그 디바이스에 최적화된 마크업을 불러온다.

• 레티나 그래픽 환경에서 작업해 보신 적이 있나요? 하셨다면 어떤 기술을 사용하셨나요?

• 절대 좌표대신 translate() 혹은 반대로 사용하는 이유가 있나요? 있다면 이유에 관해서 설명해주세요.

translate를 사용하면 화면 비율이 달라져도 레이아웃 위치를 고정시킬 수 있기때문에 사용한다.