Portfolio

1. [윤] Float에 대한 설명 중 틀린 것을 고르세요!2. [윤] 다음 그림을 보고 틀린 설명을 고르세요!3. [윤] 다음 코드와 그림을 보고 옳은 설명을 적어주세요!1. 다음 코드를 보고 아래 답을 예상해보세요.2. 위의 코드에서 C객체의 형제 객체로 아래 처럼 D객체가 추가된다고 했을 때 각각 속성에 따라 어떤 형태를 띄고 있을지 말해보세요.3. 다음 문제에 O,X로 답해주세요.

1. [윤] Float에 대한 설명 중 틀린 것을 고르세요!


(1) float이 선언되는 즉시 새로운 Bfc영역이 시작된다
(2) 인라인 요소는 float요소를 인식해, 피해서 그려진다
(3) float 사용 시 linebox가 생성된다
(4) float요소가 추가되면 linebox는 이전 영역은 제외된 가용한 범위만큼으로 줄게된다
(5) lineBox 영역은 float요소의 세로는 제외하고 가로 너비만 고려된다

정답

(5) 가로가 아닌 세로도 고려됨

예진 - O, O, O, O, X

2. [윤] 다음 그림을 보고 틀린 설명을 고르세요!


(1) 5번 박스는 직전 lineBox의 너비 공간이 부족해 4번 박스의 베이스라인 밑에 위치하게 되었다.
(2) 4번과 3번 사이의 공간은 죽은 공간이다.
(3) 5번 왼쪽 공간엔 인라인 요소가 위치할 수 있다.
(4) 7번 박스가 6번 박스 베이스라인을 기준으로 하지 않은 이유는 2번 박스의 베이스라인이 먼저 내려왔기 때문이다
(5) linebox계산에서 가장 왼쪽에 있는 right보다 더 오른쪽 공간은 없기 때문에 5번 박스의 오른쪽 공간은 죽은 공간이 된다.

정답

(2) float left요소와 float right사이의 공간은 유효한 공간이므로 인라인 요소가 위치할 수 있다.

예진 - O, O, O, O, O

3. [윤] 다음 코드와 그림을 보고 옳은 설명을 적어주세요!

3-1. 첫번째 div박스 안에서 코드 상 가장 마지막에 위치한 div의 위치가 왜 가장 위에 위치할까요?

3-2. 왜 텍스트 콘텐츠가 수직으로 늘어난 만큼 부모 div의 height가 늘어나지 않았을까요?

3-3. ABC8의 텍스트의 위치가 위의 빈 공간에 존재하지 않는 이유가 무엇일까요?

3-4. 2번째 4번 박스에 겹쳐서 ABC8의 텍스트가 보여지는 이유는 무엇일까요?

정답

3-1

위의 div들에는 float이 적용되어 있어서 위에 떠 있다고 볼 수 있다. 그래서 float이 적용되지 않은 div가 떠 있는 div들의 밑에 존재하게되고, float요소들 제외 상위 요소가 없으므로 가장 위에 위치하게 된다.

3-2

원래 dfc에서 컨텐츠의 높이가 늘어나면 부모의 높이도 늘어나지만, float의 가드속성에 영향받아 늘어났을 땐 부모의 높이가 늘어나지 않는다

3-3.

첫번째 6,7번 박스는 float left가 설정되어있고, linebox공간에서 가장 왼쪽에 위치하게 되어있으므로 6,7번 박스의 왼쪽 공간은 요소들의 크기 차이로 인한 여백이지 유효한 공간이 될 수 없다. 그렇기에 인라인 요소 또한 위치할 수 없다.

3-4.

2번째 4번 박스가 ABC8의 텍스트보다 나중에 그려지고, float 속성이 적용되어 위에 떠 있게 되지만

float의 가드속성으로 인라인요소는 float요소에 가려지지 않는다. (div였으면 가려지게 됨)

예진 -

(1) float으로 그려지지 않은 BFC는 부모를 기준으로 생성되고, BFC는 float의 가드에 반응하지 않는다. 따라서 기존에 그려진 float객체들과 겹쳐서 float보다는 밑에 그려진다.

(2) 라인 박스를 쓰는 도중에는 BFC객체가 인라인 요소에 반응해서 늘어나지 않기 때문이다.

(3) ‘ABC8’문자열이 기존 빈공간의 가용범위를 넘어섰기 때문에 다음 공간을 찾아나선다.

(4) 2번에 이어서 height가 늘어나지 않았고, 첫번 째 div의 라인박스가 종료된 시점에서, 그 다음 BFC는 라인 박스에 반응하는 게 아니라 부모를 기준으로 생성되기 때문에 부모의 자식(형제)이 끝난 시점(7번 객체) 이후에 바로 그려져서 겹쳐 보이게 된다. ***

1. 다음 코드를 보고 아래 답을 예상해보세요.


<body>
    <div style="border: 3px solid green; width: 500px; height: 300px">
      ABC
      <div
        style="
          width: 100px;
          height: 300px;
          background: rgba(255, 194, 204, 0.8);
          float: left;
        "
      >
        A: hello
      </div>
      <div
        style="
          width: 350px;
          height: 100px;
          background-color: orange;
          float: right;
        "
      >
        B: CSS
      </div>
      <div style="background-color: red; border: 3px solid blue">
        C: iamDeveloper
      </div>
    </div>
  </body>

최상위 division의 ABC글자의 위치를 각 A, B, C객체를 이용하여 말해보세요. (ex) A의 왼쪽, 오른쪽, A와 C의 사이 등) 그리고 그 이유는 무엇인가요?

C객체의 형태를 예상해보세요. Element는 어떤 형태로 되어있고, 글자는 어떤 위치에 있을까요? 이유도 말해주세요.

(윤)

