[css] display 속성 - block / inline / inline-block / none

display속성으로 block, inline, inline-block, none 값을 가질 수 있다. 

---

1. block 

기본적으로 가로 영역을 100%로 채워, 다음 태그는 줄바꿈이 된 것처럼 보여진다.

 

•  줄바꿈 O
•  width와 height속성을 지정 할 수 있다. 
•  margin과 padding의 값을 지정 할 수 있다.

width와 height속성을 지정해, 다음 블록태그가 그 이전 블록태그의 오른쪽에 배치 될 수 있어도

항상 다음줄에 렌더링 된다.

 

display : block

 

 

width , height , margin , padding 모두 값을 지정할 수 있는것을 확인했다.

 

 

 

2. inline

content의 너비만큼 영역을 차지하기 때문에 달리 줄바꿈이 되지 않고, 

다음에 올 요소가 같은 줄에 배치될 수 있다.

 

• 줄바꿈X
• width와 height속성을 지정할 수 없다.  
• margin-top, margin-bottom의 값을 지정 할 수 없다.

display : inline

 

width , height의 값이 지정되지 않는다. 

margin-top, margin-bottom은 적용되지 않는다.

(margin 사이드는 적용됨)

padding은 적용되는데 padding-top은 적용되지 않았다.

 

 

3. inline-block 

블록과 인라인의 중간형태라고 볼 수 있다.

줄바꿈은 되지않지만 크기를 지정할 수 있다.

 

• 줄바꿈X
• width와 height속성을 지정할 수 있다.

display : inline-block

4. none

요소를 렌더링하지 않도록 설정한다. 

영역차치도 하지 않는다. 

 

display: none       -> 영역 차지 X , 렌더링을 하지 않음 

visibility: hidden   -> 영역 차지 O , 렌더링이 됨. 보이지 않게 가린것 뿐이다! 

 

display: none 

none의 경우 영역 차지도 렌더링도 NO!

 

visibility: hidden

visibility: hidden 의 경우 영역 차지도 렌더링도 YES! 단지 보이지 않을 뿐

 

 

 

https://ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1

CSS display 속성 - ofcourse