[CSS] CSS 박스 - display 속성

CSS 박스 속성

HTML 요소를 사각형 형태의 박스로 간주하는 것으로, CSS를 총해 각 박스의 위치, 크기, 색상 등을 지정한다.
ㄴ padding속성은 내용과 테두리 사이의 간격을 지정
ㄴ border속성은 테두리 두께와 색상 등 스타일을 지정
ㄴ margin속성은 테두리 밖이 다른 요소 사이의 간격을 지정

display 속성

요소를 위해 사용할 박스의 종류를 지정
속성 값으로 inline의 올 경우 width/height 속성을 지정 할 수 없고, margin 속성은 좌우로만 적용 할 수 있다.
inline-block, block의 경우 width/height, margin 속성을 정상적으로 지정 할 수 있다.

display : none | inline | block | inline-block | list-item ;

• none => 요소를 화면에 표시하지 않음
• inline => 기본값. 요소를 인라인 박스로 취급(줄바꿈 미수행)
• block => 요소를 블록 박스로 취급(박스 앞뒤로 줄바꿈)
• inline-block => 인라인 수준의 블록으로 취급(인라인 블록 내부는 블록 형식으로 되어 있고, 박스 자체는 인라인 박스로 표시)
• list-item => 블록 박스를 목록의 항목과 같이 표시

속성값 지정 안 할 경우

첫 번째 span 요소 두 번째 span 요소 세 번째 span 요소 네 번째 span 요소

2번째 3번째 inline-block로 지정 할 경우

첫 번째 span 요소 두 번째 span 요소 세 번째 span 요소 네 번째 span 요소

2번째 3번째 list-item 지정 할 경우

첫 번째 span 요소 두 번째 span 요소 세 번째 span 요소 네 번째 span 요소