1. A박스 위에 겹쳐져서 보이고, 위치는 c박스 위에 있다 a,b박스가 float으로 떠있어서 ABC텍스트를 덮어야 하지만 텍스트는 인라인 속성이기에 float속성 요소에 가려지지 않기 때문 - 순서대로 쌓이긴한다, 동생요소들이 float이라고 해서 float아닌 형요소가 동생들 밑으로가게되진 않는다 - ABC보다 글자가 더 길어졌을 때 현상이 이해가 잘 안감

부모의 전체 너비를 꽉 채우고 ABC텍스트 밑에있다. c의 텍스트는 A,B박스의 사이에 있다 A,B박스가 float으로 떠있기 때문에 A,B박스밑에 겹쳐져있고, 텍스트는 인라인이고, 인라인은 float속성 요소를 인지하고 피해서 자리잡기 때문이다

정답

1번 정답 - A와 B객체 사이에 위치해 있게 된다. 연속된 문자열은 하나의 인라인 요소로 취급되고, float속성은 인라인 요소의 가드로 작동되기 때문에 A가 끝난 시점, B가 시작되기전 사이 50px 공간에 ‘ABC’문자열이 위치하게 된다.

2번 정답 - C는 float으로 만들어진 A와 B를 무시하고 제일 상위의 자식 BFC객체로 만들어지되, float속성이 위에 떠있기 때문에 A와 B 아래에 겹쳐진다. C객체 안에 문자열 ‘C: iamDeveloper’는 인라인 요소로 볼 수 있고 워드 브레이크(공백)가 발생 했기 때문에 ‘C:’ 와 ‘iamDeveloper’ 두 개의 인라인 요소로 나눌 수 있는데 ‘C:’같은 경우는 가드 역할을 하는 A와 C객체의 사이 공간을 넘지 않았기 때문에 A와 B사이에 위치하고, ‘iamDeveloper’는 해당 공간에서 넘치기 때문에 B의 가드를 지나서 그 아래에 그려지게된다.

2. 위의 코드에서 C객체의 형제 객체로 아래 처럼 D객체가 추가된다고 했을 때 각각 속성에 따라 어떤 형태를 띄고 있을지 말해보세요.


...
<div style="background-color: red; border: 3px solid blue">
  C: iamDeveloper
</div>
<div style="background-color: cyan">D</div>

위 코드에서 D객체의 위치는 C객체 기준으로 어디이며, 시작점은 어디일까요?

위 코드에서 D객체에 overflow: hidden; 속성을 추가하게 되면 기존과 무엇이 달라지나요? 또 그 이유는 무엇인가요?

다시 overflow: hidden 속성을 지우고 이번엔 width: 50px 속성을 추가하면 D객체는 어디에 위치해 있고, 글씨는 어디에 위치해 있을까요? 또 그 이유는 무엇인가요?

(윤)

c박스 밑, c박스 베이스라인

보여지는 것에 있어서 달라지는 것은 없지만, a박스와 b박스 사이의 공간만큼 그려지게 된다 → 시작점이 linebox경계로 바뀐다 - float요소에 가려지지 않게됨

A박스 밑으로 들어가서 D박스는 보여지지 않지만, D박스의 텍스트는 A박스 옆에 있게 된다

→ width너비 내에서 텍스트가 존재하고, height를 설정하면 텍스트가 가드에 밀린만큼 부모의 높이가 늘어나지 않지만 height를 설정하지 않았을 경우에는 그냥 늘어난다

정답

1번 정답 - C객체 기준으로 그 아래에 만들어진다. float으로 만들어진 객체가 아니기 때문에 라인박스를 무시하고 A객체와 마찬 가지로 제일 상위 division에서 시작된다.

2번 정답 - 기존과 시작점이 달라지게 된다. 이는 overflow: hidden; 속성이 새로운 bfc를 생성하되, 그 기준이 부모가 아닌 라인박스가 되기 때문이다.

3번 정답 - D객체는 float으로 생성된 A객체 밑에 겹쳐지고, A객체의 width보단 작기 때문에 드러나지 않고 완전히 가려지게 된다. 다만 D객체 내의 ‘D’라는 문자열이 있고, 이는 하나의 인라인 요소이기 때문에 A객체의 가드에 반응해 A가 끝난 시점 이후에 작성된다.

*** D객체에 height를 주게 되면? - 인라인 요소는 어쨋든 밀려난다.

3. 다음 문제에 O,X로 답해주세요.

라인박스 내의 가용영역이 width가 100px고 height가 300px라고 했을 때(더 이상 넘어갈 영역이 없다고 가정함)

(1) width: 300px; height: 50px;로 생성되는 A객체는 그려진다.

(2) A객체 이후 그려지는 B객체(무조건 가용범위 내에서 그려짐), 이 떄 시작점은 같나요 다른가요?

(3) 라인박스 내에선 인라인 요소가 늘어난다고 해서 객체가 늘어나지 않는다.

(윤)

(1) x 다음 줄로 넘어가서 그려진다?

(2) o 그럼 같다

(3) o - height가 정해져 있을 때만, height가 정해져 있지 않으면 늘어난다

정답

X, X, O

1번 정답 - 가용영역의 값을 넘어간 경우 그려지지 않는다. 숨겨진다.

2번 정답 - 다르다. 라인 박스는 가로만 보는 게 아니라 세로도 본다. A객체는 width가 넘어갔기 때문에 그려지지 않지만 height는 가용영역내에서 사용된 걸로 잡혀서 A객체의 height 50px이후에 B객체가시작된다.

3번 정답 - 맞다. 원래는 overflow: auto(일반적으로 visible과 동일)일 경우 인라인 요소가 늘어나면 bfc도 늘어나게 되는데 라인박스를 사용하는 중에는 늘어나지 않는다.