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
display 속성에 따른 수평 정렬
- block : margin-right, margin-left (자신에서)
- inline : text-align (부모에서)
