[css] overflow, backface-visibility

overflow: visible(기본값) | hidden | clip | scroll | auto;

             [overflow-x], [overflow-y]

https://www.w3schools.com/cssref/pr_pos_overflow.asp => w3schools

---

(책에 없는 관계로..mdn 해석)

visible: 잘라내지않은 않은 상태. content가 paddingbox보다 너비나 높이가 클 경우, padding box 바깥으로 content가 나오게됨.

hidden: padding-box에 맞게 고정됨. paddingbox 바깥으로 넘치는 내용은 보이지 않음. 스크롤바가 없고, 프로그램 내에서(?) 스크롤 가능.

clip(w3s엔 없음): hidden과 유사하지만 hidden과 다르게 programmatic scrolling 불가능

scroll: padding박스에 맞게 잘라내지만, 스크롤바 생성됨(content가 clipped되지 않더라도 생성 되어 있음). 프린트 할때에는 넘치게 프린트됨.

auto: 사용자 에이전트에 따라 달라짐. 만약 content가 paddingbox 안에 들어간다면 visible과 같아보이지만, 새로운 블록서식 문맥(?)을 생성 브라우저들은 만약 컨텐츠가 넘치게 된다면 스크롤바 제공

 

---

backface-visibility: visible(기본값) | hidden;

https://www.w3schools.com/cssref/css3_pr_backface-visibility.asp 

 

요소의 뒷면은 앞면을 거울로 반사했을 때 보이는 이미지와 같다. 2d에서는 보이지 않지만, transformation으로 인해  요소가 3D공간에서 회전했을 때 뒷면은 보일 수 있게 된다. (이 속성은 원근감이 없는 2D transform에서는 효과가 없다.)

 

---