디스플레이의 핵심은 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의 위치를 위한 도구
  • 빠른 디자인은 빠른 코딩을 만든다.
  • 다른 옵션을 볼 수 있는 도구를 활용하라