CSS - display
display 속성은 요소를 어떻게 보여줄지를 결정합니다.
HTML 태그마다 기본값이 다릅니다.
줄바꿈을 키워드로 이해하는것이 용이합니다.
display: block;
- div 태그, p 태그, li 태그 등의 기본값 입니다.
- 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다.
- 넓이, 높이 속성을 지정할 수 있으며 해당 요소의 다음 요소는 항상 다음 줄에 렌더링 됩니다.
display: inline;
- span 태그, b 태그, i 태그, a 태그 등의 기본값 입니다.
- block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다.
- 해당 요소의 다음 요소는 줄바꿈이 되지않고 렌더링 됩니다.
display: inline-block;
- block과 inline의 중간 형태라고 볼 수 있습니다.
- 줄바꿈이 되지 않지만 넓이와 높이 속성을 지정할 수 있습니다.
- Internet Explorer 7 이하에서는 사용할 수 없습니다.
추가적으로 none 속성이 존재합니다.
display: none;
- 요소를 렌더링하지 않도록 설정합니다.
- visibility 속성을 hidden으로 설정 한 것과 달리 HTML 문서 내에사 영역또한 차지하지 않습니다.
