CSS 디스플레이(display)속성-

CSS 디스플레이 속성 기본값 

display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나.

 

대부분의 HTML 요소는

기본적으로 둘 중 하나를 display 속성 값을 가진다.

 

1. 블록(block)
2. 인라인(inline) 

 

블록(block)

display:block

{ display : block }은 한 라인을 다 쓴다. 

<div>, <h1>, <p>, <ul>, <ol>, <form>  대표적인 블록(block) 요소

 

인라인(inlne)

display:inline

{ display : inline } 컨텐츠를 감싸는 크기만 갖는다. 

block속성과 다르게 줄바꿈이 되지 않고, 연달아 쓸경우 옆으로 붙게 된다.

<span>, <span>, <a>, <img> 요소는 대표적인 인라인(inline) 요소

**크기를 변화시킬 수 없다. 너비를 주고 싶다면 속성을 block 이나 inline-block 로 주어야 한다.

 

 

그 외 사용되는 속성 

 

• inline-block : block 와 inline의 중간 속성(너비 지정 가능) 
• none : 렌더링을 하지 않아 영역도 차지 하지 않음 
• flex : 요소들을 블록 박스 단위로 쌓아서 정렬한다. (한쪽방향으로만 정렬) **ie 10이상 
• grid : 요소들을 블록박스 단위로 격자 모양으로 정렬한다. (좌우, 상하 2차원 정렬)**ie 10이상 
• table : 요소를 <table>처럼 처리
• initial
• inherit
• content