CSS 레이아웃 관련 몇가지

☆ box-sizing

- 오랜 시간에 걸쳐 사람들은 너비값을 조절하는 해법이 그다지 만족스럽지 않다는 사실을 깨닫고 box-sizing이라고 하는 새로운 CSS 프로퍼티를 만들어냈습니다. 엘리먼트에 box-sizing을 지정하면 해당 엘리먼트의 패딩과 테두리가 더는 너비를 늘리지 않습니다

☆ display

- inline : 넓이,높이 속성 안된다
             : 마진,패딩 안되고 라인하이트로 조정
             : 가로여백은 5px 기본
             : span, a, img
- block : 한줄을 다 차지
             : 넓이,높이,마진,패딩 다 된다
             : div, p,
- inline-block : 인라인 형식이지만 넓이, 높이  조정이 가능
                       : 기본적으로 5px공간 생김, 조정가능
* display  속성은 인라인 형식의 요소를 블락으로 블락형식의 요소는 인라인으로 스타일을 바꿔주기 위해 사용하는것

☆ visibility
- display와 비교하면 이해가 쉬움
- display는 흔적도없이 자취를 감추게 함.
- visibility는 흔적을 남기고(공간을 남기고)
이름대로 안보이게만 함
- visible: 보임
  - hidden: 숨김 (자신의 영역은 계속 차지)
- collapse: 겹치도록 지정(테이블의 행과 열
- inherit: 부모 요소의 값을 상속

☆ position
- static : 기본값
- relative : 원래 위치기준
- absolute : 상위 요소 기준,없으면 html 기준
- fixed : 브라우저 화면 기준

☆ overflow
overflow 속성은 요소의 박스에 내용이 더 길 때 어떻게 보일지 선택하는 속성입니다.

visible: 기본값으로 내용이 더 길어도 그대로 보입니다.
           (내용이 흘러넘침)
 
hidden : 내용이 넘치면 자릅니다. 자른 부분은 보이지 않습니다.
 
scroll : 내용이 넘치지 않아도 항상 스크롤바가 보입니다.
 
auto : 내용이 잘릴 때만 스크롤바가 보입니다.