프론트엔드 면접 질문 정리 ③ CSS 질문

박스 모델에 대하여 설명해보세요

---

• CSS에 포함되는 모든 요소의 외장은 박스이며 주어진 태그의 특성에 따라, 블록 박스와 인라인 박스로 나뉜다. 블록 박스의 대표적인 태그는 div이며, 인라인 박스의 대표적인 태그는 span이다.
• CSS box는 콘텐츠/패딩/테두리/여백 총 4가지 영역으로 구성되는데, 블록 박스는 해당 영역이 모두 적용되어 구성되며, 인라인 박스는 컨텐츠 영역만으로 구성된다.
• 또한 블록 박스는 줄바꿈이 일어나며, width와 height을 지정해줄 수 있고 padding/margin/border 영역이 적용된다. 인라인 박스는 세 특징들 모두 해당되지 않는다. padding은 border와 콘텐츠 영역 사이에 위치하며, margin은 박스 주변의 여백을 지정하며 border는 박스 여백과 패딩 사이에 그려진다.
• 그리고 몇 가지 복잡성을 추가하기 위한 도구인 대체 박스 모델이 있다. 표준 박스 모델에선 블록 박스의 width, height을 지정하면, 실제 박스의 넓이와 높이는 margin과 padding을 포함한 값이다. 그러나 대체 박스 모델에선 블록 박스의 크기는 지정된 width와 height 값이다. 또한 이를 활성화하기 위해선, 해당 태그에 box-sizing: border-box 속성을 추가해줘야 한다.

display에 대하여 설명해보세요.

---

• display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 레이아웃을 지정하기 위해 사용되며, 지정할 수 있는 값으로 none, block, inline, inline-block, flex, grid 등이 있다.
• display: none은 요소가 차지하는 공간이 사라지게 만든다.
• display: block은 블럭 박스 요소에 기본 적용되는 값으로, 인라인 박스 요소를 블럭 박스 요소로 변경시킬 수 있다. inline은 그 반대다.
• display: inline-block은 block 요소의 특성과 inline 요소의 특성을 따른다. 전자의 특성으로는 width/height을 지정할 수 있고 margin/border/padding 영역을 갖는다는 점이 있고, 후자의 특성으로는 요소의 크기가 내용에 의존적이란 점과 줄바꿈 현상이 일어나지 않는다는 점이다.

position에 대하여 설명해보세요.

---

• CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정한다. static, relative, absolute, fixed, sticky 속성을 값으로 갖는다.
• static은 position 속성의 기본 값이며, 요소를 문서 흐름에 맞게 배치한다.
• relative는 요소가 차지하는 공간은 static과 같으나, top/right/left/bottom 값을 적용시킬 수 있다.
• absolute는 일반적인 문서 흐름에서 제거되고 static이 아닌 부모 블럭의 박스 안에 속하여 위치가 지정된다. 만약 전부 static 값을 갖으면, 최상위 블록에 의존한다.
• fixed은 요소가 페이지의 평소 위치에서 제거되고 뷰포트를 기준으로 지정된 위치에 배치되며 스크롤 할 때 이동하지 않는다.
• sticky는 지정된 임계값을 넘을 때까지 relative 위치로 처리되며, 특정 지점에서 fixed 위치로 처리된다.

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

---

• 블럭 박스는 기본적으로 줄바꿈 현상이 일어나는데, float 속성을 지정하면 해당 블록의 좌측 혹은 우측 주변으로 다른 요소들이 한줄에 올 수 있게 된다.
• float 속성의 기본값은 none이며, 해당 요소가 오른쪽에 오느냐 그리고 왼쪽에 오느냐에 따라서 right와 left 값으로 설정할 수 있다.
• 원하지 않는 요소들까지 올라오는 것을 막으려면 float 속성을 정리해야 하며, 이는 clear 속성을 통해 달성된다. 그러면 clear 속성이 지정된 요소를 포함하여 후속요소들은 float 속성의 효과에서 벗어나게 된다.
• float 속성 값과 마찬가지로 clear 역시 left, right 그리고 왼쪽과 오른쪽 관계 없이 값을 정리하는 both 값이 있다.

Resetting과 Nomarlizing CSS의 차이점은 무엇인가요?

---

• Ressetting CSS는 요소의 모든 기본 브라우저 스타일을 제거하기 위해 사용한다. 이는 크로스 브라우징에 유용하게 사용된다. resetting 한 후, 스타일링을 해야 브라우저별로 최대한 흡사한 웹페이지를 만들 수 있다. 이는 커스터마이징한 웹 사이트 스타일링을 할 때 좋다. 사용하는 방법은 리액트에서는 styled-reset를 설치하고 import 해주면 사용 가능하다.
• Nomarlizing CSS는 요소의 모든 스타일을 제거하는 것이 아니라, 유용한 기본 스타일은 보존한다. 또한 일반적인 브라우저 종속성에 대한 버그를 수정한다. 따라서 일반적인 경우에는 Normalizeing CSS가 낫다. 사용하는 방법은 리액트에서는 css에 파일에 @import-normalize를 추가해주면 간단하게 사용할 수 있다.

