1. 가장 위에 오는 요소는 파랑색 div야!
2. 파랑색 div는 position: relative 때문에 Fragment가 top: 50px만큼 이동했어!
3. 위에서 아래로 문자만 읽는다면 (렌더링 결과)
Hello
Sagack !!
Welcome MonthSub
!!
순서로 읽을 수 있어!
4. relative 요소가 여러개일땐 html 실행 순서에 따라 위에 오는 요소가 결정되!
정답
(4) - html은 위에서 아래로 순차적으로 실행되기 때문에 마지막 relative가 최상단에 놓이게 됩니다.
윤
3번! - relative로 이동해도 영역은 그대로다
2. [송이] 다음 중 Fixed Number가 대응할 수 없는 것이 아닌것은? (상대 vs 절대)
(1) 스크린 사이즈
(2) 브라우저 닫기 버튼
(3) 브라우저 폰트 사이즈 → rem
(4) 브라우저 스크롤 사이즈
(5) 최상단 네비게이션 위치
정답
(5) 최상단 네비게이션의 위치는 (0, 0)으로 절대적인 수치로 계산할 수 있습니다!
윤 - 3
예진 - 3
3. [윤] 각 문제에 대해 ox로 답해주세요!
(1) Abstract Calculator은 먼저 수치로 바뀐 뒤에 환경을 인식한다
(2) rendering system의 과정은
geometry calculate(reflow), fragment fill(repaint) 2가지이다
(3) css level3은 level 2.1의 모든 모듈이 업그레이드 된 공식 레벨이다
(4) Normal Flow는 bfc, ifc 두 가지 계산법이 있다
(5) relative와 static은 z-index값이 같다
(6) 돔 구조와 렌더링 시스템은 별개이다
정답
(1) x - 실제 그려지는 순간마다 환경을 인식해 계산되어 수치로 바뀌게 됨
(2) o
(3) x - css3는 2.1의 모듈중 3로 업그레이드된 애들을 모은 것 뿐, 공식적이지 않다.
(4) x - bfc, ifc, static(기본위치), relative(상대위치)가 있다.
(5) x - relative가 더 큼
(6) o - 돔의 포함구조와 무관하게 작성된 순서대로 bfc, ifc가 계산되어 그려진다.
예진 - O, O, O, O, X, O
송이 - X / O / X / X / X / O (relative의 z-index 값은 명시?)
4. [윤] bfc, ifc 관한 설명 중 틀린 것을 고르세요 (2개)
(1) bfc 계산법에 따르면
width를 특정 수치로 정하면 부모 기준 너비에서 특정 수치를 제외한 만큼 비게 된다
(2) bfc 계산법에 따르면
자식 요소의 위치는 (상위)형제 요소들의 높이 값에 따라 결정된다
(3) ifc 계산법에 따르면
요소들의 너비 합이 부모의 너비보다 커질 시 다음 줄로 넘어간다
(4) ifc 계산법에 따르면
한 줄의 높이는 높이 값이 가장 큰 요소의 높이 값으로 설정된다
(5) ifc 계산법에 따르면
공백 없는 문자들의 너비가 부모의 너비보다 커질 시 다음 줄로 분리된다
정답
(1) width를 특정 수치로 정해도 부모의 전체 너비를 다 차지한다
비는 공간은 margin으로 채워짐
(5) 공백 없는 문자들의 그룹을 ifc영역 하나로 보기 때문에 부모에 지정된 너비보다
클 시 벗어나게 됨
** hello
[red div] // -> 높이 안잡아주면 출력 X
world !!
(공백)
놀고싶다
하지만 취직해야함
**
송이
** hello
world !!
(파랑 박스)
놀고싶다
하지만 취직해야함 (노랑 박스)
**
6. [예진] 다음 설명에 대응하는 용어를 작성해주세요.
(1) 어떤 지오메트리 영역에 x,y,width,height등을 정의하는,
추상적인 위치를 결정하는 시스템
(2) 랜더링 시스템에서 상대적인 개념의 pixcel대신 사용하는 단편조각을 뜻하는 단어
(3) components들이 일정한 사용 방법과 규칙을 지키는 형태로 구현되어 있는 것
정답
(1) position, (2) fragment, (3) framework
윤
(1) geometry calculate
(2) fragment
(3) 프레임워크
송이 - (1) abstract calculator → position (위치!!!) (2) fragment (3) framework
7. [예진] 다음은 normal flow에 대한 설명중 일부입니다. 다음 빈칸 안에 들어갈 답을 올바르게 작성해주세요.
Normal flow안에서만 자동으로 크기가 계산되고, 위치를 잡아준다. 여기를 벗어나면 이러한
작용이 없어지는데 따로 속성을 잡아주지 않더라도 이러한 작용안에서 머물 수 있는 이유는
html의 모든 엘리먼트들은 기본적으로 [] 으로 작성되기 때문이다.
정답
position static
윤 - Normal flow계산법 | static
송이 - position: static
8. [예진] 다음의 출력 결과를 확인하면 span태그의 width가 50px로 잡혀있는데도 불구하고 문자열이 50px를 넘어가는 것을 확인할 수 있습니다. 이유는 무엇인가요?
