_(1).jpeg&blockId=0e552736-74f0-4f5a-89e1-328d4931ca7c)
모던 박스
•
border-box: fragment(fragment-fill) 단계에서 작동. 그림 그릴 때만 영향을 줌
•
border box 밖의 box-shadow는 geometry에 영향을 주지 않음
•
box-shadow: inset을 주면 border-box 안에 그림자를 줄 수 있음.
◦
또한 몇 개라도 겹겹이 줄 수 있음
•
outline: box shadow와 같은 위치에 그려짐. 역시 geometry에 영향을 주지 않음
⇒ modern box: geometry에 영향을 끼치지 않는 outline, box-shadow, box-shadow inset가 포함되어 보다 복잡한 박스 모델이 됨
•
콘텐츠 박스: width, height
•
box-sizing: contents-box → 무조건 콘텐츠 크기를 지켜야 할 때(빨간 박스)
•
box-sizing: border-box → width, height값에 padding, border를 포함시킬 때
•
div 태그 사이에 공백 문자가 있으면 박스 사이에 공백이 생김
•
저 공백을 없애면 됨
•
border box까지 색깔이 칠해진 것을 볼 수 있음
box-shadow: border-box 밖에 그려지고, geometry에 영향을 주지 않음
geometry에는 영향을 주지 않고, 레이아웃엔 영향을 주지 않고 그림에만 영향을 줌
•
relative는 normal flow 이후에 그려지므로 아래와 같은 모습이 됨
•
inset은 border-box 안쪽, inset에 그려짐
◦
컴마를 이용해서 하나의 박스에 섀도우를 몇개라도 그릴 수 있음. 만약 블러를 안주면 border 처럼 이용할 수 있게 됨
•
처음에 10이 그려졌으므로 두께를 20으로 잡아야 그 다음 border가 10만큼 보이게 됨
•
스택처럼 쌓이기 때문에 가장 먼저 쓰는 것부터 그려짐
•
box-shadow는 border를 따라가기 때문에 border-radius로 모양을 만들 수 있음
outline
•
stitched 기술: outline, box-shadow 섞음
◦
outline은 border를 따라가지 않고,
◦
box-shadow는 border를 따라가는 특징을 활용
position
•
absolute, fixed
caret position, offset
•
right, left 등 추상적으로 명령해도, 계산이 끝나면 fixed number로 바뀜
◦
이 숫자를 모두 offset이라고 함
•
offset: geometry 계산이 끝난 후의 fixed number 값
◦
이 값은 read only. 변경 불가임
•
우리가 아무리 css를 적어도, 결국은 브라우저 렌더링 과정을 거쳐야하기 때문에 우리가 의도한 화면이 안나올 수 있음
•
프레임: 변경해야 하는 것들을 변경만 시켜놓고, 한꺼번에 재계산하는 것
•
offset을 요청하면 queue를 지우고 다시 재계산해야 함. 그래서 웬만하면 offset을 쓰지 않는 게 좋음
offset 계산법
•
기준점을 찾는다. → 기준점: offset parent
•
offset parent (≠ DOM parent)
◦
null: root, html, body / position: fixed / out of dom tree 의 경우에는 offset parent가 존재하지 않음
▪
DOM tree 안에 존재해야 만 offset parent가 존재
◦
recursive search(재귀적으로 찾아나감)
▪
parent가 fixed면 offset parent가 null. 더 이상 찾지 않음
▪
parent position이 static이 아니면 ok (ok → 부모를 찾음)
•
static이 아닌 부모를 찾을 때까지.
▪
body면 ok
▪
td, th, table이면 ok
•
하지만 안에 div를 만들어줘야 absolute가 적용됨
•
스펙에는 이렇게 써있지만 실제 동작은 그러함
▪
parent
⇒ offset parent가 될 수 있는 것들은 absolute, relative 밖에 없음
⇒ 즉, DOM 상의 부모가 아니라 계속 absolute, relative인 부모를 찾음
•
relative를 쓰는 이유
◦
absolute 엘리먼트에 대한 컨테이너로서 씀 → 네이버 헤더 로고 영역
offsetTop, offsetLeft같은 것들을 사용할 수 있음.
진짜 콘텐츠 영역은 offsetScroll*에 있음. 콘텐츠는 offset*에 갇히게 됨.
•
scroll을 내릴 때는 scrollTo 메서드를 사용
absolute
static의 위치와 똑같은 기본값을 가짐. 여기에 left, right를 주면 offset parent를 찾음
•
left, top: offset parent를 기준으로 함
static 박스에게 left, top을 주면?
⇒ 무시함. normal flow로 그릴 거니까.
→ 즉, left, top은 static에게는 안통함
left, top의 의미
•
absolute: offset parent로부터의 거리
•
relative: normal flow로 그렸을 때 static과의 거리
position vs float
•
float는 새로운 BFC 영역을 생성하므로 normal flow에 속함
•
그러므로 새로 그리는 position이 float을 이김
