디스플레이의 핵심은 Layout
- 모든 element는 박스
- 디스플레이는 이웃 element의 레이아웃에 영향을 받음
Common Values
- inline : 다른 element 옆에 앉는 것
- 충분한 width, height 를 차지
- block : 다른 element 사이에 라인을 끊음
- default: 모든 수평 width 차지하고 height는 충분히
- rule은 width, height 설정할 수 있다.
- inline-block
- inline과 동일하나 width, height을 받을 수 있다.
- none: 페이지에서 제거
상호보완적인 properties
- float
- 떠있는 것처럼 보임 ( 다른 태그와는 겹침 )
- right or left에 element 위치 변경
- element는 서로 인식하고 오버랩되지 않는다.
- values: left, right
- clear
- element가 떠내려가도록 유지할때 사용
- values: left, right, both
Element Overflow
- width/height 설정하고 content가 더 길게 맞지 않을 때 무슨 일이 일어날까?
- content 접근을 결정하는 overflow를 사용
Overflow
- visible: 다른 텍스트 위에 보여줄 수 있다
- hidden: 경계선 넘는건 숨김
- scroll: 스크롤바를 준다
- auto: 필요에 따라 알아서 스크롤바를 추가
Other Display Values
- 새로운 display properties를 이용가능하나 항상 지원되는 건 아니다.
- Table
- Grid
- Flexbox
display:table
테이블 구조 사용 없이 테이블같은 레이아웃을 원할때 있다.
display:table, display:table-cell을 사용하면 된다.
Visibility
- element를 보여줄지 말지 명시
- options
- visible
- hidden
- collapse (table에서만)
display none 은 브라우저가 element가 없는 듯이 행동
visibility hidden은 공간은 있지만 안보여주는 것
Review
- display는 페이지에서 element의 위치를 위한 도구
- 빠른 디자인은 빠른 코딩을 만든다.
- 다른 옵션을 볼 수 있는 도구를 활용하라
Leave A Comment