Display
웹 페이지의 layout을 결정하는 CSS의 속성 중 하나
display가 적용된 요소를 웹 브라우저에 언제 어떻게 보일지를 결정
display의 속성 값
- block : div, p, h, li tag등의 기본 속성 값
- inline : span, b, i, a tag등의 기본 속성 값
- inline-block
- none
HTML 요소의 display 속성의 기본 설정 값을 변경하여 웹 페이지를 개발자가 원하는 모양으로 변경 가능
Display -block
항상 새로운 라인(line)에서 시작(줄 바꿈 효과)
해당 라인의 전체 너비를 차지
width, height 속성 지정이 가능
block level 요소 안에는 inline level 요소가 들어 갈 수 있음
Display - inline
새로운 라인에서 시작하지 않고 라인의 일부로 영역 차지. 뒤에 나오는 tag는 줄바꿈 되지 않고 오른족에 표현
요소의 너비는 해당 라인 전체가 아닌 HTML 요소의 내용(content) 만큼만 가로 폭을 차지
width, height, margin-top, margin-bottom 지정 불가능
상하 여백은 line-height로 지정 가능
글자나 문장에 효과를 주기 위해 사용
Display - inline-block
block과 inline의 중간 형태
inline과 같이 새로운 라인에서 시작 하지는 않지만 block 처럼 크기 지정 가능
웹 사이트의 메뉴나 내비게이션바를 만들 때 자주 사용
Dislplay - none
HTML 요소를 렌더링하지 않도록 설정
visibility 속성을 hidden으로 설정한 것과 비교