CSS Quiz - float, BFC, onlyVisibleToScreenreader
1. Float가 어떻게 동작하는지 설명해주세요.
- float된 요소는 문서의 정상 흐름에서 벗어나서 요소를 포함하고 있는 컨테이너 박스의 끝에 도달하거나 또 다른 float 요소를 만날 때까지 왼쪽이나 오른쪽으로 이동합니다.
- 요소가 문서의 정상 흐름에서 벗어난다는 것은 기본적으로 페이지의 다른 요소가 해당 요소의 존재를 더 이상 알지 못하므로 해당 요소에 반응하지 않는다는 것을 의미합니다.
- float된 요소는 새로운 Block Formatting Context를 생성하고 그 안의 모든 것들은 페이지의 나머지와 분리된 작은 레이아웃으로 볼 수 있습니다.
1.1 float된 요소 아래에 요소를 배치하고 싶을 때 어떻게 하나요?
- float된 요소 아래에 배치하고 싶은 요소에 clear 속성을 줘서 float된 요소를 인식할 수 있게 합니다.
- float되지 않은 요소에 clear 속성을 줄 경우, 해당 요소의 border의 경계선이 관련된 float 요소의 margin 경계선 아래로 이동합니다.
- float된 요소에 clear 속성을 줄 경우, 해당 요소의 margin 경계선이 관련된 float 요소의 margin 경계선 아래로 이동합니다.
2. BFC(Block Formatting Context)가 무엇이고 언제 생성되는지 설명해주세요.
- 페이지의 모든 요소는 서식 컨텍스트의 일부 또는 특정 방식으로 컨텐츠를 배치하도록 정의된 영역의 일부입니다.
- 그 중에서 블록 서식 컨텍스트는 블록 레이아웃 규칙에 따라 하위 요소를 배치합니다.
- html 요소의 블록 안의 모든 요소는 블록 및 인라인 레이아웃 규칙에 따라 일반적인 흐름에 의해 배치됩니다.
- 블록 서식 컨텍스트에 참여하는 요소들은 CSS Box Model에 설명된 규칙을 사용합니다.
- CSS Box Model은 요소의 margin, border, padding이 동일한 컨텍스트에서의 다른 블록 요소와 상호 작용하는 방식을 정의합니다.
2.1 Block Fomatting Context는 언제 생성되나요?
- 문서의 최상위 요소
<html>
- float가
none이 아닌 요소
- position이
absolute나 fixed인 요소
- display가
inline-block인 요소
- display가
table-cell인 요소
- display가
table-caption인 요소
- display가
table-*인 요소
- overflow가
visible과 clip이 아닌 다른 값을 가진 블록 요소
- display가
flow-root인 요소
- contain이
layout, content나 paint인 요소
- display가
flex나 inline-flex인 요소의 자식 요소
- display가
grid나 inline-grid인 요소의 자식 요소
- column-count나 column-width가
auto가 아닌 여러 개의 열을 가진 컨테이너 요소
- column-span이
all인 요소
3. 시각적으로 보이지 않고 스크린 리더에서만 사용 가능하게 하는 방법에 관해 설명해주세요.
- hidden 속성을 줘서 브라우저가 요소의 컨텐츠를 렌더링하지 않게 할 수 있습니다.
- position을
absolute, left를 -99999px로 설정하여 화면 외부에 배치함으로써 시각적으로 숨길 수 있습니다.
- text-indent에
-100000px을 줌으로써 블록 요소 내 텍스트를 시각적으로 숨길 수 있습니다.
참고
