[코드잇 스프린트] 0313 데일리 퀴즈

 

 

 

 

1. 글을 쓰듯이 배치되는 방식을 Normal Flow라고 한다. 

Normal Flow로부터 벗어날 수 있게 하는 것으로 옳은 것을 모두 고르시오. 

1) relative
2) fixed
3) static
4) absoulte
5) sticky
6) inline-block

 

답: 2, 4

해설:

우선 Normal Flow에 대한 개념을 이해하는 것이 중요하다.

Normal Flow란?
요소의 레이아웃을 전혀 제어하지 않았을 때, 브라우저에서 기본적으로 요소가 배치되는 흐름을 말한다.
인라인요소, 블록레벨요소 등 특성에 따라 기본적으로 요소가 배치되는 방식이 있기 때문에 요소의 특성에 따라 Normal Flow가 정해진다.

 

- static: 단순히 Normal Flow로 배치된다.

- relative: Normal Flow를 따라 배치한 원래 자기 자신의 위치를 기준으로 한다.

- absolute: 요소를 Normal Flow에서 제거하고 가장 가까운 부모 요소를 기준으로 한다.

- fixed: 요소를 Normal Flow에서 제거하고 눈에 보이는 뷰포트를 기준으로 한다.

- sticky: Normal Flow를 따르고 가장 가까운 스크롤이 되는 부모를 기준으로 한다. (기본적으로 스크롤이 되는 상황에서만 효과가 나타난다)

 

 

 

2. fixed를 사용했을 때 내비게이션 바와 내용이 겹쳐서 안 보이는 경우에 대한 발생 원인 및 해결 방법을 각각 설명하시오.

 

답:

어떤 엘리먼트에 position: fixed를 적용할 경우에 해당 엘리먼트는 부모 엘리먼트로 부터 완전히 독립된다.

따라서 position: fixed를 사용한 경우 부모 엘리먼트에서 점유하고 있던 엘리먼트의 공간이 사라지기 때문에 내용이 겹쳐서 안보이는 경우가 발생한다.

대표적으로 상단 고정 메뉴바를 사용할 때 흔히 겪는 문제인데, 이 경우 부모 엘리먼트의 상단에 메뉴바 높이 만큼 패딩(padding)이나 마진(margin)을 주면 해결이 가능하다.

 

 

3. 요소가 많아서 Flexbox 밖으로 빠져 나오는 경우에 대한 해결 방법으로 옳은 것은?
1) flex-wrap;
2) flex-wrap: wrap;
3) wrap;
4) wrap-flex;
5) wrap-flex: wrap;

 

답: 2번

 

4. Flexbox는 가로,세로 두 방향, 2차원으로 배치 할 수 있는 방법이다(O,X)

 

답: X

해설:

- Flexbox: 1차원 레이아웃으로, 요소들을 행 또는 열로 배치한다. 주로 플렉서블한 인터페이스 또는 아이템들을 가로/세로로 정렬하는데 사용된다.

- Grid: 2차원 레이아웃으로, 요소들을 행과 열로 배치한다. 주로 복잡한 레이아웃을 구성하는데 사용되며, 그리드 형태로 요소들을 배치하고 정렬할 수 있다.