[CSS] CSS Display

Display

• 웹 페이지 layout을 결정하는 CSS의 속성 중 하나
• display가 적용된 요소를 웹 브라우저에 언제 어떻게 보일지를 결정
• display의 속성 값
  • block : div, p, h, li tag 등의 기본 속성 값
  • inline : span, b, i, a tag 등의 기본 속성 값
  • inline-block
  • none

block

• 항상 새로운 라인에서 시작 (줄 바꿈 효과)
• 해당 라인의 전체 너비를 차지
• width, height 속성 지정 가능
• block level 요소 안에는 inline level 요소가 들어갈 수 있음

inline

• 새로운 라인에서 시작하지 않고 라인의 일부로 영역 차지
• 뒤에 나오는 tag는 줄바꿈 되지 않고 오른쪽에 표현
• 요소의 너비는 해당 라인 전체가 아닌 HTML 요소의 내용 만큼만 가로 폭을 차지
• width, height, margin-top, margin-bottom 지정 불가능
• 상하 여백은 line-height로 지정 가능
• 글자나 문장에 효과를 주기 위해 사용

inline-block

• block과 inline의 중간 형태
• inline과 같이 새로운 라인에서 시작하지는 않지만 block처럼 크기 지정 가능
• 웹 사이트의 메뉴나 네비게이션 바를 만들 때 자주 사용

none

• HTML 요소를 렌더링 하지 않도록 설정

display 속성에 따른 수평 정렬

• block : margin-right, margin-left (자신에서)
• inline : text-align (부모에서)