상자 모형과 여백 확인

문항 6개. 정답과 해설은 풀어 본 뒤에 보여 드립니다.

1. `width: 300px; padding: 20px; border: 1px solid` 인 요소가 기본 `box-sizing` 에서 차지하는 가로는?

   1. 300px — width 가 상자 전체를 가리킨다
   2. 320px — padding 한쪽만 더해진다
   3. 342px — content 300 에 좌우 패딩과 경계선이 더해진다
   4. 258px — padding 과 border 가 안쪽에서 깎인다

2. 위 요소에 `margin-bottom: 20px`, 아래 형제에 `margin-top: 30px` 을 주면 둘 사이 간격은?

   1. 50px — 두 여백이 더해진다
   2. 25px — 두 값의 평균이 된다
   3. 20px — 먼저 선언된 쪽이 이긴다
   4. 30px — 두 여백이 합쳐져 큰 값 하나가 된다

3. 자식에 `margin-top` 을 줬는데 부모 상자가 통째로 아래로 밀립니다. 멈추는 방법이 아닌 것은?

   1. 자식의 margin-top 을 음수 값으로 상쇄시킨다
   2. 부모에 padding-top 을 준다
   3. 부모에 border-top 을 준다
   4. 부모에 display: flow-root 를 준다

4. `padding-top: 50%` 는 무엇의 50% 입니까?

   1. 요소 자신의 높이
   2. 담음 블록의 **폭**
   3. 담음 블록의 높이
   4. 뷰포트의 높이

5. `width: 100%; max-width: 640px` 인 요소의 폭은 어떻게 정해집니까?

   1. 둘이 충돌해 width 가 무시되고 640px 로 고정된다
   2. 부모가 640px 보다 크면 width 가 이겨 부모 폭을 따른다
   3. 부모 폭을 따르되 640px 을 넘으면 640px 에서 멈춘다
   4. 브라우저가 둘의 평균값을 계산해 적용한다

6. flex 컨테이너에 `gap` 을 쓰는 것이 `margin` 보다 나은 이유는?

   1. gap 은 여백 상쇄가 일어나 값이 두 배로 커지지 않는다
   2. gap 은 아이템마다 다른 값을 줄 수 있어 세밀하게 조정된다
   3. gap 은 box-sizing 설정과 무관하게 width 에 포함된다
   4. gap 은 아이템 사이에만 들어가 마지막 여백을 지우는 규칙이 필요 없다