브라우저 별로 스타일이 다른 문제를 어떤 접근 방법으로 해결하나요?

---

• Reset CSS 또는 Normalize.css를 사용한다. 혹은 Bootstrap 같은 CSS Framework를 사용한다. 아니면 autoprefixer를 사용하여 벤더 프리픽스를 코드에 자동으로 추가한다.

z-index와 스택 컨텍스트는 어떻게 형성되나요?

---

• z-index는 겹치는 요소의 쌓임 순서를 정해주며, 이는 position이 static이 아닌 값을 갖는 요소에 적용된다. 만약 z-index가 지정되지 않으면 DOM에 나타나는 순서대로 요소가 쌓이게 된다.
• 스택 컨텍스트는 레이어들을 포함하는 요소로, 지역 컨택스트 내에서, 자식의 z-index 값은 문서 루트가 아닌 해당 요소를 기준으로 설정된다. 해당 컨텍스트 외부 레이어는 그 사이의 레이어에 올 수 없습니다. 요소 B가 요소 A의 상단에 위치하는 경우, 요소 A의 하위 요소 C는 요소 C가 요소 B보다 z-index가 더 높은 경우에도 요소 B보다 위에 올 수 없습니다.

BFC(Block Formatting Context)와 그 작동 방식을 설명하세요.

---

• BFC는 블록 박스가 배치된 웹 페이지의 시각적 CSS 렌더링의 일부입니다. float, absolute로 배치된 요소, inline-blocks, table-cells, table-caption 그리고 visible이 아닌 overflow가 있는 요소들이 BFC를 만든다.
• BFC는 다음 조건 중 하나 이상을 충족시키는 HTML 박스입니다.
  1. float 값이 none이 아님.
  2. position의 값이 static도 아니고 relative도 아님.
  3. display의 값이 table-cell, table-caption, inline-block, flex, inline-flex임.
  4. overflow의 값이 visible이 아님.
• BFC에서 각 박스의 왼쪽 바깥 모서리는 포함하는 블록의 왼쪽 모서리에 닿습니다.
• BFC collapse 시, 인접한 블록 레벨 박스 사이의 수직 마진이 발생합니다.

SVG 스타일링은 무엇이며, 익숙하신가요?

---

• 네, SVG는 대부분 inline CSS, CSS section 삽입, 외부 CSS file처럼 shape의 색상을 정하는 여러 방법이 있습니다. 웹에서 볼 수 있는 대부분의 SVG는 inline CSS를 사용하지만, 각각 장단점이 있습니다.
• 기본적인 채색은 노드에 fill과 stroke 두 속성을 설정하여 정할 수 있습니다. fill은 객체 안쪽 색을 설정하고 stroke는 객체 주의에 그려지는 선의 색을 설정한다. 색상 이름, RGB 값, 16진수 값, RGBA 값 등 HTML에서 사용하는 것과 동일한 CSS 색상 이름 스킴을 사용할 수 있습니다.

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8"
/>

Flexbox나 Grid 스펙을 사용해본 적이 있나요?

---

• 네, Flexbox는 주로 1차원 레이아웃을 대상으로 하며, Grid는 2차원 레이아웃을 대상으로 합니다.
• Flexbox는 CSS에서 컨테이너 안에 있는 요소의 수직 가운데정렬, sticky footer 등과 같은 많은 일반적인 문제들을 해결합니다. Bootstrap과 Bulma는 Flexbox를 기반으로 하고, 이는 요즘 레이아웃을 만드는 데 권장되는 방법일 것입니다.
• Grid는 그리드 기반의 레이아웃을 생성하기 위한 가장 직관적인 접근법이며, 현재 ie를 제외한 모든 브라우저에서 Grid 관련 대다수의 기능들을 지원하고 있습니다.

반응형 웹사이트를 코딩하는 것과 모바일 우선 전략을 사용하는 것 사이의 차이점을 설명해보세요.

---

• 우선 이 두가지 접근법은 배타적이지 않습니다. 반응형 웹사이트를 만드는 것은 일부 요소가 미디어 쿼리를 통해 장치의 화면 크기(일반적으로 뷰포트 너비)에 따라 크기나 다른 기능을 조정하도록 반응함을 의미합니다. (ex: 작은 디바이스에서 글꼴 크기를 줄임)

  @media (min-width: 601px) { 
      .my-class { 
          font-size: 24px; 
      } 
  } 
  @media (max-width: 600px) { 
      .my-class { 
          font-size: 12px; 
      } 
  }

• 모바일 우선 전략 또한 반응적이지만, 모바일 장치에 대한 모든 스타일을 정의해야하며 나중에 다른 장치에 대한 특정 규칙을 추가합니다.

  .my-class { 
      font-size: 12px; 
  } 
  @media (min-width: 600px) { 
      .my-class { 
          font-size: 24px; 
      } 
  }

• 해당 방식의 장점은 다음과 같습니다. 모바일 장치에서 적용되는 모든 규칙이 미디어 쿼리에 대해 유효성 검사를 받을 필요가 없으므로 모바일 장치에서 더 뛰어난 성능을 발휘합니다.
• 반응형 CSS 규칙과 관련하여 보다 명확한 코드를 작성해야합니다.