1. display 🔥

💡 면접관의 의도 요소의 렌더링 박스 타입과 화면 배치 방식의 기초를 명확히 이해하고 있는지 확인.

🗣️ 답변 예시

요소가 화면에 어떻게 자리 잡을지 결정하는 속성으로, 크게 4가지로 나눌 수 있습니다.

1. block 항상 새로운 줄에서 시작하며, 부모 요소의 가로폭(100%)을 모두 차지합니다. width, height, margin, padding 속성을 모두 사용할 수 있습니다. (예: div, p)

2. inline 새로운 줄에서 시작하지 않고 콘텐츠의 너비만큼만 영역을 차지합니다. width, height를 지정할 수 없고, margin과 padding은 좌우만 적용됩니다. (예: span, a)

3. inline-block 기본적으로 inline처럼 한 줄에 배치되지만, block처럼 width, height, margin, padding 값을 모두 지정할 수 있습니다.

4. none 문서의 렌더링 트리에서 아예 제외되어 화면에 보이지 않으며, 공간도 차지하지 않습니다.

---

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

💡 면접관의 의도 문서의 정상적인 흐름(Normal Flow)을 제어하고 요소를 원하는 위치에 배치할 수 있는지 확인.

🗣️ 답변 예시

문서 상에서 요소의 위치를 지정하는 속성입니다. 상황에 따라 4가지(sticky 포함 5가지)를 적절히 사용합니다.

1. static (기본값) HTML에 작성된 순서대로 정상적인 흐름에 따라 배치됩니다. top, left 등의 속성이 적용되지 않습니다.

2. relative 원래 자신이 있어야 할 static 위치를 기준으로 상하좌우로 이동합니다. 다른 요소의 배치에는 영향을 주지 않습니다.

3. absolute 문서의 기본 흐름에서 벗어나, position 속성이 static이 아닌 가장 가까운 부모 요소를 기준으로 위치를 잡습니다.

4. fixed 문서의 흐름에서 완전히 벗어나, 브라우저의 화면(뷰포트)을 기준으로 위치를 잡습니다. 스크롤을 해도 항상 같은 위치에 고정됩니다.

---

3. float가 어떻게 작동하는가 🔥

💡 면접관의 의도 과거 레이아웃 기법에 대한 이해와, 이로 인해 발생하는 부작용(높이 붕괴)을 처리할 수 있는지 확인.

🗣️ 답변 예시

원래 float는 이미지 주위로 텍스트를 자연스럽게 감싸기 위해 만들어진 속성이지만, 과거에는 웹 페이지의 전체 레이아웃을 잡는 데 주로 사용되었습니다.

요소를 일반적인 문서 흐름에서 띄워 좌측이나 우측으로 배치하는데, 이때 부모 요소가 float된 자식 요소의 높이를 인식하지 못해 레이아웃이 무너지는 현상이 발생합니다. 이를 해결하기 위해 부모 요소에 overflow: hidden을 주거나 ::after 가상 요소를 활용한 clearfix 기법을 사용해야 합니다. 현재는 Flexbox와 Grid의 등장으로 레이아웃 목적보다는 본래의 텍스트 래핑 목적으로만 제한적으로 사용합니다.

---

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

💡 면접관의 의도 모던 CSS 레이아웃 시스템의 차이를 알고 목적에 맞게 선택할 수 있는지 확인.

🗣️ 답변 예시

네, 프로젝트의 요구사항에 따라 두 가지를 적절히 혼용하여 사용하고 있습니다.